《表单》
一、表单简介
1.表单其实就像生活在办事时候填写的表格
2.表单的目的就是用于收集用户信息
3.有了表单,方便用户填写,便于后期的数据整理和分类
4.表单时一个将用户信息组织起来的容器
5.表单在网页中用form标签表示
6.它本身没有任何外观显示,表示的是一个范围
7.表单由众多的表单元素组成
8.为了采集用户的不同类型的信息,表单元素也是各种各样
9.表单只是一个集合,重要的是如何用各种表单元素来组织表单
10.表单属性action指示服务器上处理表单输出的程序。语法为action=“URL”。
11.表单属性method指向服务器发送数据的方法。
语法为method=(get | post)。
12.post方法提交方式不会改变地址栏状态,表单数据不会显示。
13.get方法会改变地址状态,表单数据会在URL信息中显示。
二、表单元素
1.元素:
2.input元素的常用属性
3.type表示表单元素的类型。
可用类型有:text、password、checkbox、radio、submit、reset、file、email、number、url、hidden、image和button。默认为text。
input元素中email类型、url类型、number类型均有自动验证输入是否合法的功能。
4.name表示表单元素的名称
5.value表示表单元素的初始值
6.size表示表单元素的初始宽度,也就是文本框的长度
7.maxlength表示可在text或password元素中输入的最大字符数,也就是可输入的数据长度。
8.checked表示按钮是否被选择。
三、文本框
1.大部分表单元素都是由input标签编写,表示接受用户输入
2.文本框的基本语法:
<input type="text"/>
3.input表示输入,输入框,文本框
4.label表示标签,比如可以将“密码”这两个字放在在中间
5.type=text表示一个文本框,type的值很多,默认为text
6.name用于给表单元素命名,每一个表单元素都有此通用属性
7.value用于给文本框设置默认值
8.size用于设置文本框的宽度,大致以字符数为单位,表示能够显示多少个字符
9.maxlength表示最大字符数
10.readonly表示只读
11.checked表示按钮是否被选中
12.disabled表示禁用,通常用于按钮
四、密码框
1.type=password表示的是密码框,其他用法和普通文本框一致
五、单选按钮
1.单选按钮用于一组相互排斥的值,组中每个单选按钮应具有相同的名称
2.单选按钮的语法:
<input type="radio"/>
3.单选按钮后面通常会跟一个label标签对其进行说明
4.单选按钮是以组为单位使用,即每次至少两个一组
5.name属性用于命名,value用于设置值,value这个值用户看不见,给程序员读取信息用
6.名字相同的单选按钮表示同一组,才有互斥的效果
7.checked属性用于设置默认选中项,是一个boolean类型属性
举例:
<label>性别:</label>
<input name="n1"type="radio">男
<input name="n1"type="radio">女
六、复选框:
<input type="checkbox"/>
1.可以有多个,表示多选,通常同一组name相同
2.也可以单个使用,例如:是否同意本站协议
3.checked表示勾选,选择的意思
4.复选框组案例:兴趣爱好
举例:
<label>爱好:</label>
<input name="n2" type="checkbox">游泳
<input name="n2" type="checkbox">读书
<input name="n2" type="checkbox">打篮球
七、下拉框(列表框)
1.下拉框也叫列表框,用于给用户在有限范围内快速选择
2.下拉框很特殊,是由两个标签组合使用的:
<select size="10" multiple>
<option>请选择</option>
<option selected>广州</option>
<option>深圳</option>
<option>上海</option>
</select>
3.下拉框的selected用于设置默认选中项
4.size属性用于将下拉框的外观设置为列表框
5.multiple属性用于设置是否允许多选
八、按钮
1.按钮在页面上是可以点击的
2.按钮的语法是:
<input type="button" value="登录"/>
3.按钮的分类:
a、type设置为button,表示显示为一个普通按钮,需要与事件关联使用
b、type设置为submit,表示是一个提交按钮
c、type设置为reset,表示是一个重置按钮
d、type设置为image,表示是一个图片按钮,src用来写它的路径
4.value设置的是按钮显示的文本,name用来给按钮命名
5.目前没有学习更高级的编程功能,所以普通按钮也只能是一个摆设
6.disabled是一个boolean属性,用于禁用按钮
7.提交按钮submit:
a.提交按钮可以用于提交表单
b.提交按钮必须放置在表单标签form内
c.form标签的action属性用于设置提交的路径
d.提交按钮一旦提交,则会跳转到action所指向的页面
e.如果没有设置表单的action,则默认提交给本页面,即刷新效果
f.页面一旦刷新,则表单内填写的值则清空重来了
8.表单的method用于设置提交方式:
a.post 推荐使用
b.get
9.重置按钮reset:用于将表单内元素的状态恢复为初始状态,类似于恢复出厂设置
10.完成登录提交成功案例
九、其他表单元素
1、多行文本域:
<textarea>
a.语法:
<textarea name="textarea" cols="显示的列数" rows="显示的行数">文本内容</textarea>
2.cols属性表示多行文本框的列数,rows属性表示多行文本框的行数
4.隐藏域
a、type=hidden
b、在页面不可见
c、用于隐藏值,便于提交到后台给程序员使用
d、此信息对于用户没有用处,但是对于网站服务器有用
5、文件域
a.type=file
b.用于给用户选择文件,例如图片
c.选择图片后不能预览,需要额外写代码才能做到
d.不同浏览器的文件域的外观不一样,暂时不要纠结,样式可用CSS进行修改。
e.enctype编码属性为multipart/form-data,表示将表单数据分为多部分提交。
因为提交的表单数据包括普通的表单数据、文件数据等内容,所以必须如此设置。
6.表单元素的标注
a、给表单元素添加id属性
b、通过label元素的for属性和表单元素绑定
c、在点击label元素的时候,能够激活表单元素,使它获得焦点
举例:
<label>性别:</label>
<input id="n3"name="s3"type="radio" checked/ >
<label for="n3">男</label>
<input id="n4"name="s3"type="radio" checked/ >
<label for="n4">女</label>
十、HTML5新增的表单元素
1、email类型
a.type设置为email,不同的是email在提交表单时会自动验证email文本框的值,
如果不是一个有效的邮箱地址,则不允许提交表单。
b.语法:
<input type="email"name="email">
2、url网址类型,要求以http://开头
a.type设置为url,不同的是当提交表单时,如果输入的内容不是URL地址格式的文本,则不允许提交表单。
b.语法:
<form action="" method="post">
<p>请输入网址:
<input type="url" name="userUrl">
</p>
<input type="submit"/>
</form>
3.number数字类型
a.type设置为number
b.还可对接收的数字进行限制,包括规定允许的最大值和最小值、合法的数字间隔或默认值等。
如果输入的数字不再限定的范围之内,则会出现错误提示。
c.无法输入数字以外的其他符号,点号除外
c.语法:
<form action=""method="post">
<p>请输入数字:
<input type="number" name="num" min="允许的最小值" max="允许的最大值" step="数字间隔"/>
</p>
<input type="submit">
</form>
d.number类型的属性
属性 值 描述
value number 规定的默认值
min number 规定允许的最小值
max number 规定允许的最大值
step number 规定合法的数字间隔(如果step="2",则合法的数是0、2、4等)
4、range滑块(滑动条)
a.type设置为range,其他的与上面类似
b、用于在指定范围内选取值
c、属性和number一样的:value、max、step
d、fange看不到当前值是多少,主要是让用户自己提供大致范围调整
5、search搜索框
a.type设置为search,其他与上面类似
b、不同之处在于当有内容输入以后,末尾会出现一个叉号,用于清空内容
十一、HTML5自带的表单验证
1.为什么需要表单验证
a、验证用户的输入是否合法
b、防止用户误操作
c、改善用户体验
d、减轻服务器的负担
2.表单验证的注意事项:
a、可以使用placeholder给出填写相关的提示信息
b、required属性用于要求此元素必须填写
c、pattern用于自定义验证规则,内容为正则表达式,例如邮政编码:\d(6)
d、点击提交按钮,提交表单的时候会触发表单验证
e、如果验证不通过,会给出提示,且不会提交表单,否则提交表单