表单标签——HTML5学习笔记（7）

8.1 表单的作用

• 收集用户信息

8.2 组成

• 表单域：包含表单元素的区域，写表单需要有一个表单域将它包含
• 表单控件
• 提示信息

8.3 表单域

• 例：

<form action="url地址(提交给该页面处理)" method="提交方式" name="表单域名称"> 
控件1
控件2
……
</form> 

• method属性：
  • get
  • post
• <form>会把它范围内的表单元素信息提交给服务器

8.4 表单元素

8.4.1 input输入表单元素

• 例：

<input type="属性值" name="表单元素名字" value="表单元素的值"/>

• 特点：
  • 单标签
  • type的属性值用来指定不同种类的控件，如复选框、按钮等
  • type，name,value属性是必需的
• type属性：
  1. text：文本框，用户可以输入任何文字，长度20，一行
  2. password：密码输入框，输入字符被掩码
  3. radio：单选按钮（一组单选按钮的name需相同）
  • 例：

  性别：男 <input type="radio" name="sex" value="男"> 女 <input type="radio" name="sex" value="女">
  

  4. checkbox：复选框，可实现多选，或者单独一个（如用户同意协议）（一组复选框的name也需要相同）
  5. submit；提交按钮，点击就会把 表单域内 表单元素的值 发送至服务器
  • 例：

  <input type="submit" value="按钮内部的文字">
  

  6. reset：重置按钮，点击就会清除表单内的所有数据，还原初始默认状态，写法类submit
  7. button：按钮，做某件事，不提交数据，用于启动JavaScript启动脚本，写法类submit，比如获取短信验证码
  8. file：文件域，提供文件上传功能，可以选择文件上传，可以设置输入字段和“浏览”按钮
  9. hidden：定义隐藏的输入字段
  10. image：定义图像形式的提交按钮
• name属性：
  • 单选按钮和复选框按钮需要有相同的name值
• value属性：
  • 如果是text，那么在用户未输入前文本框便显示"请输入用户名"的文本

  <input type="text" name="username" value="请输入用户名"/>
  

  • 如果是radio/checkbox，则value的值在选中该按钮后会送入后台
• checked属性：
  • 在单选按钮和复选框中使用，设定一打开默认的选中状态
  • 例：

  性别：男 <input type="radio" name="sex" value="男" checked="checked"> 女 <input type="radio" name="sex" value="女">
  

• maxlength属性：（后面用正则表达式实现）
  • 规定输入字段中字符的最大长度，属性值为一个正整数
  • 例：输入六位数密码

  <input type="text" name="username" value="请输入用户名" maxlength="6"/>
  

8.4.2 label标签

• 作用：
  • 为input元素定义标注
  • 绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将光标转到或选择对应的表单元素上，增加用户体验。否则要将光标对准一个很小的按钮才能选择，很麻烦。
• 例：for属性值和id属性值需一致

  <label for="nan">男<lable>
  <input type="radio" name="sex" id="nan" />
  

8.4.3 select下拉表单元素

• 作用：有多个选项让用户选择，为了节约页面空间，使用<select>标签定义下拉列表，比如选择省份
• 例：

<form>
籍贯：
<select>
     <option selected="selected">山东</option>
     <option>上海</option>
     <option>浙江</option>
</select>
</form>

• 特点
  • 至少包含一对option
• selected属性：在<option>中定义selected=“selected”，则该选项为默认选中项

8.4.4 textarea文本域元素

• 作用：当用户输入内容较多时使用，多行，例如评论
• 例：

<form>
    今日反馈：
    <textarea>
        请输入反馈内容//默认显示文本
    </textarea>
</form>

8.5 推荐网站

• 推荐网站：W3C、MDN、mozilla