一、HTML <form> 标签
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,比如:文本域(textarea)
、下拉列表
、单选框
、复选框
等等。
HTML 表单用于收集不同类型的用户输入。
1、HTML <form> 标签
<form> 标签用于创建供用户输入的 HTML 表单。
2、HTML 表单常用属性有:action
、method
、name
2.1HTML <form> action 属性
action 属性
规定当提交表单时,向何处发送表单数据。
<form action="URL">
URL 可能的值:
- 绝对 URL - 指向另一个网站(比如 action="https://www.woaixuexi.cn/hello.html")
- 相对 URL - 指向网站内的一个文件(比如 action="hello.html")
2.2HTML <form> method 属性
method属性
方法规定如何发送表单数据(表单数据会被发送到在 action 属性中规定的页面中)。
method
属性值有:get(默认)或 post。
<form method="get|post">
关于 get 和 post 的区别:
get
:以查询字符串形式提交,在地址栏中能看到,长度有限制,不安全。
post
:以表单数据组形式提交,在地址栏中看不到,长度无限制,安全。
提示:
- 当您使用
get
时,表单数据将在页面地址中显示。- 如果表单正在更新数据或使用敏感信息(如密码),请使用
post
。post
提供更好的安全性,因为提交的数据在页面地址中不可见。
2.3HTML <form> name 属性
name表单名称
页面中可能会存在很多表单,每个表单识别是通过表单名称去识别的
name="myform"
二、表单输入元素
多数情况下被用到的表单标签是输入标签<input>
。
输入类型是由类型属性type
定义的。
大多数经常被用到的输入类型有文本框(text)
、密码字段(password)
、单选按钮(radio)
、复选框(checkbox)
、提交按钮(submit)
。
1、HTML 表单文本框
文本框通过<input type="text">
标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本框。
实例:
2、HTML 表单密码字段
密码字段通过标签 <input type="password">
来定义。
实例:
提示:密码字段字符不会明文显示,而是以星号或圆点替代。
3、HTML 单选按钮
单选按钮<input type="radio">
标签定义了表单单选框选项。
实例:
4、HTML 表单复选框
复选框<input type="checkbox">
定义了表单复选框。用户需要从若干给定的选择中选取一个或若干个选项。
实例:
5、HTML 表单提交按钮
提交按钮<input type="submit">
定义了提交按钮。
实例:
假如您在上面的文本框内键入几个字母,然后点击提交按钮,那么输入数据会传送到 "html_form_action.php" 的页面。该页面将显示出您输入的结果。
三、HTML特殊表单元素
1、HTML 下拉列表
<select>
标签定义了下拉选项列表。
<select>
元素中的 <option>
标签定义了列表中的可用选项。
实例:创建带有3个选项的下拉列表。
2、HTML 文本域
<textarea>
标签定义文本域(一个多行的输入控件)。
我们可以通过 cols
和 rows
属性来规定 textarea
的尺寸大小。
cols 属性
规定了文本区域内可见的宽度,rows 属性
规定了文本区域内可见的高度(以行数计)。
实例:
四、HTML其他表单元素
1、HTML <label> 标签
<label>
标签定义了 <input>
元素的标签,一般为输入标题。
<label>
标签的 for 属性
应当与相关元素的 id 属性
相同。
实例:带有两个输入字段和相关标记的 HTML 表单。
注意:
<label>
标签不会向用户呈现任何特殊效果,但当您选择该标签时,浏览器就会自动将焦点转移到和标签相关的表单控件上。
2、HTML <button> 标签
<button>
标签定义一个按钮。
在 <button>
元素内部,您可以放置内容,比如文本或图像。这是该元素与使用 <input>
元素创建的按钮之间的不同之处。
<button> type 属性值有:
submit
:该按钮是提交按钮(除了 IE 浏览器,该值是其他浏览器的默认值)。button
:该按钮是可点击的按钮(IE 浏览器的默认值)。reset
:该按钮是重置按钮(清除表单数据)。
实例:创建一个按钮。
注意:
- 请始终为
<button> 元素
规定type 属性
。- 不同的浏览器对
<button> 元素
的type 属性
使用不同的默认值。
3、HTML <fieldset> 和 <legend> 标签
<fieldset>
标签定义了一组相关的表单元素,并使用外框包含起来。
<legend>
标签定义了 <fieldset>
元素的标题。
实例:组合表单中的相关元素。