4.3 详解form表单

form 表单慎用！ ！！（浏览器加载慢！需用在适当的位置）

form表单有两个比较重要的属性
1.action: 表单提交到服务器的地址
2.method：表单提交数据的两种 （get/post）

get属性： 使用URL传递参数：  http://服务器地址？name=value1&name=value2

(?表示传递参数，?后面采用name=value的形式传递，多个参数之间，用&链接)

input常用属性：

type: 表示input输入框的类型 

name：name:input输入框的别名。一般情况下，必填。因为，传递数据时，使用name=value的形式传递

value: input输入框的默认值。
placeholder：input的提示内容，当输入框用value的时候，提示内容消失。
checked: 默认选择
disablef: 设置控件不能使用，用在按钮上不能点击，用在输入框上不能修改，
（注意：如果输入框disabled,则输入框信息不能向后台传递）
hidden:  隐藏。等同于<input type="hidden" name="username" value="123">
常配合disabled使用使用隐藏域传递数据。
input-type属性详解

text: 文本框

password: 密码框

radio: 单选按钮 （radio凭借name属性区分是否为同一组，name相同为同组，同组只能选一个）

checkbox: 复选按钮 （checkbox按钮,可以多选。name与value属性同时存在提交时，提交的是value的属性值。）

file: 文件上传按钮

submit: 提交按钮（提交表单数据）

reset: 重置按钮（将表单数据重置为初始状态）

image: 图形提交按钮（功能等同于 submit 可以提交数据）

button: 普通按钮（无任何功能）

select:下拉选择属性

用法 <select>

<option></option> (可以有N个下拉选项)

<option></option>
      </select>

select属性 

value="":当option没有value属性时，往后台传递的是<option></option>标签中的文字；         当option有value属性时，往后台传递的是value属性的值。        title="":鼠标指上后显示的文字。        selected="selected":默认选中。<optgroup label="山东省"></optgroup> :用于将option标签进行分组，label属性表示分组名。

文本域：textarea

用法<textarea></textarea>

其属性：

1.设置宽高大小： width height 自身有cols/rows两个属性 但不常用

2.readonly: 设置为只读模式，不允许编辑。

style="resize: none"宽高不许修改

style="overflow: "（设置当文字超出区域时，如何处理。

也可以通过overflow-x/overflow-y分别设置水平垂直方向的显示方式。常用属性值:hidden 超出区域的文字，隐藏无法显示）scroll属性： 无论文字多少，均会显示滚动auto属性：  自动，根据文字多少自动决定是否显示滚动条（默认样式）
例：

<form action="？？？" method="get" id="form1" autocomplete="off">    <table>        <tr>            <td>用户名</td>            <td>                <input type="text" name="username" placeholder="请输入用户名" value="lilei" tabindex="1" autocomplete="on"                       autofocus="autofocus" required="required"/>                <!--<input type="hidden" name="username" value="1234" />-->            </td>        </tr>        <tr>            <td>密码</td>            <td>                <input type="password" name="password" placeholder="请输入密码"/>            </td>        </tr>        <tr>            <td>性别</td>            <td>                <input type="radio" name="sex" value="男" checked="checked"/>男                <input type="radio" name="sex" value="女"/>女            </td>        </tr>        <tr>            <td>兴趣</td>            <td>                <input type="checkbox" name="hobby" value="s1" checked="checked"/>读书                <input type="checkbox" name="hobby" value="s2"/>音乐                <input type="checkbox" name="hobby" value="s3" checked="checked"/>游戏                <input type="checkbox" name="hobby" value="s4"/>运动            </td>        </tr>        <tr>            <td>头像</td>            <td>                <input type="file" name="head" tabindex="2"/>            </td>        </tr>        <tr>            <td>城市</td>            <td>                <select name="city">                    <optgroup label="山东省">                        <option value="1" title="">青岛</option>                        <option value="2" selected="selected">烟台</option>                        <option value="3">济南</option>                    </optgroup>                    <optgroup label="北京市">                        <option>海淀区</option>                        <option>朝阳区</option>                    </optgroup>                </select>            </td>        </tr>        <tr>            <td>服务协议</td>        </tr>        <tr>            <td colspan="2">                  <textarea style="width: 230px; height: 100px; resize: none; overflow-y: scroll;"                                  readonly="readonly" tabindex="3">                     协议框                  </textarea>            </td>        </tr>        <tr>            <td>                <input type="submit" value="注册" tabindex="4"/>            </td>            <td>                <input type="reset" value="重置"/>            </td>        </tr>    </table></form>