使用HTML语言和CSS开发商业站点_表单

                                                                                                                     第3章 表单
本章简介：表单是实现用户与网页之间信息交互的基础，通过在网页中添加表单可以实现如会员注册，用户登录，提交资料等交互功能。

一.表单概述
    通俗地讲，表单就是一个将用户信息组织起来的容器。将需要用户填写的内容防止在表单容器中，当用户单击“提交”按钮的时候，表单会将数据统一发送给服务器。

   1.表单的内容

    创建表单后，就可以在表单中放置控件以接收用户的输入。这些控件通常放在<form>...</form>标签对之间，也可以在表单之外用来创建用户界面。
   2.表单标签及其表单属性

    action：此属性指示服务器上处理表单输出的程序。若为空，则默认提交到本页。
    method：此属性告诉浏览器如何将数据发送给服务器，它指定向服务器发送数据的方法。method=(get|post)
    post和get的区别：
        （1）post方法提交方式不会改变地址栏状态，表单数据不会被显示。
        （2）使用get方法提交方式，地址栏状态会发生变化，表单数据会在URL信息中显示。
   3.表单元素及其格式

    装载数据的控件就称为表单元素。
    向表单中添加表单元素要用<input>标签
    常用属性：
    type：指定表单元素的类型，默认为text。
    name：指定表单元素的名称。
    value：是可选属性，指定表单元素的初始值。
    size：指定表单元素的出事宽度。若为text或password类型，则表单元素的大小以字符为单位，否则以像素为单位。
    maxlength:指定可在text或password元素中输入的最大字符数。
    checked：指定按钮是否被选中，当输入类型为radio或checkbox时，使用此属性。
   （1）文本框：
    size属性用于指定文本框的长度，而maxlength属性用于指定文本框输入的数据长度。
   （2）密码框:
    密码框仅仅是周围的人看不见输入的符号，不能保证输入的数据安全。为了使数据安全，应该是加强人为管理，采用数据加密技术。
    (3)单选按钮：
    用于一组相互排斥的值，组中的每个单选按钮控件应具有相同的名称，用户一次只能选一个单选按钮。
   （4）复选框：
    一旦用户选中了某个复选框，在表单提交时，会将该复选框的name值和对应的value值一起提交。通常情况下，如果选项之间是并列关系，就需要设置为相同的名称，以便能
够同时获取，否则，每个选项都需要单独进行读取，从而降低了效率。
   （5）列表框：
    <select>标签用于显示可供用户选择的列表框，每个列表框由一个<option>标签表示，<select>标签必须至少包含一个<option>标签。
selected属性表示该选项在默认情况下是被选中的，而且一个列表框中只能有一个列表项默认被选中。默认selected为true。
   （6）按钮：
    HTML5中按钮分为三种：普通按钮（button），提交按钮（submit），重置按钮（reset）。
    name用来给按钮命名，value用来设置显示在按钮上的文字。
    普通按钮主要用来响应onclick事件：<input type="button" name="butButton" value="button按钮" οnclick="alert(this,value)"/>
当用户单击该按钮时，将会显示该按钮的value值。
    （图片按钮：<input type="image" src="image/login.gif/>虽然type属性没有设置为submit，但仍然具备提交功能。）
   （7）多行文本域:
    <textarea name="textarea" cols="显示的列数" rows="显示的行数">
    文本内容
    </textarea>
   (8)文件域：
    作用是用于实现文件的选择，在应用是只需把type属性设置为file即可，在实际应用中常用于文件上传的操作。
    <form action="" method="post" enctype="multipart/form-date">表示将表单数据分为多部分提交。
    文件域在不同的浏览器中显示效果不一样，但是功能是一样的。若想相同，需用CSS。
   （9）邮箱：
    email在提交表单时会自动验证email文本框的值。（@后没符号，@前无逗号...）
   (10)网址：
    网址前不能漏掉协议类型。（http：https：ftp：）
   （11）数字：
    number类型的input元素提供用于输入数字的文本框
    <input type="number" name="num" min="0" max="100" step="10"/>输入的数得是step（规定合法的数字间隔）值的倍数。
   （12）滑块：
    range类型的input元素提供用于输入包含一定范围内的数字值的文本框。
    <input type="range" name="range1" min="0" max="10" step="2"/>
    不支持的浏览器会显示普通的纯文本框，就当作text来处理。
   （13）搜索框：
    search类型提供的搜索框是任意页面的一个搜索框。

二.表单的高级应用
       1.设置表单的隐藏域
    <input type="hidden" value="666" name="userid"/>
       2.表单的只读与禁用设置
    readonly / disabled
    W3C HTML5标准中，规定对于布尔类型的属性，属性值可以省略。
       3.表单元素的标注
    目的是增强鼠标的可用性
    <label for="表单元素的id">标注的文本</label>
    <input type="radio" name="gender" id="male"/>
    对于表单元素而言，其name属性与id属性都是必须的。name属性由表单负责处理，而id属性是给<label>标签和表单元素进行关联使用的。

三.表单的初级验证
       1.为什么要进行表单验证
       （1）减轻服务器的压力
       （2）保证数据的可行性和安全性
       2.表单初级验证的方法
       （1）placeholder
    为input类型的文本框提供一种提示（hint），描述文本框期待用户输入何种内容。
       （2）required
    规定文本框填写内容不能为空，否则不允许用户提交表单。
       （3）pattern
    验证input类型文本框中用户输入的内容是否与自定义的正则表达式想匹配。