HTML之FORM表单

一、表单标签

【why】用于接收用户输入的信息并向其他网页传递数据
【where】登录、注册、订单、调查、搜索等各项B/S应用
【how】
【语法】

<form name="" action="#" method="get/post">
    表单元素
</form>```

【属性】

<table><thead><tr><th>属性名</th><th>作用</th></tr></thead><tbody><tr><td>name</td><td>用于设置标识表单的名称</td></tr><tr><td>action</td><td>处理表单提交数据的网页地址URL</td></tr><tr><td>method</td><td>提交数据的方式，可取值：get / post</td></tr></tbody></table>【注意】get与post 的区别  
 （1）安全性：get方式会将数据显示在地址栏，post不显示，所以post更安全  
 （2）提交数据的长度：get有长度限制，post无长度限制，数据较大时使用post


## 二、表单元素标签

【语法】

`<input name="" type=""  value="" size="" maxlength="" checked=""  />`

【属性】

<table><thead><tr><th>属性名</th><th>作用</th></tr></thead><tbody><tr><td>name</td><td>表单元素名称</td></tr><tr><td>type</td><td>类型(text,password | radio | checkbox | file | button | submit | reset)</td></tr><tr><td>size</td><td>显示宽度</td></tr><tr><td>value</td><td>值</td></tr><tr><td>maxlength</td><td>能输入的最大字符长度</td></tr><tr><td>checked</td><td>是否选中，可取值 checked</td></tr></tbody></table>1. 文本框  
 【语法】`<input type="text"  name="" size="" readonly="readonly" disabled />`

【效果】  
<input disabled="disabled" name="" readonly="readonly" size="" type="text"></input>  
 【属性】

<table><thead><tr><th>属性名</th><th>作用</th></tr></thead><tbody><tr><td>readonly</td><td>只读标志</td></tr><tr><td>disabled</td><td>是否有效标志</td></tr></tbody></table>
2. 密码框  
 【语法】`<input type="password" name="" size=""  />`

【效果】  
<input name="" size="" type="password"></input>
3. 单选按钮  
 【语法】`<input type="radio" name="" value="xx" checked />`

【效果】  
<input checked="checked" name="sex" type="radio" value="xx"></input>男  
<input name="sex" type="radio" value="xx"></input>女
4. 复选按钮  
 【语法】`<input type="checkbox" name="" value="xx" checked />`

【效果】  
<input checked="checked" name="eat" type="checkbox" value="xx"></input>啤酒  
<input checked="checked" name="eat" type="checkbox" value="xx"></input>炸鸡
5. 文件域  
 【语法】`<input type="file" name="" />`

【效果】  
<input name="" type="file"></input>
6. 按钮  
 【语法】```
<!--提交按钮-->
<input type="submit"  value="提交" name="" />         
<!--重置按钮-->
<input type="reset"   value="重置" name="" />
<!--普通按钮-->
<input type="button"  value="普通" name="" />```

【效果】  
<input name="" type="submit" value="提交"></input><input name="" type="reset" value="重置"></input><input name="" type="button" value="普通"></input>
7. 下拉列表  
 【语法】```
<select name="" >
    <option value="值" selected="selected">显示项的内容</option>
    <option value="值">显示项的内容</option>
    ……
</select>```

【效果】  
<select name=""><option selected="selected" value="值">北京</option><option value="值">上海</option>……  
</select>
8. 多行文本域  
 【语法】```
<textarea name="" cols="列数" rows="行数">
    文本域的内容
</textarea>```

【效果】  
<textarea cols="列数" name="" rows="行数"><br />  
 文本域的内容<br />  
</textarea>


## 三、使用表格布局表单元素

1. 添加`<form>`标签
2. 在`<form>`中添加表格标签
3. 在表格单元格中添加文本及表单元素