作用

收集用户目标信息

组成

在HTML中，一个完整的表单由表单域、表单控件(即表单信息)、提示信息组成

表单域 【已经废弃使用Ajax提交，仅作了解】

作用

一个包含表单元素的区域，用来收集用户信息

语法

html
<form action="服务器脚本HRL地址" method="提交方式"  name="表单域名称">
  ...
</form>  

input

常用属性

属性	属性值	作用
name	自定义	定义input元素的名称
value	自定义	规定input元素的默认值
checked	checked	规定此input元素首次加载时默认被选中
maxlength	正整数	规定输入字段中的字符的最大长度【用的较少，一般使用正则表达式】
placeholder	文本占位符
type	指定类型、email-邮件、text-文本、password-密码

常用属性-value属性

value 属性对于不同 input 类型，用法也不同：

• 对于 "button"、"reset"、"submit" 类型 定义按钮上的文本
• 对于 "text"、"password"、"hidden" 类型 定义输入字段的初始（默认）值
• 对于 "checkbox"、"radio"、"image" 类型
  定义与 input 元素相关的值，当提交表单时该值会发送到表单的 action URL

注意：value 属性对于<input type="checkbox"> 和 <input type="radio"> 是必需的

注意：value 属性不适用于 。

input之type属性文本块和密码框

文本框

语法

html
<form>
  <input type="txt" placeholder="默认展示文本">
</form>  

说明

type取值为：text-文本框、password-密码框【浏览器会 以星号或小圆点隐藏密码】

密码框

语法

html
<form>
  <input type="password">
</form>  

input之type属性单选按钮和复选框

单选按钮

作用

按钮必须具有同一个name值【不然有重复选择错误】实现多选一的效果

语法

html
<form>
  男 <input type="radio" name="gender"> 
  女 <input type="radio" name="gender"> 
</form>  

复选框

作用

实现多选效果

语法

html
<form>
  <input type="checkbox"> 
</form>  

提交按钮

作用

将表单域中的值提交到服务器

语法

html
<form>
  <input type="submit" value="提交默认文本替换文本"> 
</form>  

说明

使用value可以替换默认的提交文本

重置按钮

作用

删除所有表单数据，重置表单域内容，恢复到初始状态

语法

html
<form>
  <input type="reset" value="重置按钮文本"> 
</form>  

普通按钮

点用后不会提交文件,常搭配js使用

html
<form>
  <input type="button" value="获取网站验证码登录"> 
</form>  

文件域

上传文件时使用

html
<form>
  <input type="file" value="获取网站验证码登录"> 
</form>  

注意

1. radio和checkbox各自多个单选按钮或复选框的name值应相同

label标签

作用

label标签用于绑定一个表单元素，当点击标 签内的文本时，浏览器将自动将焦点转到对应的元素上 ，以此增加用户体验

语法

label标签的for属性值指向input的id属性值

html
<form>
     <label for="gender">男</label>
     <input type="txt" id="gender">
</form>

select下拉表单元素

使用场景

表单中填写时下拉列表

语法

html
<form>
  籍贯 
  <select>
    <optgroup label="中国">
      <option selected="hb"value="hubei">湖北</option>
           ...
  </select>  
  <optgroup label="国外">   
     ...
</form>  

注意

1. select中最少包含一对option元素
2. 可以在option中设置selected="selected"时，当前设置项则默认选中
3. 其中option设置value值用于传输到后台 【若省略了value则会将下拉文本发送，注意！！！】

textarea文本域

说明

定义多行文本输入

使用场景

当用户输入文本过多的情况下不建议使用input标签，而应该使用textarea文本域标签【如：评论、留言板等】

语法

html
<form>
   <textarea cols="n" rows="b">

  </textarea>
</form>