表单

认识表单

1.表单的构成

在网页中，一个完整的表单通常由表单控件（也称表单元素）、提示信息和表单域3个部分构成。具体解释如下：

  • 表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮等。
  • 提示信息：一个表单通常带有说明性文字，提示用户进行填写和操作。
  • 表单域：相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过它定义、处理表单数据所用程序的URL地址及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法显示到后台服务器。

2.创建表单

在HTML5中，

标记被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递。
中的所有内容都会被提交给服务器。创建表单语法格式如下:

<form action="URL地址" method="提交方式" name="表单名称">  
          
              各种表单控件

form>

表单控件是由用户定义的。

下面通过一个案例来演示表单的控件：

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>创建表单title>
    head>
    <body>
        <form action="http://www.mysite.cn/index.asp" method="POST">
            
            账号：  
            <input type="text" name="zhanghao"/>  
            密码：  
            <input type="password" name="mima"/>  
            <input type="submit" value="提交"/>  
        form>
    body>
html>

运行效果如图所示：

表单的属性

1.action属性

在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的URL地址。例如：

<form action=“form_action.asp”>

上面的代码表示，当提交表单时，表单数据会传送到名为“form_action.asp”的页面去处理。

action的属性值可以是相对路径或绝对路径，还可以为接收数据的E-mail邮箱地址。例如：

<form action=mailto:htmlcss@163.com>

上面的代码表示，当提交表单时，表单数据会以电子邮件的形式传递出去。

2.method属性

method属性用于设置表单数据的提交方式，其取值为get或post。在HTML5中，可以通过

标记的method属性指明表单处理服务器的方法，示例代码如下：

<form action=“form_action.asp” method=“get”>

在上面的代码中，get为method属性的默认值，采用get方法，浏览器会与表单处理服务器建立连接，然后直接在一个传输步骤中发送所有的表单数据。

采用get方法提交的数据将显示在浏览器的地址栏中，保密性差，且有数据量的限制；而post方式的保密性好，并且无数据量的限制，所以使用method=“post”可以大量地提交数据。

3.name属性

name属性用于指定表单的名称，以区分同一个页面中的多个表单。

4.autocomplete属性

autocomplete属性用于指定表单是否有自动完成功能。所谓“自动完成”是指将表单控件输入的内容记录下来，当再次输入时，会将输入的历史记录显示在一个下拉列表里，以实现自动完成输入的功能。

autocomplete属性有2个值，对它们的解释如下：

  • on：表单有自动完成功能。
  • off：表单无自动完成功能。

下面为页面中的标记指定autocomplete属性，并将该属性的值指定为on：

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>autocomplete属性的使用title>
    head>
    <body>
        <form id="formBox" autocomplete="on">
            用户名：<input type="text" id="autofirst" name="autofirst"/><br /><br />
            昵    称:<input type="text" id="autosecond" name="autosecond"/><br /><br />
            <input type="submit" value="提交"/>
        form>
    body>
html>

运行效果如图所示：

5.novalidate属性

novalidate属性指定在提交表单时取消对表单进行有效的检查。为表单设置该属性的值为“true”时，可以关闭整个表单的验证，即使标记内的所有表单控件不被验证。

下面通过一个案例来演示novalidate属性的用法：

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>novalidate属性的使用title>
    head>
    <body>
        <form action="form_action.asp" method="GET" novalidate="true">
            请输入电子邮件:<input type="email" name="user_email"/>
            <input type="submit" value="提交"/>
        form>
    body>
html>

运行效果如图所示：

input元素及属性

1.input属性的type属性

在HTML5中，input元素拥有多个type属性值，用于定义不同的控件类型。下面对不同的input控件进行讲解：

（1）单行文本输入框

 单行文本输入框常用来输入简短的信息，如用户名、账号、证件号码等，常用的属性有name、value、maxlength。

（2）密码输入框

其内容默认以圆点的形式进行显示。

（3）单选按钮

用于单项选择，如选择性别、是否操作等。在定义单选按钮时，必须为同一组中的选项指定相同的name值，这样“单选”才会生效。此外，可对单选按钮应用checked属性，指定默认选中项。

（4）复选框

用于多项选择。可对多选按钮应用checked属性，指定默认选中项。

（5）普通按钮

常常配合JavaScript脚本语言使用。

（6）提交按钮

表单中的核心控件，对其应用value可更改按钮上的默认文本。

（7）重置按钮

当用户信息输入错误时，可单击重置按钮取消已输入的所有表单信息。

（8）图片形式的按钮

必须为其定义src属性指定的URL地址。

（9）隐藏域

用户不可见，后台的程序。

（10）文件域

当定义文件域时，页面中将出现一个文本框和一个“浏览”按钮，用户可以通过填写文件路径或直接选择文件的方式，将文件提交给后台服务器。

下面通过一个案例来对以上介绍进行演示：

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>input控件title>
    head>
    <body>
        <form action="#" method="POST">
            用户名：    
            <input type="text" value="张三" maxlength="6"/><br /><br />
            密码：    
            <input type="password" size="40"/><br /><br />
            性别：    
            <input type="radio" name="sex" checked="checked"/>男
            <input type="radio" name="sex" />女<br /><br />
            兴趣：    
            <input type="checkbox"/>唱歌
            <input type="checkbox"/>跳舞
            <input type="checkbox"/>游泳<br /><br />
            上传头像：
            <input type="file"/><br /><br />  
            <input type="submit"/>  
            <input type="reset"/>  
            <input type="button" value="普通按钮"/>  
            <input type="hidden"/>  
        form>
    body>
html>

运行效果如图所示:

（11）E-mail类型

E-mail类型的input元素是一种专门用于输入E-mail地址的文本输入框，用来验证E-mail输入框的内容是否符合E-mail邮件地址格式；如果不符合，将提示相应的错误信息。

（12）URL类型

URL类型的input元素是一种用于输入URL地址的文本框。如果所输入的内容是URL地址格式的文本框，则会提交数据到服务器；如果输入的值不符合URL地址格式，则不允许提交，并且会有提示信息。

（13）tel类型

用于提供输入电话号码的文本框，tel类型通常会和pattern属性配合使用。

（14）search类型

用于输入搜索关键词的文本框，它能自动记录一些字符，在用户输入内容后，其右侧会附带一个删除图标，单击这个图标按钮可以快速清除内容。

（15）color类型

用于提供设置颜色的文本框，用于实现一个RGB颜色输入。默认值为#000000，通过value可更改默认颜色。单击颜色类型文本框，可以快速打开拾色器面板，方便用户可视地选取一种颜色。

下面通过一个案例来演示不同文本框的用法：

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>input类型title>
    head>
    <body>
        <form action="#" method="GET">
            请输入您的邮箱：<input type="email" name="formmail"/><br />
            请输入个人网址：<input type="url" name="user_url"/><br />
            请输入电话号码：<input type="tel" name="telphone" pattern="^\d{11}$"/><br />
            输入搜索关键词：<input type="search" name="searchinfo"/><br />
            请选取一种颜色：<input type="color" name="color1"/>
            <input type="color" name="color2" value="#ff3e96"/>
            <input type="submit" value="提交"/><br />
        form>
    body>
html>

运行效果如图所示：

 

 （16）number类型

用于提供输入数值的文本框。在提交表单时，系统会自动检查该输入框中的内容是否为数字。输入框可以对输入的数值进行限制，规定允许的最大值和最小值、合法的数字间隔或默认值等，具体属性说明如下：

  • value：指定输入框的默认值。
  • max：指定输入框的可以接受的最大的输入值。
  • min：指定输入框的可以接受的最小的输入值。
  • step：输入域合法的间隔，如果不设置，默认值是1.

下面通过一个案例对number类型进行演示：

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>number类型title>
    head>
    <body>
        <form action="#" method="GET">
            请输入数值：<input type="number" name="number1" value="1" min="1" max="20"
            step="4"/><br />
            <input type="submit" value="提交"/>
        form>
    body>
html>

运行效果如图所示：

（17）range类型

用于提供数值的输入范围，在网页中显示为滑动条。

（18）Date Pickers类型

Date Pickers类型是指时间日期类型。

时间和日期类型 说明
date 选取日、月、年
month 选取月、年
week 选取周和年
time 选取时间（小时和分钟）
datetime 选取时间、日、月、年（UTC时间）
datetime-local 选取时间、日、月、年（本地时间）

下面通过一个案例对时间日期类型进行演示：

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>时间日期类型title>
    head>
    <body>
        <form action="#" method="GET">
            <input type="date"/> 
            <input type="month"/> 
            <input type="week"/> 
            <input type="time"/> 
            <input type="datetime"/> 
            <input type="datetime-local"/>
            <input type="submit" value="提交"/> 
        form>
    body>
html>

运行效果如图所示：

 2.input元素的其他属性

autofocus属性

用于指定页面加载后是否自动获取焦点。

下面通过一个案例来演示autofocus属性的使用：

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>autofocus元素的使用title>
    head>
    <body>
        <form accept="#" method="GET">
            请输入搜索关键词：<input  type="text" name="user_name" autofocus="off" autofocus="autofpcus"/><br />
            <input type="submit" value="提交"/>
        form>
    body>
html>

运行效果如图所示：

form属性

可以把表单内的子元素写在代码中的任一位置，只需为这个元素指定form属性并设置属性值为该表单的id即可。此外，form属性还允许规定一个表单控件从属于多个表单。

下面通过一个案例来演示form属性的使用：

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>form元素的使用title>
    head>
    <body>
        <form accept="#" method="GET" id="user_name">
            请输入您的姓名：<input  type="text" name="first_name"/>
            <input type="submit" value="提交"/>
        form>
        <p>下面的输入框在form元素外，但因为指定了form属性为表单的id，所以该输入框仍然属于表单的一部分。p>
        请输入您的昵称：<input type="text" name="last_name" form="user_form"/><br />
    body>
html>

运行效果如图所示：

 list属性

用于设置数据列表，它可以指定输入框所绑定的datalist元素。list属性的值是某个datalist元素的id。

下面通过一个案例对list属性进行演示：

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>list元素的使用title>
    head>
    <body>
        <form accept="#" method="GET">
            请输入网址：<input type="url" list="url_list" name="weburl"/>
            <datalist id="url_list">
                <option label="新浪" value="http://www.sina.com.cn">option>
                <option label="搜狐" value="http://www.sohu.com">option>
                <option label="传智" value="http://www.itcast.cn">option>
            datalist>
            <input type="submit" value="提交"/>
        form>
        
    body>
html>

运行效果如图所示：

multiple属性

multiple属性指定输入框可以选择多个值，该属性适用于E-mail和file类型的input元素。multiple属性用于E-mail类型的input元素时，表示可以向文本框中输入多个E-mail地址，多个地址之间通过英文逗号隔开；multiple属性用于file类型的input元素时，表示可以选择多个文件。

下面通过一个案例对multiple属性进行演示：

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>multiple元素的使用title>
    head>
    <body>
        <form accept="#" method="GET">
            电子邮箱：<input type="email" name="myemail" multiple="multiple"/>  
            (如果电子邮箱有多个，请使用逗号分隔)<br /><br />
            上传照片：<input type="file" name="selfile" multiple="multiple"/><br /><br />
            <input type="submit" value="提交"/>
        form>
    body>
html>

运行效果如图所示：

min、max和step属性

用于包含数字或日期的input类型规定限值，适用于Date、Pickers、number和range类型。

pattern属性

pattern属性用于验证input类型输入框红，用户输入的内容是否与所定义的正则表达式相匹配。适用于text、search、url、tel、E-mail和password的标记。

下面通过一个案例对pattern属性进行演示：

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>pattern属性title>
    head>
    <body>
        <form action="#" method="GET">
            帐    号：<input type="text" name="username" pattern="^[a-zA-z] [a-zA-z0-9] {4,15}$"/>
            (以字母开头，长度为5-16b，允许字母、数字、下划线)<br />
            密    码：<input type="password" name="pwd" pattern="^[a-zA-Z]\w{5,17}$"/>
            (以字母开头，长度为6-18，允许字母、数字、下划线)<br />
            身份证号：<input type="text" name="mycard" pattern="^\d{15}|\d{18$}"/>(15位、18位数字)<br />
            E-mail地址：<input type="email" name="myrmail" pattern="^\w+([- + .]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$"/>
            <input type="submit" value="提交"/>
        form>
    body>
html>

运行效果如图所示：

placeholder属性

用于为input类型的输入框提供相关提示信息，以描述此输入框期待用户输入何种内容。提示信息在输入框为空时显式出现，而当输入框获得焦点时则会消失。

下面通过一个案例对placeholder属性进行演示：

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>placeholder属性title>
    head>
    <body>
        <form action="#" method="GET">
            请输入邮政编码：<input type="text" name="code" pattern="[0-9]{6}" placeholder="请输入6位数的邮政编码"/>
            <input type="submit" value="提交"/>
        form>
    body>
html>

运行效果如图所示：

required属性

用于规定输入框填写的内容不能为空，否则不允许用户提交表单。

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>required属性title>
    head>
    <body>
        <form action="#" method="GET">
            请输入姓名：<input type="text" name="user_name" required="required"/>
            <input type="submit" value="提交"/>
        form>
    body>
html>

运行效果如图所示：

其他表单元素

1.textarea元素

textarea可以创建多行文本输入框。其基本语法格式如下：

<textarea cols="每行中的字符数" rows="显示的行数">
    文本内容
textarea>

cols与rows为textarea元素的必须属性，其中cols用来定义多行文本输入框每行中的字符数，rows用来定义多行文本输入框显示的行数，它们的取值均为正整数。

textarea元素还有几个可选属性：

属性 属性值 描述
name 由用户定义 控件的名称
readonly readonly 不能编辑修改
disabled disabled 加载页面时禁用该控件（显示为灰色）

下面通过一个案例来演示