HTML表单复习

最新推荐文章于 2022-01-15 15:44:05 发布

百里一兔

最新推荐文章于 2022-01-15 15:44:05 发布

阅读量358

点赞数

分类专栏：阶段复习 Web_Html 文章标签： 20190911

本文链接：https://blog.csdn.net/lb569484787/article/details/100746934

版权

阶段复习同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

Web_Html

14 篇文章 0 订阅

订阅专栏

HTML 表单用于搜集不同类型的用户输入。
点击此处，查看JS表单复习

一、form

1.form元素

<form> 元素定义 HTML 表单。

 <form action="action_page.php" method="GET" target="_blank" 
 accept-charset="UTF-8"  ectype="application/x-www-form-urlencoded" 
 autocomplete="off" novalidate>
 ……
form elements
……
</form>

form 元素是块级元素，其前后会产生折行。

2.form属性

（1）accept HTML 5 中不支持。
MIME_type

（2）accept-charset属性
规定服务器可处理的表单数据字符集。

<form accept-charset="value">

服务器可处理的一个或多个字符集。如需规定一个以上的字符集，请使用逗号来分隔各字符集。
常用值：
UTF-8 - Unicode 字符编码
ISO-8859-1 - 拉丁字母表的字符编码
gb2312 - 简体中文字符集

（3）action属性
定义在提交表单时执行的动作。
向服务器提交表单的通常做法是使用提交按钮。
通常，表单会被提交到 web 服务器上的网页。

指定了某个服务器脚本来处理被提交表单：

<form action="action_page.php">

如果省略 action 属性，则 action 会被设置为当前页面。

（4）autocomplete 属性 HTML5 中的新属性
规定表单是否应该启用自动完成功能。
自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。

注释：autocomplete 属性适用于 <form>，以及下面的 <input> 类型：text, search, url, telephone, email, password, datepickers, range 以及 color。

<form autocomplete="on|off">

on：默认。规定启用自动完成功能。
off：规定禁用自动完成功能。

（5）enctype 属性
规定在发送到服务器之前应该如何对表单数据进行编码。
属性值：
pplication/x-www-form-urlencoded ：在发送前编码所有字符（默认,空格转换为 “+” 加号，特殊符号转换为 ASCII HEX 值）。
multipart/form-data ：不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。
text/plain：空格转换为 “+” 加号，但不对特殊字符编码。

（6）method 属性
规定如何发送表单数据（表单数据发送到 action 属性所规定的页面）。

表单数据可以作为 URL 变量（method=“get”）或者 HTTP post （method=“post”）的方式来发送。

何时使用 GET？
您能够使用 GET（默认方法）：
如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。
当您使用 GET 时，表单数据在页面地址栏中是可见的：

action_page.php?firstname=Mickey&lastname=Mouse

注释：GET 最适合少量数据的提交。浏览器会设定容量限制。

何时使用 POST？
您应该使用 POST：
如果表单正在更新数据，或者包含敏感信息（例如密码）。
POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的。

（7）name 属性
规定表单的名称。
form 元素的 name 属性提供了一种在脚本中引用表单的方法。
如果要正确地被提交，每个输入字段必须设置一个 name 属性。

（8）novalidate 属性 HTML5 中的新属性
规定当提交表单时不对其进行验证。
如果使用该属性，则表单不会验证表单的输入。

注释：novalidate 属性适用于：<form>，以及以下类型的 <input> 标签：text, search, url, telephone, email, password, date pickers, range 以及 color。

（9）target属性
_blank、_self、_parent、_top、framename
规定在何处打开 action URL。

3.用 fieldset 组合表单数据

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

实例：

<form action="action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit"></fieldset>
</form>

4.HTML 表单包含表单元素

表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。
表单用于向服务器传输数据。

二、表单元素

1.input元素

最重要的表单元素是 <input> 元素。
<input> 元素根据不同的 type 属性，可以变化为多种形态。

（1）type属性
text：定义常规文本输入的单行输入字段。
radio：定义单选按钮输入（选择多个选择之一）。

submit：定义提交按钮（提交表单）。
表单处理程序（form-handler）通常是包含处理输入数据的脚本的服务器页面。
在表单的 action 属性中规定表单处理程序（form-handler）。

password：定义密码字段。
checkbox：定义复选框。

file：定义输入字段和 "浏览"按钮，供文件上传。

<html>
<body>
<form>
 <input type="file" name="pic" accept="image/gif" />
 </form>
 </body>
 </html>

hidden：定义隐藏字段。隐藏字段对于用户是不可见的。隐藏字段通常会存储一个默认值，它们的值也可以由 JavaScript 进行修改。

image：定义图像形式的提交按钮。
必须把 src 属性和 alt 属性与 <input type="image"> 结合使用。

reset：定义重置按钮。重置按钮会清除表单中的所有数据。
button：定义按钮。

<input type="button" value="Click me" onclick="msg()" />

HTML5输入类型：
color/date/datetime/datetime-local（有时区）/ email/month/number/range（数字范围）/ search/tel（电话）/time/url/week

（2）value属性
value 属性为 input 元素设定值。

对于不同的输入类型，value 属性的用法也不同：
type="button", "reset", "submit" - 定义按钮上的显示的文本
type="text", "password", "hidden" - 定义输入字段的初始值
type="checkbox", "radio", "image" - 定义与输入相关联的值

注释：
1.<input type="checkbox"> 和 <input type="radio"> 中必须设置 value 属性。
2.value 属性无法与 <input type="file"> 一同使用。

（3）readonly属性
readonly 属性规定输入字段为只读。 readonly="readonly"

readonly 属性可以防止用户对值进行修改，直到满足某些条件为止（比如选中了一个复选框）。然后，需要使用 JavaScript 消除 readonly 值，将输入字段切换到可编辑状态。

readonly 属性可与 <input type="text"> 或 <input type="password"> 配合使用。

（4）disabled 属性
规定应该禁用 input 元素。被禁用的元素不会被提交。 disabled="disabled"

被禁用的 input 元素既不可用，也不可点击。可以设置 disabled 属性，直到满足某些其他的条件为止（比如选择了一个复选框等等）。然后，就需要通过 JavaScript 来删除 disabled 值，将 input 元素的值切换为可用。

注释：disabled 属性无法与 <input type="hidden"> 一起使用。

（5）size属性
规定输入字段的宽度。

对于 <input type="text"> 和 <input type="password">，size 属性定义的是可见的字符数。而对于其他类型，size 属性定义的是以像素为单位的输入字段宽度。

由于 size 属性是一个可视化的设计属性，可以使用 CSS 来代替。

<input style="width:100px" />

（6）maxlength 属性
规定输入字段的最大长度，以字符个数计。
maxlength 属性与 <input type="text"> 或 <input type="password"> 配合使用。

（7）accept属性
只能与 <input type="file"> 配合使用。它规定能够通过文件上传进行提交的文件类型。

 accept="image/gif, image/jpeg"

如果不限制图像的格式，可以写为：accept="image/*"。

提示：请避免使用该属性。应该在服务器端验证文件上传。

（8）align属性
align 属性只能与 <input type="image"> 配合使用。它规定图像输入相对于周围其他元素的对齐方式。
left（默认）、right 、top、middle 、bottom
CSS 代替：<input type="image" style="float:right" />

（9）alt属性
alt 属性只能与配合使用。它为图像输入规定替代文本。

（10）checkd属性
checked 属性规定在页面加载时应该被预先选定的 input 元素。
checked 属性与 <input type="checkbox"> 或 <input type="radio"> 配合使用。

（11）name属性
name 属性规定 input 元素的名称。
name 属性用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据。
注释：只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。

（12）src属性
src 属性只能与 <input type="image"> 配合使用。它规定作为提交按钮显示的图像的 URL。

（13）HTML5 为 <input> 增加了如下属性：
autocomplete：规定表单或输入字段是否应该自动完成。
当自动完成开启，浏览器会基于用户之前的输入值自动填写值。
`on / off``

autofocus：是布尔属性。
如果设置，则规定当页面加载时<input>元素应该自动获得焦点。

form：规定 <input> 元素所属的一个或多个表单。
提示：如需引用一个以上的表单，请使用空格分隔的表单 id 列表。

 <input type="text" name="lname" form="form1">

formaction：规定当提交表单时处理该输入控件的文件的 URL。
覆盖 <form> 元素的 action 属性。
适用于 type=“submit” 以及 type=“image”。
点击此处，查看例子

formenctype：规定当把表单数据（form-data）提交至服务器时如何对其进行编码（仅针对 method=“post” 的表单）。
覆盖 <form> 元素的 enctype 属性。
适用于 type=“submit” 以及 type=“image”。

formmethod：定义用以向 action URL 发送表单数据（form-data）的 HTTP 方法。
覆盖 <form> 元素的 method 属性。
适用于 type=“submit” 以及 type=“image”。

formnovalidate：覆盖 <form> 元素的 novalidate 属性。
可用于 type=“submit”。

formtarget：规定的名称或关键词指示提交表单后在何处显示接收到的响应。
覆盖<form> 元素的 target 属性。
可与 type=“submit” 和 type=“image” 使用。

height 和 width：规定 <input> 元素的高度和宽度。仅用于 <input type="image">。

list：引用的 <datalist> 元素中包含了 <input> 元素的预定义选项。
点击此处，查看例子

min 和 max：规定 <input> 元素的最小值和最大值。
适用于如需输入类型：number、range、date、datetime、datetime-local、month、time 以及 week。

multiple：是布尔属性。
如果设置，则规定允许用户在 <input> 元素中输入一个以上的值。
multiple 属性适用于以下输入类型：email 和 file。

pattern (regexp)：规定用于检查 <input> 元素值的正则表达式。
适用于以下输入类型：text、search、url、tel、email、and password。
使用全局的 title 属性对模式进行描述以帮助用户。（title提示作用）
实例：
只能包含三个字母的输入字段（无数字或特殊字符）：

<input type="text" name="country_code" pattern="[A-Za-z]{3}"
 title="Three letter country code">

placeholder：规定用以描述输入字段预期值的提示（样本值或有关格式的简短描述）。
该提示会在用户输入值之前显示在输入字段中。
适用于以下输入类型：text、search、url、tel、email 以及 password。

required：是布尔属性。规定在提交表单之前必须填写输入字段。
适用于以下输入类型：text、search、url、tel、email、password、date pickers、number、checkbox、radio、and file.

step：规定 <input> 元素的合法数字间隔。
可与 max 以及 min 属性一同使用，来创建合法值的范围。
适用于以下输入类型：number、range、date、datetime、datetime-local、month、time 以及 week。
示例：如果 step=“3”，则合法数字应该是 -3、0、3、6、等等。

width：只适用于 <input type="image">，它规定 image input 的宽度。
单位：像素、百分比。

2.select元素

select 元素可创建单选或多选菜单。
<select> 元素中的 <option> 标签用于定义列表中的可用选项。
select 元素是一种表单控件，可用于在表单中接受用户输入。
（1）select属性

属性	值	描述
autofocus	autofocus	规定在页面加载后文本区域自动获得焦点。
disabled	disabled	规定禁用该下拉列表。
form	form_id	规定文本区域所属的一个或多个表单。
multiple	multiple	规定可选择多个选项。
name	name	规定下拉列表的名称。
required	required	规定文本区域是必填的。
size	number	规定下拉列表中可见选项的数目。

（2）option标签
定义下拉列表中的一个选项（一个条目）。
浏览器将 <option> 标签中的内容作为 <select> 标签的菜单或是滚动列表中的一个元素显示。
option 元素位于 select 元素内部。

属性：
disabled：disabled ——规定此选项应在首次加载时被禁用。
label：text ——定义当使用时所使用的标注。
selected：selected ——规定选项（在首次显示在列表中时）表现为选中状态。
value：text ——定义送往服务器的选项值。

（3）optgroup标签
定义选项组。
optgroup 元素用于组合选项。

<select>
  <optgroup label="Swedish Cars">
    <option value ="volvo">Volvo</option>
    <option value ="saab">Saab</option>
  </optgroup>
</select>

点击此处，查看例子

属性:
label：为选项组规定描述。
disabled：规定禁用该选项组。

3.textarea元素

定义多行的文本输入控件。
文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。
在文本输入区内的文本行间，用 “%OD%OA” （回车/换行）进行分隔。

属性：
（1）autofocus 属性
是逻辑属性。
规定在页面加载后文本区域自动获得焦点。

（2）cols 属性
规定 textarea 的可见宽度。

（3）disabled 属性
规定禁用文本区。被禁用的文本区既不可用，也不可点击。

（4）form 属性
规定文本区域所属的一个或多个表单。
实例：
位于表单之外的文本区域（但仍然是表单的一部分）：

<form action="demo_form.asp" id="usrform">
 Name: <input type="text" name="usrname">
 <input type="submit">
</form>

<textarea name="comment" form="usrform">请在此处输入文本...</textarea>

（5）maxlength 属性
规定文本区域的最大长度（以字符计）。

（6）name 属性
为文本区规定名称。
name 属性用于在 JavaScript 中对元素进行引用，或者在表单提交之后，对表单数据进行引用。

（7）placeholder 属性
规定描述文本区域预期值的简短提示。
该提示会在文本区域为空时显示，当字段获得焦点时消失。

（8）readonly 属性
规定文本区为只读。

（9）required 属性
是逻辑属性。
如果设置该属性，则规定文本区域（textarea）是必填的（以便顺利提交表单）。

（10）rows 属性
规定 textarea 的可见高度。

（11）wrap 属性
规定当在表单中提交时，文本区域（text area）中的文本如何换行。
属性值：
soft：当在表单中提交时，textarea 中的文本不换行。默认值。
hard：当在表单中提交时，textarea 中的文本换行（包含换行符）。当使用 “hard” 时，必须规定 cols 属性。

4.button元素

定义一个按钮。
在 button 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。

属性：
（1）autofocus 属性
规定当页面加载时按钮应当自动地获得焦点。
如果使用该属性，则按钮会获得焦点。

（2）disabled 属性
规定禁用按钮。
被禁用的按钮既不可用，也不可点击。

（3）form 属性
规定按钮属于一个或多个表单。
form 属性的值必须是按钮所属表单的 id。
如需引用一个以上的表单，请使用空格分隔的列表。

（4）formaction、formenctype、formmethod、formnovalidate、formtarget属性
同上，覆盖 form 元素的对应属性。
注释：该属性与 type=“submit” 配合使用。

（5）name属性
按钮规定名称。

（6）type属性
submit：该按钮是提交按钮（除了 Internet Explorer，该值是其他浏览器的默认值）。
button：该按钮是可点击的按钮（Internet Explorer 的默认值）。
reset：该按钮是重置按钮（清除表单数据）。

（7）value属性
规定与按钮关联的初始值。

HTML5 增加了如下表单元素：

<datalist>
<keygen>
<output>

5.datalist元素

<datalist> 元素为 <input> 元素规定预定义选项列表。

用户会在他们输入数据时看到预定义选项的下拉列表。

<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。

<input id="myCar" list="cars" />
<datalist id="cars">
  <option value="BMW">
  <option value="Ford">
  <option value="Volvo">
</datalist>

6.keygen元素

<keygen> 标签规定用于表单的密钥对生成器字段。
当提交表单时，私钥存储在本地，公钥发送到服务器。
点击此处，查看详情

7.output元素

<output> 标签定义不同类型的输出，比如脚本的输出。
Internet Explorer 不支持 <output> 标签。

（1）for 属性
一个或多个元素的 id 列表，以空格分隔，规定计算中使用的元素与计算结果之间的关系。

（2）form 属性
规定 <output> 元素所属的一个或多个表单。

（3）name 属性
规定 <output> 元素的名称。

点击此处，查看详情

百里一兔

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML表单复习

HTML 表单用于搜集不同类型的用户输入。一、form1.form元素<form> 元素定义 HTML 表单。 <form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8" ectype="application/x-www-form-urlencoded" ...
复制链接

扫一扫