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>