1、表单在网页中的应用：登录、注册常用到表单 　　

　　

　　2、表单的语法： 　　

　　

　　表单方法=' post '操作='结果。' html ' 　　

　　

　　p名字：input name='name' type='text' /p 　　

　　

　　p密码：input name=' pass ' type=' password '/p 　　

　　

　　p 　　

　　

　　输入类型='提交'名称='按钮'值='提交'/ 　　

　　

　　输入类型='重置'名称='重置'值='重填"/ 　　

　　

　　/p 　　

　　

　　/表单 　　

　　

　　3、表单元素说明： 　　

　　

　　:型指定元素的类型文本、密码、复选框、单选、提交、重置、文件、隐藏、图像和按钮，默认为文字。 　　

　　

　　名称：指定表单元素的名称。 　　

　　

　　值：元素的初始值。类型为收音机时必须指定一个值。 　　

　　

　　尺寸：指定表单元素的初始宽度。当类型为文本或密码时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位。 　　

　　

　　maxlength:type类型类型为文本或密码时，输入的最大字符数。 　　

　　

　　checked:type类型类型为收音机或检验盒时，指定按钮是否是被选中。 　　

　　

　　4、示例： 　　

　　

　　超文本标记语言 　　

　　

　　头 　　

　　

　　标题表单元素/标题 　　

　　

　　/头 　　

　　

　　身体 　　

　　

　　！-表单- 　　

　　

　　表单方法='POST '操作='# ' 　　

　　

　　！-标签- 　　

　　

　　='用户名'的标签姓名：/标签 　　

　　

　　！-文本框价值属性是设置默认显示的值- 　　

　　

　　输入id='用户名'值='宋泽通'/ 　　

　　

　　！-密码框- 　　

　　

　　br/标签为='pwd '密码：/标签 　　

　　

　　输入类型='密码id='密码' 　　

　　

　　br/ 　　

　　

　　！-单选框- 　　

　　

　　='性别'的标签性别：/标签 　　

　　

　　输入类型='单选'名称='性别'已检查/男 　　

　　

　　input type='radio' name='sex'/女 　　

　　

　　！-复选框- 　　

　　

　　br/ 　　

　　

　　='爱好'的标签爱好：/标签 　　

　　

　　input type=' checkbox ' name=' hobby ' id=' hobby '/听音乐 　　

　　

　　输入类型='复选框'名称='爱好'/旅游 　　

　　

　　输入类型='复选框'名称='爱好'/游泳 　　

　　

　　br/ 　　

　　

　　！-下拉列表- 　　

　　

　　='月'的标签月份：/标签 　　

　　

　　选择id='月' 　　

/>

　　

<option>1月</option>

　　

<option>2月</option>

　　

<option>3月</option>

　　

</select>

　　

<br/>

　　

<!-- 按钮 -->

　　

<input type="reset" value="重置按钮"/>

　　

<input type="submit" value="提交按钮"/>

　　

<input type="button" value="普通按钮"/>

　　

<br/>

　　

<!-- 图片按钮 -->

　　

<input type="image" src="one.jpg" width="200px" heigth="200px"/>

　　

<br/>

　　

<button type="submit">提交</button>

　　

<button type="reset">重置</button>

　　

　　

<br/>

　　

<label for="profile">

　　

个人简介：

　　

</label>

　　

<!-- 多行文本域 -->

　　

<textarea >本人已同意什么条款</textarea>

　　

　　

<br/>

　　

<br/>

　　

<br/>

　　

<!-- 文件域 -->

　　

<label for="upload">上传头像:</label>

　　

<input type="file"/>

　　

<!-- 邮箱 -->

　　

<br/>

　　

<label for="QQ邮箱">邮箱：</label>

　　

<input type="email"/>

　　

　　

　　

<br/>

　　

<!-- 网址 -->

　　

<label for="ur">网址：</label>

　　

<input type="url"/>

　　

　　

<!-- 数字 -->

　　

<br/>

　　

<label for="shuzi">数字：</label>

　　

<input type="number" name="shuzi" min="0" max="100" step="10"/>

　　

　　

<br/>

　　

<label for="huakuai">滑块：</label>

　　

<input type="range" />

　　

<!-- 搜索框 -->

　　

　　

<br/>

　　

<label for="sousuo">搜索</label>

　　

<input type="search"/>

　　

　　

<!-- 隐藏域 -->

　　

<br/>

　　

<input type="hidden"value="1">

　　

<!-- 只读：只能看不能修改，禁用：不能用 -->

　　

<input value="我是只读的" readonly/>

　　

<input type="button" value="我是禁用的" disabled/>

　　

　　

<!-- palceholder默认提示 -->

　　

<br/>

　　

<input placeholder="默认提示框"/>

　　

<br/>

　　

<!-- 文本框内容提示不能为空，否则不允许用户提交表单（网页上的必填项） -->

　　

<input required="必填项"/>

　　

<button type="submit">提交</button>

　　

<br/>

　　

<!-- 用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单-->

　　

<input required pattern="^1<3578>\d{9}"/>

　　

<button type="submit">提交</button>

　　

　　

</form>

　　

</body>

　　

</html>

　　

　　

效果图链接：file:///D:/ruanjian/VS/wenjianxiangmu/htmlThree/form.html