表单

4.1 表单

什么是表单？收集用户填写的信息并将其提交到后台服务器。

<form>

action属性：指定提交的地址；

method属性：指定提交的方式，get/post。

get和post方式的区别：

（1）长度的限制，get方式限制为2k以内；

（2）安全性，get方式提交的数据会直接呈现在地址栏，敏感数据容易被截获。

4.2 文本框

<input id="userId" type="text" maxlength="10" size="20" value="abc">

maxLength:指定文本框能接收的最大字符个数；

size：指定文本框的大小（宽度）

value:指定初始值

4.3 密码框

<input type="password">

密码框和文本框是一样的，文本框的属性同样适用于密码框，唯一不同的是密码框是以掩码的形式显示内容，保证安全性。

4.4 label

<label>的作用

（1）可以单独对其应用相应的样式

（2）for属性可以使之和某个<input>关联，即当单击文本会激活对应的<input>。

<label for="userId">账号：</label>
<input id="userId" type="text" maxlength="10" size="20" value="abc">
<br>
<label for="password">密码：</label>
<input id="password" type="password" maxlength="6">

 

4.5 提交按钮

<input type="submit" value="提交">

(1)点击按钮之后跳转到form表单指定的Action。

(2)value属性：value对应的值就是按键上显示的文字。

(3)点击按钮：将form表单中的input 中name属性值（键）和用户输入的值组成键值对（或input标签value属性对应的值）。 并拼接到form表单Action属性值的后面。

4.6重置按钮

<input type="reset" value="重置">

(1)点击按钮，重置表单内部的输入框（单选按钮）

(2)value属性：value对应的值就是按键上显示的文字。

 

案例：登录表单

<form action="http://www.baidu.com" method="get">

                     <label>账号：</label>

                     <input type="text" name="userId"/>

                     <br>

                     <label>密码：</label>

                     <input type="password" name="pass"/>

                     <br>

                     <input type="submit" value="登录"/>

              </form>

 

？表示后面是参数，参数的形式采用键值对，如userId=abc,userId是键名，abc是键值，此处的键值来自用户的输入。如果是多个参数用“&”分割。

 

4.7 单选按钮

<input type="radio" name="role">学生
<input type="radio" name="role" checked>教师
<input type="radio" name="role">管理员

如果需要将若干个单选按钮编为一组（一组最多只有一个被选中），需要设置相同的name属性。

如果需要默认选中某个选项，需加上checked属性

标签属性的表示形式：

（1）键值对：属性名=属性值

type="text"、maxLength="6"

（2）一些取值为布尔类型的属性直接使用属性名

checked、readonly

4.8 多选按钮

你的兴趣爱好是：
<input type="checkbox" checked>音乐
<input type="checkbox" checked>阅读
<input type="checkbox">游戏
<input type="checkbox">电影
<input type="checkbox">睡觉

 

<form action="http://www.baidu.com" method="get">

                     <h1>信息登记</h1>

                     <label>姓名：</label>

                     <input type="text" name="name" />

                     <br>

                     <label>性别：</label>

                     <input type="radio" name="sex" value="0"/>女

                     <input type="radio" name="sex" value="1" checked />男

                     <br>

                     <label>爱好</label>

                     <input type="checkbox" name="favorite" value="music"  checked>音乐

                     <input type="checkbox" name="favorite" value="read" checked>阅读

                     <input type="checkbox" name="favorite" value="game">游戏

                     <input type="checkbox" name="favorite" value="film">电影

                     <input type="checkbox" name="favorite" value="sleep">睡觉

                     <br>

                     <input type="submit" value="提交" />

              </form>

 

 

4.9 普通按钮

<input type="button" value="校验">

(1)点击按钮，没有任何的反应。

(2)value属性：value对应的值就是按键上显示的文字。

4.10 图片按钮

<input type="image" src="login.jpg" alt="登录">

（1）作用和submit按钮是一样的。

（2）需要设置src属性的值，如果src对应的路径没有找到图片，（并且有没有设置alt属性，按钮显示默认值“提交”，如果设置了alt属性则显示alt的值，类似img标签 ）。

4.11 <button>标签

（1）内容可以是任意资源（eg:图片，段落，视频...）

（2）当button标签放置在form内部，作用和submit一样。

 

4.12 文件选择框

选择你的头像：<input type="file" accept="image/*">

选择你的头像：<input type="file" accept="image/jpeg">

简历：<input type="file" accept="application/pdf">

简历：<input type="file" accept=".doc">

accept属性指定可选择的文件类型。

上传文件需指定对应表单的属性

<form enctype="multipart/form-data">

 

4.13 下拉列表

使用下拉列表的好处：

（1）节省页面空间，使得页面更加简洁

（2）方便输入

（3）规范输入

<form action="result.html" method="get">
你来自：
<select name="province">
<option value="33">浙江</option>
<option value="41">河南</option>
<option value="32">江苏</option>
<option value="36">江西</option>
</select>
<input type="submit" value="提交">
</form>

<select>标签定义了一个下拉列表

<option>标签定义下拉列表的一个选项

<select>标签的name属性定义了提交的参数名

<option>标签的内容定义了该选项显示的文本，value属性定义了选中该选项时传递的参数值

比方选择“江苏”并提交

 

提交的参数如下

 

多选可通过设置multiple属性来实现，ctrl+单击选择多个

<select name="color" multiple>
<option value="red">红色</option>
<option value="blue">蓝色</option>
<option value="green">绿色</option>
<option value="yellow">黄色</option>
<option value="black">黑色</option>
</select>

 

 

传递的参数为

 

<select>标签的size属性定义了下拉列表框显示的选项个数，当小于实际选项个数时，会自动增加一个滚动条。

可以使用<optgroup>对选项进行分组

你打算购买小汽车的品牌：
<select>
<optgroup label="国产车">
<option value="红旗">红旗</option>
<option value="byd">比亚迪</option>
<option value="奇瑞">奇瑞</option>
</optgroup>
<optgroup label="德系车">
<option value="benz">奔驰</option>
<option value="bwm">宝马</option>
<option value="大众">大众</option>
</optgroup>
<optgroup label="日系车" disabled>
<option value="丰田">丰田</option>
<option value="本田">本田</option>
<option value="三菱">三菱</option>
</optgroup>
</select>

<optgroup>的label属性定义分组显示的文字，disabled设置该分组不能用。

4.14 textarea

textarea标签主要是为了方便用户输入较多文字信息，rows属性指定编辑区域的行数，cols属性指定编辑区域的列数。

学习经历：
<textarea rows="3" cols="20"></textarea>

 

4.15 隐藏域

当需要向服务器传递参数，且该参数无需用户输入，甚至都不想让用户看见，可以使用隐藏域来实现

<form action="result.html" method="get">
<input type="hidden" name="stuNo" value="2017110103" >
<br>
原密码：<input type="password" name="old">
<br>
新密码：<input type="password" name="new">
<br>
<input type="submit" value="修改密码">
</form>

4.16 表单总结

<form> ：收集数据并提交给服务器

action：指定提交的地址

 method：指定提交的方式get/post

<label>：显示静态的文字

<input>：接收数据输入

type=”text” 简单文本的输入

type=”password” 密码输入

type=”radio” 单选 checked 选中

type=”checkbox” 复选

type = “submit” 提交按钮，触发表单的action

type=”reset” 重置按钮，清空表单数据

type=”button” 普通按钮

type=”image” 图片按钮

type=”hidden” 隐藏域

<textarea> rows cols

<select>下拉列表

multiple: 支持多选

<option> 下拉列表项 selected选中

<optgroup> 列表项分组