《Web前端技术H5+CSS3》笔记--第三章 表单[云图智联]

1.1 表单概述

1.1.1 表单在网页中的应用

表单在网页中应用比较广泛，如申请电子邮件，用户需要首先填写注册信息，然后才能提交申请。又如希望登录邮箱收发电子邮件，也必须在登陆页面中输入用户名、密码才能进入邮箱，这就是典型的表单应用。
通俗的讲，表单就是一个将用户信息组织起来的容器。将需要用户填写的内容放置在表单容器中，当用户单击“提交”按钮时，表单会将数据统一发送给服务器。
表单的应用比较常见，典型的应用场景如下：
    1.登录，注册：登录时填写用户名，密码，注册信息时填写用户名电话等个人信息;
    2.网上订单：在网上购买商品，一般要求填写姓名，联系方式，付款方式等信息;
    3.调查问卷：回答对某些问题的看法，以便形成统计数据，方便分析;
    4.网上搜索：输入关键字，搜索想要的可用信息。
为了方便用户操作，表单提供了多种表单，除了最常见的单行文本框之外还有密码框，复选框，提交按钮。

1.1.2 表单语法

创建表单后，就可以在表单中放置控件。这些控件通常放在form标签对之间，也可以在表单之外用来创建用户界面。在网上冲浪时，经常会见到一些常用的表单控件。例如，让用户输入姓名的文本框，让用户输入密码的密码框，让用户选择性别的单选按钮，以及让用户提交信息的提交按钮等。 不同的表单控件有不同的用途。如果要求用户输入的仅仅是一些文字信息，如“姓名”“备注”“留言”等，一般使用单行文本框或多行文本框；如果要求用户在指定的范围内做出选择，一般使用单选按钮、复选框和下拉列表框；如果要把填写好的表单信息提交给服务器，一般使用“提交”按钮。
在HTML5中，使用form标签来实现表单的创建，该标签用于在网页中创建表单区域，属于容器标签，其他表单标签需要在它的范围内才有效，input便是其中一个，用以设定个中输入资料的方法。form标签有两个属性：
action 此属性指示服务器上处理表单输出的程序。一般来说，当用户单击表单上的“提交”按钮后，信息发送到web服务器上，由action属性所指定的程序处理。语法为action="URL"。如果action属性的值为空，则默认表单提交到本页。
method 此属性告诉浏览器如何将数据发送给服务器，它指定向服务器发送数据的方法。语法为method=(get|post)。
autocomplete 此属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。autocomplete 属性有可能在 form元素中是开启的，而在input元素中是关闭的。autocomplete 适用于

标签，以及以下类型的 input 标签：text, search, url, telephone, email, password, datepickers, range 以及 color。
novalidate 此属性规定在提交表单时不应该验证 form 或 input 域。

 

示例

    
    




    
    
名字：
        
    

    
密码：
        
    
    

        
        
    

若把method="post"改为method="get"就变成了使用get方法将表单提交给"result.html"页面处理。这两种方法都是将表单数据提交给服务器上指定的程序进行处理，那么它们有什么区别呢？
    1、post方法提交方式不会改变地址栏状态，表单数据不会被显示。
    2、使用get方法提交方式，地址栏状态会发生变化，表单数据会在URL信息中显示。
    基于以上两点区别，post方法提交的数据安全性明显高于get方法提交的数据。在日常开发中建议大家尽可能地采用post方法来提交表单数据。

1.1.3 表单元素及其格式

实现用户注册时，需要输入很多注册信息，而装在这些数据的控件，就成为表单元素。表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。有了这些表单元素，表单才会有意义。那么如何在表单中添加表单元素呢？其实添加方法很简单，就是使用input标签。

而输入类型是由类型属性（type）定义的。input标签中有很多属性，下面对一些比较常用的属性进行整理：

表单属性：

表单元素：

input输入类型

text元素

在表单中最常见的表单输入元素就是文本框（text），它用于输入单行文本信息，如用户名的输入文本框。若要在文档的表单里创建一个文本框，将表单元素type类型设置为text类型就可以了。

示例

    

        名字：
        
    

---

password元素

在一些特殊情况下，用户希望输入的数据被处理，以免被他人得到，如密码。这时候使用文本框就无法满足需求，需要使用密码框来完成。
密码框与文本框类似，区别于需要设置文本框控件的type属性为password。设置了type属性后，在密码框输入的字符全都以黑色实心的原点表示。

示例

  
密码：
        
  

---

radio元素

单选按钮控件用于一组互相排斥的值，组中的每个单选按钮空间具有相同的名称，用户一个只能选中一个单选按钮。只有从组中选中的单选按钮才会在提交的数据中提交对应的数值，在使用单选按钮时，需要一个显示的value属性。

示例

    性别：
    男
    女

---

checkbox元素

复选框与单选按钮有些类似，只不过复选框允许用户选择多个选项。复选框的类型是checkbox。即将表单元素的type属性设置为checkbox就可以创建一个复选框了。复选框的命名与单选按钮有些区别，既可以多个复选框用相同的名称，也可以各自具有不同的名称，关键是看如何使用复选框，用户可以选中某个复选框，也可以取消复选框。一旦用户选中了某个复选框，在表单提交时，会将该复选框的name值对应的value值一起提交。

示例

    兴趣爱好：
    跑步
     学习
     打游戏

---

select元素

列表框的目的主要是使用户快速、方便、正确地选择一些选项，并且节省页面空间。它是通过select标签和option标签来实现的。select标签用于显示可供用户选择的列表框，每个选项由一个option标签表示，select标签必须至少包含一个option标签。

语法：

    .....
    ......

其中，在有多条选项可供用户滚动查看时，size属性确定列表中同时看到的行数；selected属性表示该选项在默认情况下是被选中的，而且一个列表框中只能有一个列表项默认被选中，如同单选按钮组那样。

示例

出生日期:
 年

    [选择月份]
    一月
    二月
    三月
    四月
    五月
    六月
    七月
    八月
    九月
    十月
    十一月
    十二月
 月
 日

---

按钮元素

按钮在表单中经常用到，在html5中按钮分为三种，分别是普通按钮，提交按钮，重置按钮。普通按钮主要用来响应onclick事件，提交按钮用来提交表单信息，重置按钮用来清除表单中已填项。

示例

用户名：

密码：


    
    
    
    

---

textarea元素

当需要在页面中输入两行或两行以上的文本使用textarea

语法：

文本内容

其中cols属性用来指定多行文本框的列的宽度，rows属性用来指定多行文本的行数。在textarea标签对中不能使用value属性来赋初始值。

示例

    表单在网页中应用比较广泛，如申请电子邮件，用户需要首先填写注册信息，然后才能提交申请。又如希望登录邮箱收发电子邮件，也必须在登陆页面中输入用户名、密码才能进入邮箱，这就是典型的表单应用。

---

file元素

文件域的作用是用于实现文件的选择，在应用时只需把type属性设置为file即可。在实际应用中，文本域通常应用于上传操作，如选择需要上传的文本，图片等。

示例

---

email元素

email类型是Input元素是一种专门用于输入Email地址的文本框，与上面表单元素不同的是email在提交表单时会自动验证email文本框的值。如果不是一个有效的邮箱地址，则该输入不允许提交表单。

示例

    邮箱：
    

---

url元素

url类型的input元素提供用于输入URL地址这类特殊文本的文本框。当提交表单时，如果输入的内容不是URL地址格式的文本，将不允许提交表单

示例

    请输入你的网址：
    

---

number元素

number类型的input元素提供用于输入数字的文本框。我们还可以对所接受的数字进行限制，包括规定允许的最大值和最小值，合法的数字间隔或默认值等。如果锁输入的数字不再规定的范围之内，则会出现错误提示。

示例

    请输入数字：
    

number类型的属性：

---

range元素

range类型是Input元素提供用于输入包含一定范围内的数字值的文本框，在网页中显示为滑动条，我们还可以对所结构的数字进行限制，包括规定允许的最大值和最小值，合法的数字间隔或默认值等。如果输入的数字不再先定的范围之内，则会出现错误提示。

示例

    请输入数字：
    

---

search元素

search类型是input元素提供与输入搜索关键词的文本框。虽然从外观看起来,search类型和input的普通text类型差不多，但实现起来并不那么容易。search类型提供的搜索框不只是Google或百度的搜索框，而是任意页面的一个搜索框。

示例

    请输入搜索的关键词：
    
    

---

date元素

HTML5 拥有多个可供选取日期和时间的新输入类型：
date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间（小时和分钟）
datetime - 选取时间、日、月、年（UTC 时间）
datetime-local - 选取时间、日、月、年（本地时间）

示例

日月年：
年月： 
年周： 
时间： 
UTC： 
本地： 

---

tel元素

用于应该包含电话号码的输入字段

示例

    电话:
    

---

color元素

用于应该包含颜色的输入字段

示例

    颜色:
    

---

form元素

datalist元素

datalist 元素为 input 元素规定预定义选项列表。
用户会在他们输入数据时看到预定义选项的下拉列表。
input 元素的 list 属性必须引用 datalist 元素的 id 属性。

示例

    邮箱：
    地址：
    

---

keygen 元素

keygen 元素的作用是提供一种验证用户的可靠方法。
keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。
私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。

示例

    Username: 
    Encryption: 
    

---

output 元素

output 元素用于不同类型的输出，比如计算或脚本输出

示例

 
    
 

    

        结果：

    

2.1 表单的高级应用

2.1.1 设置表单的隐藏域

网站服务器端发送到客户端的信息，除了用户直观看到的页面内容外，可能还有包含一些“隐藏”信息。例如，用户登录后的用户名，用于区别不同用户的用户id等。这些信息可能对用户没有用，但对于网站服务器有用，所以一般“隐藏”起来，不再页面中显示，将type属性设置为hidden隐藏类型即可创建以个隐藏域。例如，在登录页中使用隐藏域保存用户userid信息。

示例

    
用户名：
    
密码：
    
 
    

2.1.2 设置表单的只读与禁用

在某些情况下，需要对表单元素进行限制，即设置表单元素的只读或禁用。它们常见的应用场景如下：
    1.只读场景：网站服务器方不希望用户修改的数据，这些数据在表单元素中显示。例如，注册或交易协议，商品价格等
    2.场景：只有满足某个条件后，才能选用某项功能。例如，只有用户同意注册协议后才允许单击“注册”按钮；播放器控件在播放状态时，不能再单击“播放”按钮

只读和禁用效果分别通过readonly属性和disabled属性来实现。例如，要实现对文本框只读，对按钮的禁用效果。

示例

    
用户名：
    
密码：
    

注意：在W3CHTML5标准中，规定对于布尔类型的属性，属性值可以省略
例如：下拉列表框的默认选中，应写为selected，而不是selected="selected"。默认写了selected属性，它的值为true，同理，复选框中默认选中，应写为checked，只读应写为readonly，禁用应写为disabled

2.1.3 表单的标注

对表单元素进行标注，这样做的目的是增强鼠标的可用性。这是因为使用表单元素标注时，在客户端呈现的效果不会有任何特殊的改进。当用户使用鼠标单击标注的文本内容时，浏览器会自动将交单转移到与该属性标注相关的表单元素上。

标注的文本

在标签中，使用了for属性来指定当鼠标单击标注文本时，焦点对应的表单元素

示例

    请选择性别：
    男
    
    女
    

3.1 表单的初级验证

3.1.1 为什么进行表单验证

如果用户填写的表单内容不进行验证就发给服务器，那么服务器发现填写的不合法，或是没有填写，就会返回相应的结果给用户，用户重新填写再提交，如此多次持续直到用户输入正确为止。它们之间的通信是通过网络进行的，如果网络很差，那么注册一个帐号就得花好长时间，对用户来说是非常麻烦的，对服务器来说也增加了其工作压力。
要是有恶意的用户向服务器发送病毒或是用有害于服务器安全的程序就更危险了。
所以表单验证的优点如下：
    1.减轻服务器的压力
    2.保证输入的可行性和安全性

3.1.2 表单初级验证的方法

1、placeholder

属性用于为Input类型的文本框提供一种提示（hint）这种提示可以描述文本期待用户输入的内容。

示例

    

        请输入搜索的关键词：
        
        
    

2、required

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

示例

    

        用户名：
        
        
    

3、pattern

pattern属性用于验证input类型文本框中用户输入的内容是否自定义的正则表达式相匹配。用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单。

示例

    

        电话号码：
           *以13、15、18开头的11位数字 

        
    

4.1 总结

1.表单主要用来制作动态网页，方便和用户交互。例如，会员注册，购物订单，调查问卷，搜索等页面都会用到表单
2.常用的表单元素有文本框（text）、密码框（password）、单选按钮（radio）复选框（checkbox）列表框（select和option）按钮（button、submit和reset）多行文本框（textarea）邮箱（email）、网址（url）数字（number）、滑块（range）搜索（search）
3.使用标签的for属性结合表单元素的id属性可以控制单击该标签时，对应的表单元素自动获得焦点或者被选中
4.表单元素的只读属性和警用属性分别用readonly和disabled来表示
5.语义化的结构使得页面更加合理，代码更加简洁，同时也符合W3C的web开发标准
6.表单初级验证的属性为placeholder、required、pattern

(想要了解更多的职场,职业规划方面的经验,文章第一时间发布于云图智联官网)