第三章：表单

一.表单

 　　表单就是一个将用户信息组织起来的容器：

  　　　　<将需要用户填写的内容放置在表单容器中，当用户单击"提交"按钮的时候，表单会将数据统一发送给服务器>

 　　1.表单的内容:

  　　　　1）创建表单后，就可以在表单中放置控件以接受用户的输入

  　　　　2）这些控件通常放在<form></form>标签之间，也可以在表单之外用来创建用户界面

  　　　　3）不同的表单控件有不同的用途

　　 2.表单标签及表单属性

  　　　　表单的创建：<from>...</from>该标签用于在网页中创建表单区域，属于容器标签，其他表单标签需要在它的范围内才有效，<input>标签用以设定各种输入资料的方法

  　　<from>标签的属性：

   　　　　action：此属性指示服务器上处理表单输出的程序，一般来说，当用户单击表单上的"提交"按钮后信息发送到Web服务器上，由attion属性所指的程序处理如果action为空则默认提交到本页

　　　　method:此属性告诉浏览器，如何将数据发送给服务器，他指向服务器发送数据的方法。

 

语法为:method=（getpost）

<form method="post" action=""></form>

　　

 

　　post和get的区别

　　　　post的方法不不会改变地址栏的状态，表单数据不会被显示

　　　　使用get方法提交方式，地址栏发生改变，表单数据不会被显示

　　基于以上两点：post方法提交的数据安全性明显高于get方法提交的数据。在日常开发中建议大家尽可能地采用post的方法来提交表单数据,

　　<input>元素常用属性

 　　　　　text password checkbox radio submit reset file email number url hidden image和button默认为text

 　　　　name

 　　　　　　此元素指定表单元素名称。例如如果表单上有几个文本框，可以按名称来标识它

　　　　value

 　　　　　　此属性是可选属性他指定元素初始值，如果type为radio类型则必须指定一个值

　　　　size

 　　　　　　此属性指定表单元素的初始宽度

 　　　　　　如果type为text或passWord类型则表单元素大小以字符为单位对于其他输入类型，宽度以像素为单位

　　　　maxlenght

 　　　　　　此属性指定可在text 或 password元素中输入最大字符数，默认值无限大

　　　　checked

 　　　　　　此属性用于指定按钮是否被选中。当输入类型为radio或CheckBox使用此属性

 

文本框

　　用于输入单行文本信息将表单元素type设为text就可以了

 

<p>

<input type=" text"/>

</p>

　　

 

 

密码框

　　设置了type属性后在密码框输入的字符全都是以黑色实心的来显示，从而实现对数据的处理

 

<input type="password"/>

　　

 

 

单选按钮

　　用户只能选中一个单选按钮在使用单选按钮时，需要一个显示的value属性

　　如果需要一个默认的选项即可以，使用checked 属性

 

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

<input name="a" type="radio"value="女"/>女

 

 

 

复选框

　　复选框和单选框类似，复选框允许拥有多个选型

 

<input name="a" type="CheckBox"value="男" checked/>男

<input name="a" type=CheckBox"value="女"/>女

 

 

 

列表框

　　列表框目的主要是使用户快速方便的选择一些选项而且节省空间

 

<select>

<option value="1">1<option/>

<option value="2" selected>2<option/>

<option value="3">3<option/>

</select>月

　　　　

 

 

按钮

　　按钮分为三个（button）普通按钮（submit）提交按钮（reset）重置按钮

　　name表示给按钮命名value 显示按钮上的字

 

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

<input name="a" type="submit"value="女"/>女 提交按钮

<input name="a" type="reset"value="女"/>女 重置按钮

 

 

 

使用图片按钮

 

<input name="a" type="image"src ="地址"/>提交

 

 

 

多行文本域

　　语法

　　

 

<textarea name="textarea"cols="显示列数"row="显示行数"

 

 

 

文件域

　　文件域的作用用于实现文件选择将type设置为file

 

<input type="file"name=“type”/>

<input type="submit"anme="upload"value="上传"/>

 

 

 

邮箱

　　与以上的表单元素不同的是email在提交表单是在自动验证如果不是一个有效的邮箱地址则用户不允许提交订单

 

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

 

 

 

url

　　用于输入URL地址这类的特殊文本的文本框提交表单时如果输入不是uil地址格式的文本，将不允许提交表单

 

<input type="url" name="22"></input>

 

 

 

数字

　　number

　　用于提供数字的文本框我们可以对数字进行控制包括最大值，最小值合法的间隔或默认，如果所输入的数字不在限定的范围之内，

　　则会出现错误提示。

 

<input type="number"name="num"min="0" max="100"step="10"/>

 

 

属性 值 描述

value number 规定的默认值

min number 规定允许的最小值

max number 规定允许的最大值

step number 规定合法数字间隔（如step="2",则合法数是-2 0、2、4等）

滑块

用于提供数字的文本框我们可以对数字进行控制包括最大值，最小值合法的间隔或默认，如果所输入的数字不在限定的范围之内，

则会出现错误提示。

 

<input type="range"name="num"min="0" max="100"step="10"/>

 

 

搜索框

　　search用于提供输入搜索关键字的文本框虽然外观看起来和input差不多但实现起来却不容易因为search搜索不只是谷歌和百度是任意一个搜索框

 

<input type="search" name="1"/>

<input type="submit" name="2"/>

 

 

表单的隐藏域

　　将type属性设置为hidden隐藏类型即可创建一个隐藏域

 

<input type="hidden" value="666"name=""username/>

　　

 

表单的只读与禁用

　　只读场景

　　　　　　网站服务器方不希望用户修改数据，这些数据在表单元素中显示。如注册或交易协议

　　禁用场景

　　　　　　只有满足某个条件后才能选用某项功能。如只用用户同意了才能点击注册按钮。

 

<input type="text"value="张三"readonly/>只读

<input type="text"value="张三"disabled/>禁用

 

 

 

规范

　　对于布尔类型的属性，属性值可以省略

 

表单元素的标注

　　使用foe属性来指定当鼠标点击脚本时，焦点对应的表单元素

　　语法

 

<lable for="male>表单元素的id">标注的文本<lable>

<input type="text" name="1"id="male"/>

 

 

 

表单的验证

　　验证表单的好处

　　　　　　　　1 减轻服务器的压力

　　　　　　　　2保证数据的可行性和安全性

　　　　在客户端对表单进行验证是非常有必要的

 

表单的初级验证

　　1 placeholder

　　　　用于input的文本框的一种提示（hint）可以描述文本框期待用户输入任何内容

 

<input type="search" name="1"placeholder="要输入的关键字"/>

　　　　

 

 

　　2 required

　　　　属性用于规定文本框填写内容不能为空，否则不允许用户提交表单

 

<input type="text" required/>

 

 

 

　　3 pattern

　　　　用于验证input类型文本框用户输入内容与自定义的正表达式相匹配

 

分类: HTML