HTML及CSS学习笔记 05 - 表单

最新推荐文章于 2024-05-26 15:41:02 发布

chodenke

最新推荐文章于 2024-05-26 15:41:02 发布

阅读量513

点赞数 1

分类专栏： HTML及CSS学习笔记文章标签： HTML HTML5 表单 form

本文链接：https://blog.csdn.net/cgl125167016/article/details/89069811

版权

HTML及CSS学习笔记专栏收录该内容

16 篇文章 5 订阅

订阅专栏

本文是HTML及CSS课程的第五课，表单是网页中获取用户输入数据的一种最主要的方式，本文介绍在HTML当中，表单的制作和使用方法

一、表单介绍

1、表单是什么

表单是网页制作中非常重要的内容，是Web开发中实现输入功能的。用户通过表单可以在网页中录入数据、编辑数据。例如登录、注册、修改密码、编辑资料等。

2、HTML中的表单

在HTML当中，表单使用<form>标签来定义。<form>标签包含所有的表单元素，并且会告诉浏览器表达中的数据会提交到哪里，以及使用什么方式发送。
下面是一个示例：

<body>
  <form action="success.html" method="post" name="testForm"></form>
</body>

说明：

<form>标签类似于一个容器标签，上面的这段代码，在浏览器窗口不会有什么视觉上的效果。
action属性指定表单数据将提交到哪个位置，可以使用绝对路径或相对路径。
method属性指定数据发送的方式，有get和post两种方式，在表单当中，我们常常使用post方式。这两种方式的区别如下：
method属性取值说明
get get在URL中显示传递数据，get传递的数据小于2K
post post隐藏传递数据，post传送大量数据

`method`属性取值	说明
`get`	`get`在URL中显示传递数据，`get`传递的数据小于2K
`post`	`post`隐藏传递数据，`post`传送大量数据

其他一些常见属性介绍如下：

属性	说明
`enctype`	值为`application/x-www-form-urlencoded`（默认）或 `multipart/form-data`或`text/plain`，规定在提交表单数据之前如何对其进行编码
`novalidate`	值为`novalidate`，如果使用该属性，则提交表单时不进行验证

二、表单元素

表单的元素由<input>标签、<textarea>标签、<select>标签、<button>标签、<datalist>标签等构成。在HTML4版本中表单元素都要包含在<form>标签中才有效，在HTML5版本中可以放在<form>标签外，但表单元素需要使用form属性指明其所属的表单id。常用表单元素标签的作用及所属版本如下：

标签	作用	所属版本
`<input>`	根据`type`属性值的不同，表示多种输入形式	HTML4
`<textarea>`	表示多行文本框	HTML4
`<select>`	表示下拉框，下列框的条目用`<option>`表示	HTML4
`<button>`	表示按钮	HTML5
`<datalist>`	表示搜索自动补齐列表	HTML5

1、<label>标签

在正式讨论常用的表单元素前，我们先来了解一下<label>标签。<label> 标签为表单元素定义标注（标记），它常常用来显示我们在表单中看到的数据名称。
下面是一个示例：

<body>
  <form action="success.html" method="post" name="testForm">
    <label for="user-name">用户名称</label>
    <input type="text" id="user-name" name="userName" />
  </form>
</body>

页面浏览效果：
标签页面浏览效果
说明：

<label>标签中for属性的值应该和<input>标签中id的属性值一致，这两个表单元素就会被关联起来，之后在浏览器中点击<label>标签时，对应的<input>标签就会获得焦点，这一特性为用户改进了可用性。

2、<input>标签

<input>是最为常见，使用最为频繁的表单元素标签。表单中大部分的数据借由<input>标签来输入。<input>标签的语法格式如下：

<input 
  type="元素类型" 
  name="元素名称" 
  value=”元素值”
  id="标签唯一标识" 
  size="元素大小"  
  maxlength="元素可输入字符的上限"
  checked 元素被选中
  required="required"
  readonly="readonly" 
  placeholder="提示文本"
  pattern="正则表达式"
  autofocus=" autofocus " />

说明：

type属性是<input>标签中最为重要的属性，type属性决定了<input>标签的具体表现形式。而且，根据浏览器的不同或者设备的不同，<input>标签的具体表现形式可能有所不同。
name属性表示元素的名称，也会作为表单数据提交时的参数名称。
value属性表示元素将要提交的参数值。
id属性表示该<input>标签的唯一标识。
size属性需要一个数字，表示以字符个数设定的元素宽度。
maxlength属性需要一个数字，表示元素接受字符数的上限。
checked属性表示元素被选中。
required属性表示元素内容不能为空，必填。
readonly属性表示元素内容为可读，此时，元素内容不允许再被编辑。
placeholder属性将会为元素显示一个提示文本。
pattern属性将为元素指定一个正则表达式，输入的内容必须与该正则表达式匹配。
autofocus属性表示在页面加载后，元素自动获取焦点。
还有其他一些属性，将会在遇到的时候进行介绍。

2.1、type="text"

当<input>标签的type属性值为text时，<input>标签显示为单行文本框。
下面是一个示例：

<body>
  <form action="success.html" method="post" name="testForm">
    <label for="user-name">用户名称</label>
    <input type="text" id="user-name" name="userName" placeholder="请输入用户名" value="" />
  </form>
</body>

页面浏览效果：
type="text"
说明：

placeholeder属性的值会作为提示信息，出现在文本框中，提示用户输入，但不会影响客户的输入值。
value属性中的值为表单提交时传递到<form>标签action属性指定地址的参数值，我们在浏览器文本框中输入文字时，实质是在为value属性赋值。

2.2、type="password"

当<input>标签的type属性值为password时，<input>标签显示为密码框。
下面是一个示例：

<body>
  <form action="success.html" method="post" name="testForm">
    <label for="user-pass">用户密码</label>
    <input type="password" id="user-pass" name="userPass" placeholder="请输入用户密码" value="" />
  </form>
</body>

页面浏览效果：
type="password"
说明：

用户在密码框中进行输入时，浏览器会自动隐藏输入的文字。

2.3、type="radio"

当<input>标签的type属性值为radio时，<input>标签显示为单选按钮。
下面是一个示例：

<body>
  <form action="success.html" method="post" name="testForm">
    用户性别<br/>
	<label for="user-gender-male">男</label>
    <input type="radio" id="user-gender-male" name="userGender" value="1" checked />
	<label for="user-gender-female">女</label>
    <input type="radio" id="user-gender-female" name="userGender" value="0" />
  </form>
</body>

页面浏览效果：
type="radio"
说明：

单选按钮经常同时出现多个，当多个单选按钮的name属性一样时，为一组单选按钮，一组单选按钮同时只能选中其中1个。
在单选按钮中添加checked属性时，表示该单选按钮默认选中，checked是checked="checked"的简写形式。

2.4、type="checkbox"

当<input>标签的type属性值为checkbox时，<input>标签显示为复选框。
下面是一个示例：

<body>
  <form action="success.html" method="post" name="testForm">
    个人爱好<br/>
	<label for="user-hobby-basketball">篮球</label>
    <input type="checkbox" id="user-hobby-basketball" name="userHobby" value="0" checked />
	<label for="user-hobby-football">足球</label>
    <input type="checkbox" id="user-hobby-football" name="userHobby" value="1" />
	<label for="user-hobby-volleyball">排球</label>
    <input type="checkbox" id="user-hobby-volleyball" name="userHobby" value="2" />
	<label for="user-hobby-badminton">羽毛球</label>
    <input type="checkbox" id="user-hobby-badminton" name="userHobby" value="3" />
  </form>
</body>

页面浏览效果：
type="checkbox"
说明：

复选框经常同时出现多个，当多个复选框的name属性一样时，为一组复选框，一组复选框同时可以选中一个、多个或都不选。
在复选框中添加checked属性时，表示该单选按钮默认选中。

2.5、type="file"

当<input>标签的type属性值为file时，<input>标签显示为文件域。
下面是一个示例：

<body>
  <form action="success.html" method="post" name="testForm">
	<label for="user-header">用户头像</label>
    <input type="file" id="user-header" name="userHeader" accept=".jpg,.png"/>
  </form>
</body>

页面浏览效果：
type="file"
说明：

文件域会自带一个按钮，点击之后会弹出文件选择框。

accept属性接受一个逗号分隔的MIME类型字符串，用于限制允许上传的文件类型。下面是几个例子：

`accept`属性及值	说明
`accept="image/png"`或 `accept=".png"`	只接受 PNG 图片
`accept="image/png, image/jpeg"`或 `accept=".png, .jpg, .jpeg"`	接受PNG和JPEG 文件
`accept="image/*"`	接受任何图片文件类型

2.6、type="submit"

当<input>标签的type属性值为submit时，<input>标签显示为提交按钮。
下面是一个示例：

<body>
  <form action="success.html" method="post" name="testForm">
    <input type="submit" value="提交" />
  </form>
</body>

页面浏览效果：
type="submit"
说明：

提交按钮在点击后，会触发所在表单的提交事件。所谓提交，就是将表单中用户输入的数据打包，发送给<form>标签action属性所指向的地址。
提交按钮的value属性值会显示在按钮上

2.7、type="reset"

当<input>标签的type属性值为reset时，<input>标签显示为重置按钮。
下面是一个示例：

<body>
  <form action="success.html" method="post" name="testForm">
	<label for="user-name">用户名称</label>
    <input type="text" id="user-name" name="userName" 
            placeholder="请输入用户名" value="" />
	<br/>
	<label for="user-pass">用户密码</label>
    <input type="password" id="user-pass" name="userPass" 
            placeholder="请输入用户密码" value="" />
	<br/>
    <input type="reset" value="重置" />
  </form>
</body>

页面浏览效果：
type="reset"
说明：

重置按钮在点击后，会触发所在表单的重置事件，所谓重置，就是将表单中用户输入的数据全部清空，使表单恢复到初始化状态。

2.8、type="button"

当<input>标签的type属性值为button时，<input>标签显示为普通按钮。
下面是一个示例：

<body>
  <form action="success.html" method="post" name="testForm">
    <input type="button" value="按钮" />
  </form>
</body>

页面浏览效果：
type="button"
说明：

普通按钮在点击后，默认什么都不会发生，需要使用客户端脚本（通常为JavaScript）来自定义普通按钮点击之后所要执行的事件。

2.9、type="image"

当<input>标签的type属性值为image时，<input>标签显示为图片按钮。
下面是一个示例：

<body>
  <form action="success.html" method="post" name="testForm">
    <input type="image" src="images/submit.png" />
  </form>
</body>

页面浏览效果：
type="image"
说明：

图片按钮的src属性用来指定一张图片，该图片会显示在按钮上。
图片按钮在点击后，也会触发表单的提交事件。

2.10、type="hidden"

当<input>标签的type属性值为hidden时，<input>标签为隐藏域。
下面是一个示例：

<body>
  <form action="success.html" method="post" name="testForm">
    <input type="hidden" name="userId" id="user-id" value="10021"/>
  </form>
</body>

说明：

隐藏域对于用户是不可见的，这里不再展示页面浏览效果。
隐藏域常常存储默认值，或者由客户端脚本（通常为JavaScript）改变它们的值。

2.11、type="search"

当<input>标签的type属性值为search时，<input>标签显示为搜索框。
下面是一个示例：

<body>
  <form action="success.html" method="post" name="testForm">
    <label for="search-param">搜索</label>
    <input type="search" id="search-param" name="searchParam" />
  </form>
</body>

页面浏览效果：
type="search"
说明：

搜索框看起来像是一个文本框，可以输入一行普通的文本，从语义上来说，它可以表示一个搜索框。

2.12、type="email"

当<input>标签的type属性值为email时，<input>标签为一个电子邮件地址输入框。
下面是一个示例：

<body>
  <form action="success.html" method="post" name="testForm">
    <label for="user-email">用户电子邮箱</label>
    <input type="email" id="user-email" name="userEmail" required/>
	<br />
	<input type="submit" value="提交" />
  </form>
</body>

页面浏览效果：
type="email"
说明：

电子邮件地址输入框的页面浏览效果与普通文本框基本相同。但从语义上，要求输入一个电子邮箱地址。
表单提交时，浏览器会对电子邮件地址输入框进行校验，检查用户输入的字符串是否是一个合法的电子邮箱地址，如不合法，表单不会被提交，并且浏览器页面将会进行提示，提示信息及显示方式会因为浏览器或设备的不同而不同。
这里还演示了required属性，该属性是<input>标签的通用属性，表示该表单元素内容不能为空，要求用户必须填写，浏览器会进行相应的校验。required是required="required"的简写形式。
在移动端的浏览器上，当电子邮件地址输入框获得焦点时，会唤醒一个比较方便用户输入电子邮件的定制键盘。

2.13、type="url"

当<input>标签的type属性值为url时，<input>标签为一个URL输入框。
下面是一个示例：

<body>
  <form action="success.html" method="post" name="testForm">
    <label for="company-url">公司官网</label>
    <input type="url" id="company-url" name="companyUrl"/>
	<br />
	<input type="submit" value="提交" />
  </form>
</body>

页面浏览效果：
type="url"
说明：

URL输入框的页面浏览效果与普通文本框基本相同。但从语义上，要求输入一个URL地址。
浏览器会对URL输入框中输入的值进行校验。
在移动端的浏览器上，当电子邮件输入框获得焦点时，会唤醒一个比较方便用户输入URL的定制键盘。

2.14、type="tel"

当<input>标签的type属性值为tel时，<input>标签为一个电话号码输入框。
下面是一个示例：

<body>
  <form action="success.html" method="post" name="testForm">
    <label for="company-tel">公司电话</label>
    <input type="tel" id="company-tel" name="companyTel"/>
  </form>
</body>

说明：

电话号码输入框的页面浏览效果与普通文本框基本相同。但从语义上，要求输入一个电话号码。
按HTML5的标准，浏览器应该对电话号码输入框中的输入内容进行校验，但遗憾的是，由于种种现实困难，至今大多浏览器并没有实现这一点，因此，这里我们不再展示页面浏览效果。

2.15、type="number"

当<input>标签的type属性值为number时，<input>标签为一个数值输入框。
下面是一个示例：

<body>
  <form action="success.html" method="post" name="testForm">
    <label for="num">数字</label>
    <input type="number" id="num" name="num"/>
  </form>
</body>

页面浏览效果：
type="number"
说明：

数值输入框在不同的浏览器或设备上表现形式不同，一般会有一组上下箭头，用来控制数字输入框中的数值大小。
数值输入框不会响应键盘上字母等按键的点击事件。
在移动端浏览器上，当数字输入框获得焦点时，会唤醒一个定制的数字键盘，方便输入数字。

2.16、type="range"

当<input>标签的type属性值为range时，<input>标签为一个数值范围滑动条。
下面是一个示例：

<body>
  <form action="success.html" method="post" name="testForm">
    <label for="num-range">数字范围</label>
    <input type="range" id="num-range" name="numRange"/>
  </form>
</body>

页面浏览效果：
type="range"
说明：

一个简单的数值范围滑动条并不能告诉我们现在它代表的数字是多少。需要配合<output>标签和客户端脚本（通常为JavaScript）使用。

下面是另一个示例：

<body>
  <form action="success.html" method="post" name="testForm">
    <label for="num-range">数字范围</label>
    <input type="range" id="num-range" name="numRange" 
           min="0" max="10" onchange="x.value=this.value"/>
	<output name="x"></output>
  </form>
</body>

页面浏览效果：
type="range"
说明：

min属性和max属性表示可以选择的最小和最大值。
onchange是一个JavaScript事件，表示该元素发生了变化；代码x.value=this.value表示将name睡醒值为x的元素的value属性值赋值为当前元素的value属性值。

2.17、type="date"

当<input>标签的type属性值为date时，<input>标签为一个日期选择组件。
下面是一个示例：

<body>
  <form action="success.html" method="post" name="testForm">
    <label for="date-param">日期</label>
    <input type="date" id="date-param" name="dateParam" />
  </form>
</body>

页面浏览效果：
type="date"
说明：

当type属性值为data、month、week、time、datetime等的时候，移动端浏览器上也会出现一个适应于移动设备的日期、月份、星期、时间等的选择组件，不同浏览器或设备显示效果略有不同，但通常效果都会比较酷炫。
当type属性值为data、month、week、time、datetime等的时候，元素都不会响应键盘上字母等按键的点击事件。
HTML5之前，这个功能需要非常复杂的JavaScript代码来实现。

2.18、type="month"

当<input>标签的type属性值为month时，<input>标签为一个月份选择组件。
下面是一个示例：

<body>
  <form action="success.html" method="post" name="testForm">
    <label for="month-param">月份</label>
    <input type="month" id="month-param" name="monthParam" />
  </form>
</body>

页面浏览效果：
type="month"

2.19、type="week"

当<input>标签的type属性值为week时，<input>标签为一个星期选择组件。
下面是一个示例：

<body>
  <form action="success.html" method="post" name="testForm">
    <label for="week-param">星期</label>
    <input type="week" id="week-param" name="weekParam" />
  </form>
</body>

页面浏览效果：
type="week"
说明：

星期选择组件会让用户选择某一年中的第几周。

2.20、type="time"

当<input>标签的type属性值为week时，<input>标签为一个时间选择组件。
下面是一个示例：

<body>
  <form action="success.html" method="post" name="testForm">
    <label for="time-param">时间</label>
    <input type="time" id="time-param" name="timeParam" />
  </form>
</body>

页面浏览效果：
type="time"
说明：

时间选择组件会让用户选择小时和分钟。

2.21、type="datetime"

当<input>标签的type属性值为datetime时，<input>标签为一个UTC日期时间选择组件。
下面是一个示例：

<body>
  <form action="success.html" method="post" name="testForm">
    <label for="datetime-param">UTC日期时间</label>
    <input type="datetime" id="datetime-param" name="datetimeParam" />
  </form>
</body>

说明：

很遗憾，当前，很多浏览器的UTC日期时间选择组件显示效果与普通文本框基本相同，并没有实现对应的UTC日期时间选择的效果。但从语义上，要求输入日期时间字符串。这里不再展示页面浏览效果。

2.22、type="datetime-local"

当<input>标签的type属性值为datetime-local时，<input>标签为一个本地日期时间选择组件。
下面是一个示例：

<body>
  <form action="success.html" method="post" name="testForm">
    <label for="datetime-local-param">本地日期时间</label>
    <input type="datetime-local" id="datetime-local-param" name="datetimeLocalParam" />
  </form>
</body>

页面浏览效果：
type="datetime-local"
说明：

本地日期时间选择组件会让用户选择年、月、日、小时和分钟。

2.23、type="color"

当<input>标签的type属性值为color时，<input>标签为一个颜色选择组件。
下面是一个示例：

<body>
  <form action="success.html" method="post" name="testForm">
    <label for="color-param">颜色</label>
    <input type="color" id="color-param" name="colorParam" />
  </form>
</body>

页面浏览效果：
type="color"
说明：

移动端浏览器上也会出现一个适应于移动设备的颜色选择组件，表现形式因设备和浏览器的不同而略有不同。

3、<textarea>标签

<textarea>标签表示文本域，即是一个多行的文本框。<input>标签所代表的文本框只能接收少量的单行文本，而<textarea>标签表示的文本域可以接收用户输入的多行文本。
下面是一个示例：

<body>
  <form action="success.html" method="post" name="testForm">
    <label for="user-introduction">用户介绍</label>
    <textarea id="user-introduction" name="userIntroduction" rows="5" cols="40">
    </textarea>
  </form>
</body>

页面浏览效果：
标签页面浏览效果
说明：

<textarea>标签必须有开始标签和结束标签，开始标签和结束标签之间的文本便是表单数据提交时对应name属性的参数数值。
id属性表示该<textarea>标签的唯一标识。
name属性表示文本域的名称，也会作为表单数据提交时的参数名称。
rows属性表示文本域初始大小可以包含多少行文本。
cols属性表示文本域初始大小可以包含多少列文本。
当用户输入的文本超过文本域的初始大小时，会自动添加滚动条。
要让文本域中的文本只显示，不可编辑，可以在<textarea>标签中添加readonly属性。

4、<select>标签

<select>标签和<option>标签配合使用，可以表现一个下拉列表框，其中<select>表示下拉选择框，<option>表示可选的项。
下面是一个示例：

<body>
  <form action="success.html" method="post" name="testForm">
    <label for="user-hometown">用户家乡</label>
    <select id="user-hometown" name="userHometown">
	  <option value="兰州">兰州</option>
	  <option value="广州" selected>广州</option>
	  <option value="苏州">苏州</option>
	  <option value="杭州">杭州</option>
	</select>
  </form>
</body>

页面浏览效果：
标签页面浏览效果
说明：

<select>标签中的name属性值会作为表单数据提交时的参数名称。
<option>标签中的value属性值为表单提交时的参数值。
如果需要使某一项默认选中，可以在<option>标签中添加selected属性。selected是selected="selected"的简写形式。

配合<optgroup>标签，可以对选项进行分组，如下

<body>
  <form action="success.html" method="post" name="testForm">
    <label for="user-hometown">用户家乡</label>
    <select id="user-hometown" name="userHometown">
   	  <optgroup label="甘肃省">
        <option value="兰州">兰州</option>
	    <option value="天水">天水</option>
	    <option value="酒泉">酒泉</option>
  	  </optgroup>
  	  <optgroup label="陕西省">
    	<option value="西安">西安</option>
		<option value="宝鸡">宝鸡</option>
		<option value="延安">延安</option>
  	  </optgroup>
	</select>
  </form>
</body>

页面浏览效果：

<optgroup>标签中的label属性用来表示分组的名称。将会显示在下拉列表中，但无法被选择。

5、<button>标签

在HTML5以前，表单的提交、重置按钮一般由<input>标签来完成（type="submit"及type="rest"）。HTML5中，为了使语义更加清晰，推荐我们使用<button>标签来实现按钮的功能。在<button>元素内部，可以放置内容，比如文本或图像。这也是该标签与使用<input>标签实现按钮在编码时最大的不同之处。
下面是一个示例：

<body>
  <form action="success.html" method="post" name="testForm" id="testForm">
	<label for="user-name">用户名称</label>
    <input type="text" id="user-name" name="userName" 
            placeholder="请输入用户名" value="" />
	<br/>
	<label for="user-pass">用户密码</label>
    <input type="password" id="user-pass" name="userPass" 
            placeholder="请输入用户密码" value="" />
	<br/>
	<button type="submit" formaction="otherSuccess.html" name="subBtn">提交</button>
  </form>
  <button type="reset" form="testForm" name="resetBtn">重置</button>
</body>

页面浏览效果：
标签页面浏览效果
说明：

<form>标签的id属性表示该表单的唯一标识。
<button>标签的type属性表示用来指定该按钮的功能。具体如下：
属性值说明
type="button" 普通按钮
type="submit" 提交按钮
type="reset" 重置按钮
formaction属性规定当提交表单时向何处发送表单数据。覆盖form元素的action属性。该属性与type="submit"配合使用。
name属性规定按钮的名称。
form属性规定按钮属于哪一个表单，其属性值应该是一个<form>标签的id属性值。上例中，重置按钮即在表单的标签之外，同样可以重置表单。但是，除非页面布局有特殊需要，并不需要也不建议这样做。

属性值	说明
`type="button"`	普通按钮
`type="submit"`	提交按钮
`type="reset"`	重置按钮

其他一些常见属性介绍如下：

属性	说明
`autofocus`	值为`autofocus`，表示当页面加载时按钮应当自动地获得焦点
`disabled`	值为`disabled`，表示禁用该按钮
`formenctype`	覆盖`<form>`标签的`enctype`属性，该属性与`type="submit"`配合使用
`formmethod`	覆盖`<form>`标签的`method`属性，该属性与`type="submit"`配合使用
`formnovalidate`	值为`formnovalidate`。如果使用该属性，则提交表单时不进行验证，覆盖`<form>`标签的`novalidate`属性，该属性与`type="submit"`配合使用

6、<datalist>标签

<datalist>标签为其他输入控件提供一个预定义的选项列表，方便其他输入控件选择输入。
下面是一个示例：

<body>
  <form action="success.html" method="post" name="testForm">
    <label for="user-hometown">用户家乡</label>
    <input type="text" id="user-hometown" 
	       name="userHometown" list="citys"/>
	<datalist id="citys">  
	  <option value="兰州" />
	  <option value="广州" />
	  <option value="苏州" />
	  <option value="杭州" />
	</datalist>
  </form>
</body>