第三章 表单
表单
预习笔记
单词:
form:表格 ,方块
option:选择权
text:主题,版本
button:按钮;纽扣
submit:服从,顺从.提交
label:标签,符号
placeholder:占位符
required:必须的,必要的
一:
1:什么是表单:就是一个将用户信息组织起来的容器.
2:表单的属性:
1>action
2>method
3:基本的制作表单的特点:
(1)post方法提交的方式不会改变地址栏的状态,表单的数据不会显示;
(2)使用get方法提交方式,地址栏的状态会改变表单数据会在URL信息中显示.
比较 :
post 方法提交的数据安全性明显高于get的提交数据.
二:表单元素及其格式:
1:常用属性:
type:指的是表单元元素的类型
name:指的是单元元素的名称
value:次属性是可选属性,他制定的是表单元素的初始值
size:指定表单元素的初始宽度
maxlength:此属性用于指定在text或者password元素中输入的最大值,默认值无限大
checked:用于指定按钮是否被选中的
2:本文框:在表单中最常用的.最常见的表单输入元素;它用于输入单行文本消息
<form methoud ="post"action =""> <p> 名字 <input type ="test"value =""name ="fname"/> </p>
姓氏 <input name ="lname"value ="张"type ="text"/> </p> <p> 登录名 <input name ="sname" type ="password"size ="30"> </p> </form>
*****在本文框件中输入数据时,可以用maxlength属性指定输入的数据长度.
size和maxlength的区别:
size属性用于制定文本框的长度.二maxlength用于指定文本框的数据长度.
3:单选按钮:控制用于一组相互排斥的值.组中的每个单选按钮控件应具有相同的名称,用户一次只能选中一个单选按钮,只有从组中的单选按钮才会在提交的数据中提交相对应的值.在使用单选按钮时,需要一个显示的value属性;
4:复选框:允许用户选择多个.类型是checkbox.即单元素的type属性设为checkbox就可以创建.命名与单选按钮有区别,既可以多个复选框选用相同的名称,也可以有不同的名称;一旦选用,在表单提交时.复选框的name和相对应的value一起提交;
5:列表框:通过<select>(用于显示可供用户选择的,必须包含至少一个<option>)标签和<option>
语法:
<select name ="指定的列表名称"size ="行数"> <option value ="可选项的值"selectsd ="selectsd">....</option> <option value ="可选项的值">....</option> </select>
6:按钮:
语法:
<input type ="reset"name ="Reset" value ="重填"/>
按钮区别:
reset:用户点击该按钮后,无论表单中是否已填写或输入数据,表单中的各个表单元中的元素都会被重置到最初的状态,而填写或输入的数据消失;
submit:用户点击后,表单会提交到action属性所指定的URL,并传递表单;
button:需要与事件关联是用
7:多行文本域:
语法:
<textarea name ="textarea" cols ="显示的列数" rows ="显示的行数"> 文本内容 </textarea>
****不能用value属性来赋初始值,
8:文件域:用于实现文件的选择,在应用时只需要把type属性设置为file即可
9:邮箱:email类型的input的一种元素专门用于输入Email地址的文本框,与上面的表单元素不同的是email在提交表单的时候会自动验证emile文本框的值.如果不是一个有效的地址,则不允许提交;
<form action =""emthod ="post"> <p> 邮箱 <input type ="email" name ="email "/> </p> <input type ="submit"/> </from>
10:网址:url类型的元素提供用于输入URL地址的这类特殊的文本的文本框.提交时如果输入的不是UBL地址格式的文本,不允许提交表单;
11:数字:number类型的input元素提供用于输入的数字的文本框.可以对接所有的数字进行限制,包括规定的允许的最大指和最小值.合法的数字间隔或者默认值等.如果输入的数字不再限定的范围之内,则会提示错误;
12:滑块:range类型的input元素提供用于输入包含一定的范围内的数字的文本框,在网页中显示为滑动条,还可以对接受的数字进行受限,包括规定的允许最大值和最小值,合法的数字间隔或者默认值等.如果输入的数字不再限定的范围之内,则会提示错误;
13:搜索框:search类型的input元素提供用于输入搜索关键字的文本框,和search类型和input类型的text类型差不多.实现并不容易,search类型的提供的搜索框不只是Google或者百度的搜索框,而是任意的一个页面的搜索框.
小总结
input元素中的email类型.url类型.number类型的都有自动的验证输入的是否合法的功能;
三 :
1:设置表单的隐藏性:将type属性设置为hidden隐藏类型即可.可创建一个隐藏域'
2":表单的只读和禁用:
1>只读场景:网站服务器方不希望用户修改的数据,这些数据在氮元素中显示;
2:禁用场景:只有满足某个条件时,不能选用某个功能;
规范:W3CHTML5标准中 ,规定对于布尔类型的属性,属性值可以省略;
3:表单元素的标注:增强鼠标的可用性:需要用<lable>标签:
语法:
<lable for ="表单元素的id">标注的文本</lable>
4:表单验证的好处:
1>减轻胡武器的压力
2>保证数据的可行性和安全性;
5:表单初级的验证方法:
1>placeholder:用于input的文本框的提供的一种提示,提供可以描述文本框期待的用户输入的各种内容;再输入为空时显示,挡在文本框中写入内容显示的时候.
placeholder适合用于input的标签;text.search.url .email.password.
2>required:英语规范文本框的填写内容时不能为空,
required实用的标签:text.search.url.email.password.number.radio.file.checkbox
3>pattern:用于验证码input类型的文本框中的用户输入的内容是否与自定义的表达式相配,输入的是符合表达式的内容,正确的表达式是javascript中的内容;
总结
1:表单主要来制作网页动态.方便和用户进行交互;
2:常用的表单元素有:文本框(<text>),密码框(<password>).单选按钮(<radio>).复选框(<checkbox>),列表框(<select>)和(<option>);按钮(<button>.<submit>和<reset>>).多行文本框(<ctextarae>).邮箱(<email>).网址(<url>)数字(<number>)滑块(<range>) 搜索(<search>)
3:使用<label>标签的for属性结合表单元素的id属性可以控制单击该标签的时候时,对应得表单元素自动获得焦点或者被选中
4:表单元的只读属性和禁用属性分别用readonly和disable来表示
5:语义化的结构的页面更加合理,代码更加清晰,同时也符合W3C的Web的开发标准
6:表单初级的验证的属性为:
1>placeholder
2>required
3>pattrrn
