2020年2月14号–HTML学习笔记(三)
HTML <form>
标签
表单是一个包含表单元素的区域。 表单元素 是允许用户在表单中输入内容,比如:文本域(textarea) 、下拉列表 、单选框 、复选框 等等。
HTML 表单用于收集不同类型的用户输入。
HTML <form>
属性
HTML 表单常用属性有:action、method、enctype。
- HTML
<form>
action 属性
action
属性规定当提交表单时,向何处发送表单数据。 - HTML
<form>
method 属性
method
属性方法规定如何发送表单数据(表单数据会被发送到在 action 属性中规定的页面中)。
method 属性值有:get
(默认)或post
。
关于get
和post
的区别:
get: 以查询字符串形式提交,在地址栏中能看到,长度有限制,不安全。
post: 以表单数据组形式提交,在地址栏中看不到,长度无限制,安全。 - HTML
<form>
enctype 属性
enctype
属性规定在将表单数据发送到服务器之前如何对其进行编码。
注意: 只有method="post"
时才使用enctype
属性。
enctype
属性值有:
application/x-www-form-urlencoded:
默认。在发送前对所有字符进行编码(将空格转换为 “+” 符号,特殊字符转换为 ASCII HEX 值)。
multipart/form-data:
不对字符编码。当使用有文件上传控件的表单时,该值是必需的。
HTML 表单输入元素
多数情况下被用到的表单标签是输入标签(<input>
)。 输入类型是由类型属性(type
)定义的。
大多数经常被用到的输入类型有文本框、密码字段、单选按钮、复选框、提交按钮。
-
HTML 表单文本框
文本框通过<input type="text">
标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本框。 -
HTML 表单密码字段
密码字段通过标签<input type="password">
来定义。 -
HTML 单选按钮
<input type="radio">
标签定义了表单单选框选项。 -
HTML 表单复选框
<input type="checkbox">
定义了表单复选框。用户需要从若干给定的选择中选取一个或若干选项。 -
HTML 表单提交按钮
<input type="submit">
定义了提交按钮。
实例:
<form action="html_form_action.php" method="get" name="myForm">
Username: <input type="text" name="username">
<input type="submit" value="Submit">
</form>
假如您在上面的文本框内键入几个字母,然后点击提交按钮,那么输入数据会传送到 “html_form_action.php” 的页面。该页面将显示出输入的结果。
表单提交后,会使用服务端语言(如 PHP)进行数据处理。
HTML特殊表单元素
- HTML 下拉列表
<select>
标签定义了下拉选项列表。
<select>
元素中的<option>
标签定义了列表中的可用选项。 - HTML 文本域
<textarea>
标签定义文本域(一个多行的输入控件)。
我们可以通过cols
和rows
属性来规定textarea
的尺寸大小。
cols
属性规定了文本区域内可见的宽度,rows
属性规定了文本区域内可见的高度(以行数计)。
HMTL其他表单元素
- HTML
<label>
标签
<label>
标签定义了<input>
元素的标签,一般为输入标题。
<label>
标签的for
属性应当与相关元素的id
属性相同。
实例:带有两个输入字段和相关标记的 HTML 表单。
<form action="/statics/demosource/demo-form.php">
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="sex" id="female" value="female"><br><br>
<input type="submit" value="提交">
</form>
4. HTML <button>
标签
<button>
标签定义一个按钮。
在 <button>
元素内部,您可以放置内容,比如文本或图像。这是该元素与使用 <input>
元素创建的按钮之间的不同之处。
<button>
type 属性值有:
submit:
该按钮是提交按钮(除了 IE 浏览器,该值是其他浏览器的默认值)。
button:
该按钮是可点击的按钮(IE 浏览器的默认值)。
reset:
该按钮是重置按钮(清除表单数据)。
5. HTML <fieldset>
和 <legend>
标签
<fieldset>
标签定义了一组相关的表单元素,并使用外框包含起来。
<legend>
标签定义了 <fieldset>
元素的标题。
实例: 组合表单中的相关元素。
<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text"><br><br>
Telephone: <input type="text"><br><br>
Email: <input type="text">
</fieldset>
</form>