表单

表单的作用

收集页面上用户填写的信息，用户提交表单时向服务器传输数据，从而实现用户与web服务器的交互。

表单定义及属性

HTML表单是包含表单元素的区域，表单使用<form>标签创建，form标签是块级元素。
action：提交的地址或者服务器，后台代码会根据这个地址进行处理，为空或者不写，表示提交到当前页面
method：定义浏览器将表单中的数据传递给服务器的方式，取值最常用的是GET/POST
target：在何处打开action，常见值：_blank在新窗口中打开，_self相同的框架中打开（默认），_parent在父框架中打开，_top在新窗口中打开，_framename指定的框架中打开
enctype：编码方式，默认值：application/x-www-form-urlencoded，包含文件上传控件时multipart/form-data
name：表单名称

表单元素

input标签

<input type="text" name="username" />/*主要属性：size指定文本框的宽度，以字符个数为单位，大多数浏览器缺省时为20；value指默认值；maxlength用户输入的最大字符长度；readonly只读属性；disabled禁用，不能获取焦点，不能修改，不能提交*/
<input type="password" name="password" /> /*文件显示为圆点*/
<input type="checkbox" name="color" value="red" />红色
<input type="checkbox" name="color" value="yellow" />黄色
<input type="checkbox" name="color" value="blue" />蓝色
<input type="radio" name="sex" value="male" />男性
<input type="radio" name="sex" value="female" />女性
<input type="file" accept="image/gif" />/*使用file时，form的enctype属性必须为multipart/form-data，method为post*/
<input type="hidden" name="ccc" value="123" /> /*隐藏域*/
<input type="submit" /> /*提交按钮*/
<input type="reset" />/*重置按钮*/
<input type="button" />/*普通按钮*/

select标签，下拉列表 value="-1"表示不选择，加上multiple属性表示允许多选（按Ctrl键）

<select name="color">
  <option value="red">红色</option>
  <option value="yellow">黄色</option>
  <option value="blue" selected>蓝色</option>
</select>

textarea标签，多行文本

<textarea name="article" cols="30" rows="60"></textarea>

label文本，点击文本时input会获取焦点，for表示所要修饰的控件ID

<label for="username"></label>

简单介绍HTML表单的用法