07.表单

1.表单的作用：收集网页的信息
2.表单组成：
提示信息
表单控件

表单域：

表单：<form></form>

<form action="1.php" method="post">    用户名：<input type="text" maxlength="6" readonly="readonly disabled="disabled" name="username" value="前端"></form>

※form属性：a*ction：处理信息*

method="get | post"

get通过地址栏提供（传输）信息，安全性差。（会在地址栏显示客户输入的信息）
post通过1.php来处理信息，安全性高。（地址栏显示的是1.php，非客户输入的信息）

文本输入框

<form action="1.php" method="post">    用户名：<input type="text" maxlength="6" name="username" readonly="readonly" disabled="disabled"  value="前端"></form>

属性：maxlength=”6” 限制输入字符的长度
readonly=”readonly” 将输入框设置为只读状态（不能输入编辑）
disabled=”disabled” 输入框未激活状态
name=”username” 输入框的名称，给处理器看
value=”前端” 将输入框的内容传给处理文件（输入框默认显示的文字）
密码输入框

密码：<input type="password" name="pwd">

注：文本输入框的所有属性对密码输入框都有效。

单选框

<input type="radio" name="gender" checked="checked">男<input type="radio" name="gender">女

※属性：
1.只有将name的值设置相同时，才能实现单选效果。
2.checked=”checked” 设置默认选中项

下拉列表
1.格式

<select>    <option>下拉列表选项</option>    <option>下拉列表选项</option></select>

2.下拉列表多选

省（市）：<select multiple="multiple">        <option>山西</option>        <option>山东</option>        <option selectd="selected">北京</option>    </select>

※属性：
multiple="multiple" 将下拉列表设置为多选项
selectd="selectd" 设置默认选中项

3.下拉列表分组

市（区）：<select>        <optgroup label="北京市">            <option>昌平区</option>            <option>海淀区</option>        </optgroup>        <optgroup label="广州市">            <option>昌平区</option>            <option>海淀区</option>        </optgroup>    </select>

多选框

<input type="checkbox" checked="checked">物理<input type="checkbox" checked="checked">数学<input type="checkbox" checked="checked">语文

属性：checked=”checked” 设置默认选中项

多行文本框 设置可输入的文本框

<textarea cols="130" row="10"></textarea>

属性：
cols 控制输入字符的长度。（一个汉字等于两个字符）
rows控制输入的行数

文件上传控件

<input type="file">

文件提交按钮

<input type="submit">

※：可以实现信息提交功能

普通按钮

<input type="button" value="普通按钮">

※不能提交信息，配合JS使用

图片按钮

<input type="image" src="按钮.jpg">

※图片按钮可实现信息提交功能

重置按钮

<input type="reset">

※将所有信息重置到默认原始状态。

给表单信息分组
<filedset></filedset> 对表单信息分组
<legend></legend> 表单信息分组名称

<form>    <fieldest>        <legend>分组信息</legend>    </fieldset></form>

表单控件

<form action="1.php" method="post">    <input type="url">  网址控件    <input type="date">  日期控件     <input type="time">  时间控件     <input type="email">  邮件控件    <input type="number" step="5">  数字控件(step="5"是数字的步数5步5步的增加）     <input type="range" step="5">  滑块控件  </form>