HTML表单

HTML表单概述

表单在网页中主要负责数据收集功能。一个表单有三个基本组成部分:

  • 表单标签:这里面包含了处理表单元素所用CGI程序的URL以及数据提交到服务器的方法
  • 表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
  • 表单按钮:包括提交按钮、复位按钮和一般按钮;用于将数据传送到服务器上的 CGI 脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作

注:定义来源于百科

1
<form name='form_name' method='get/post' action='url'></form>
  • name: 定义表单的名字
  • method: 定义表单结果从浏览器传送到服务器的方式,默认参数为:getpost 安全性高,因此常用作输入密码,而get安全性较低,一般用于查询数据
  • action: 用来指定表单处理程序的位置(服务器脚本处理程序)

发送表单数据

action属性

定义了发送数据要去的地址,它的值是必须是一个有效的URL,可以是相对URL,也可以是绝对URL。如果灭有提供此属性或者action=“#”,则数据将被发送到包含表单的页面的URL

1
2
3
4
5
6
<form action='https://albert-5.cn'></form>
<!--数据发送到一个绝对URL-->
<form action='/somewhere_else'></form>
<!--数据发送到一个相对URL-->
<form action='#'></form>
<!--数据发送到表单出现的相同页面上-->

method属性

定义如何发送数据,HTML表单数据可以通过许多不同的数据传输,其中最常见的是GETPOST方法

get方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<form action='https://albert-5.cn' method='get'>
<div>
<label for='say'>what do you want to say?</label>
<input name='say' id='say' value='hello'>
</div>
<div>
<label for='to'>Where do you want to go?</label>
<input name='to' id='to' value='China'>
</div>
<div>
<button>
发送数据
</button>
</div>
</form>

注:例子所示数据被附加到URL 作为一系列的名称/值对。在 URL web 地址结束之后,我们包括一个问号(?),后面是名称/值对,每一个都由一个与符号(&)分隔开。

post方法

使用 post 方法。首先,浏览器将与 action 属性中指定的表单处理服务器建立联系,一旦建立连接之后,浏览器就会按分段传输的方法将数据发送给服务器。在服务器端,一旦 post 样式的应用程序开始执行时,就应该从一个标志位置读取参数,而一旦读到参数,在应用程序能够使用这些表单值以前,必须对这些参数进行解码。用户特定的服务器会明确指定应用程序应该如何接受这些参数。

注:使用 get 请求用户将在他们的 URL 栏中看到数据,但是使用 post 请求用户将不会看到。因此一般 get 用于查询数据, post 用于传输密码等。

表单验证

表单验证帮助我们确保用户以正确格式填写表单数据,确保提交的数据能使我们的应用程序正常工作。生活中我们经常会注册账号,而在注册时,你是否也遇到过诸如:“该行不能为空”,“请输入正确的电话号码”,“请输入正确的邮箱号码”,“确认密码不一致,请重新输入”之类的提示,这些就属于我们的表单验证。

使用内置表单数据验证

HTML5一个特别有用的新功能就是在不使用一行脚本代码的情况下,即对用户的输入进行数据校验,这都是通过表单元素的校验属性实现的。

  • requireed属性

    输入值不能为空,如果输入值为空,将会提示错误消息

    1
    2
    3
    4
    5
    <form>
    <label for='place'>Where do you want to go?</label>
    <input id='place' name='place' required>
    <button>Submit</button>
    </form>
  • 强制条目的长度

    所有文本框的(<input> 或者 <textarea>)可以强制使用minlength和maxlength属性,如果值小于该字段 minlength 的值或大于 maxlength 值则无效

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <form>
    <div>
    <label for='number'>Which number would you like?</label>
    <input type='number' id='number' name='number' value='1' min='1' max='10'>
    </div>
    <div>
    Submit
    </div>
    </form>
第一个表单
1
2
3
4
5
6
7
<form>
姓名:<br>
<input type='text' name='YourName'>
<br>
专业:<br>
<input type='text' name='YourFro'>
</form>

姓名:




专业:


构建HTML表单

fieldset和legend元素

<fieldset>元素组合表单中的相关数据,<legend>元素为<fieldset>元素定义标题

1
2
3
4
5
6
7
8
9
10
11
<form>
<fieldset>
<legend>
标题
</legend>
姓名:<br>
<input type='text' name='Yourname'><br>
年级:<br>
<input type='text' name='YourNJ'>
</fieldset>
</form>



标题

姓名:



年级:



label元素

input元素定义标注,当选择该标签是,浏览器会自动将焦点转到和标签相关的表单控件上,<label>标签的for属性应当与相关元素的id属性相同,使得<label>标签与<input>正确相关联。

1
2
3
4
5
6
7
<form>
<label for='male'></label>
<input type='radio' name='sex' id='male'/>
<br/>
<label for='female'></label>
<input type='radio' name='sex' id='female'>
</form>







原生表单组件

原生表单组件主要包含文本输入框、单行文本框、e-mail输入框、密码输入框、搜索框、电话号码输入框、URL输入框、多行文本框、下拉组件、可勾选组件、按钮

文本输入框input

注:HTML文本框只是个纯文本输入控件,这就意味着不能用它来进行富文本编辑(如加粗、斜体等)

文本域的通用规范

  • 可以被标记readonly(用户不能修改输入值)甚至是disabled(输入值永远不会与表单数据的其余部分一起发送)
  • 可以有个placeholder这是文本输入框中出现的文本,用来简略描述输入框的目的
  • 都受size(输入框的物理尺寸)和length(文本框可以输入的最大字符数)约束

单行文本框

单行文本框是用type属性值为text<input>元素创建的,此外如果你指定给type属性的值不被浏览器支持(比如type='date')也会使用text作为它的值

1
<input type='text' id='text' name='text' value='I am a text'>

e-mail输入框

该输入框设置typee-mail

1
<input type='email' id='email' name='email' multiple>

注:用户需要输入一个有效的 e-mail 地址;其他任何输入都会导致输入框报错。而通过设置 multiple 属性,这种输入框也可以让用户输入多个 e-mail 地址(多个 e-mail 地址之间用逗号隔开)。

密码输入框

输入框设置为typepassword

1
<input type='password' id='pwd' name='pwd'>

搜索框

输入框设置typesearch

1
<input type='search' id='search' name='search'>

电话号码输入框

输入框设置typetel

1
<input type='tel' id='tel' name='tel'>

URL输入框

设置type值为url

1
<input type='url' id='url' name='url'>

注:它为字段添加了特殊的验证约束,如果输入值是个不符合格式的 url,浏览器就会报告错误。符合 url 格式并不意味着它引用了一个实际存在的位置。

多行文本框

使用<textarea>元素

1
<textarea clos='每行中的字符数' rows='显示的行数'></textarea>

下拉组件

HTML 有两种下拉组件:选择框和自动补全组件。这两者的交互方式是一样的,一旦控件被激活,浏览器会展示列表的值让用户从中选择,这个值列表会覆盖在页面内容之上。

选择框语法:

1
2
3
4
5
6
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>

<select><option>标记的常用属性:

自动补全组件:

使用<datalist>元素来为表单小部件提供建议的、自动完成的值,并使用一些<option>子元素来指定要显示的值。然后使用 list 属性将数据列表绑定到一个文本域(通常是一个<input>元素)。

一旦数据列表与表单小部件相关联,它的选项用于自动完成用户输入的文本。通常,这是作为一个下拉框向用户展示的,在输入框中输入可能匹配的内容。

例子:

1
2
3
4
5
6
7
8
9
10
<label for="myColor">What's your favorite color?</label>
<input type="text" name="myColor" id="myColor" list="mySuggestion">
<datalist id="mySuggestion">
<option>black</option>
<option>blue</option>
<option>green</option>
<option>red</option>
<option>black</option>
<option>yellow</option>
</datalist>

可勾选组件

可勾选组件指的是通过点击能够改变其状态的组件。有两种可勾选组件:复选框和单选框,它们都可以通过 checked 属性来指示该组件是否默认被勾选。

值得注意的是,对大多数表单组件而言,表单提交后所有具有 name 属性的组件都会被提交,即使它们没有获值。但对于可勾选组件,它们的值却只有在它们被勾选之后才会提交,换而言之:如果没有勾选,则不会提交任何东西。

复选框

1
<input type="checkbox" checked>

单选框

1
<input type="radio" checked>

几个单选按钮可以连接在一起,只需要把它们的 name 值设置为相同的。同一组中只有一个按钮可以同时被选。如果没有选中任何一个,那么整个单选按钮池就被认为处于未知状态,且不会随表单提交。

例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<fieldset>
<legend>What is your favorite color?</legend>
<ul>
<li>
<label for="red">red</label>
<input type="radio" checked id="red" name="color" value="red">
</li>
<li>
<label for="yellow">yellow</label>
<input type="radio" id="yellow" name="color" value="yellow">
</li>
<li>
<label for="blue">blue</label>
<input type="radio" id="blue" name="color" value="blue">
</li>
</ul>
</fieldset>

按钮

HTML 表单中,有三种按钮:提交按钮,重置按钮,匿名按钮。我们可以使用 <button>元素或者<input>元素来创建一个按钮。type 属性的值指定显示什么类型的按钮。

提交按钮(submit)

用于发送表单数据给服务器。

语法:

1
2
3
4
5
6
7
<button type="submit">
This a submit button
</button>

<!--or-->

<input type="submit" value="This is a submit button">

重置按钮(reset)

用于重置所有表单组件为默认值。

语法:

1
2
3
4
5
6
7
<button type="reset">
This a reset button
</button>

<!--or-->

<input type="reset" value="This is a reset button">

匿名按钮(button)

没有自动生效的按钮,但是可以使用 JavaScript 代码进行定制。如果你省略了 type 属性,那么这就是默认值。

语法:

1
2
3
4
5
6
7
<button type="button">
This a anonymous button
</button>

<!--or-->

<input type="button" value="This is a anonymous button">

不管使用的是<button>元素还是<input>元素,按钮的行为都是一样的。它们的不同点在于:

  • 从前面的例子中也可以看出<button>元素允许你使用 HTML 内容作为其标记内容,但<input>元素只接受纯文本内容。
  • 使用<button>元素,可以有一个不同于按钮标签的值(通过将其设置为 value 属性)。(但是在 IE 8之前的版本中是不行的)