个人自学前端5-HTML标签3

表单

表单是构成 Web 页面的重要组成部分。它们提供了大量你所需要用来与网站进行交互所需的功能。比如注册、登录、发送评论反馈、购买商品等等。

标签名	描述	属性
`<form>`	定义一个 HTML 表单	action：规定当提交表单时向何处发送表单数据。method：发送表单数据的 HTTP 方法，get/post。target：在何处打开 action URL，取值_blank，_self。autocomplete：规定表单是否应该启用自动完成功能。novalidate：当提交表单时不对其进行验证。
`<input>`	输入控件	type:指定输入控件的类型,常用取值：`button`、`text`、`password`、`checkbox`、`radio`、 `reset`、 `submit`、 `file` ...。value:控件的输入值。 disabled:禁用元素。readonly：文本只读。name:元素名称。
`<label>`	定义 `checkbox`、`radio` 元素的标注	for:规定 label 与哪个表单元素绑定
`<textarea>`	文本域，可以输入多行文本	disabled:禁用文本框。readonly：文本只读。name:元素名称。
`<button>`	定义按钮	type: 规定按钮的类型,取值：button, reset, submit。disabled:禁用该按钮。
`<select>`	下拉列表	disabled:禁用。name:元素名称。
`<optgroup>`	定义下拉列表中的选项组	label：为选项组规定描述。disabled:禁用该选项组。
`<option>`	定义下拉列表中选项	value：定义送往服务器的选项值。selected：默认选中。disabled:禁用该选项。

提交按钮submit 可以触发<form>向服务器端发送请求。

表单提交时当前页面会刷新。

<form>通常不会使用 action等属性向服务器发送数据，现在使用 ajax将表单数据发送到服务器。

表单控件需要设置 name 属性。

重置按钮reset 只有在 <form>中才可以重置表单控件中数据。

表单控件可以不在<from>中单独使用。

HTML 表单元素

select 元素（下拉列表）

<select disabled="disabled">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi" selected autofocus>Audi</option>
</select>

<option>：标签用于定义列表中的可用选项。
selected：预选择某些选项。
autofocus:在页面加载后下拉列表应该自动获得焦点。
disabled：禁用下拉列表，不可用，也不可点击。

textarea

<textarea rows="3" cols="20" maxlength="50" placeholder="请介绍自己..." readonly="readonly" required wrap="hard" disabled="disabled">
在w3school，你可以找到你所需要的所有的网站建设教程。
</textarea>

该元素定义多行输入字段（文本域）。
cols ：属性规定 textarea 的可见宽度。
rows ：属性规定 textarea 的可见高度。
readonly ：属性规定文本区为只读。
disabled ：属性规定禁用文本区。既不可用，也不可点击。
maxlength ：属性规定文本区域的最大长度（以字符计），IE9以下不支持。
placeholder ：属性规定描述文本区域预期值的简短提示。该提示会在文本区域为空时显示，当字段获得焦点时消失。IE9以下不支持。
required ：规定文本区域（textarea）是必填的（以便顺利提交表单）。IE和Safari不支持。
wrap 属性规定当在表单中提交时，文本区域（text area）中的文本如何换行。

值	描述
soft	当在表单中提交时，textarea 中的文本不换行。默认值。
hard	当在表单中提交时，textarea 中的文本换行（包含换行符）。当使用 "hard" 时，必须规定 cols 属性。

button

<button type="button" autofocus="autofocus">
点击这里
</button>

该元素定义可点击的按钮
autofocus ：属性规定当页面加载时按钮应当自动地获得焦点。
disabled ：属性规定禁用按钮。
type：属性规定按钮的类型。

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

datalist

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

该标签定义选项列表。
请与 input 元素配合使用该元素，来定义 input 可能的值。
datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。
请使用 input 元素的 list 属性来绑定 datalist。
<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。
IE和Safari不支持。

keygen

<form action="/example/html5/demo_form.asp" method="get">
用户名：<input type="text" name="usr_name" />
加密：<keygen name="security" autofocus="autofocus" disabled="disabled" keytype="rsa"/>
<input type="submit" />
</form>

该标签规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器。
H5新标签，Firefox, Chrome, Opera 以及 Safari 6 支持 <keygen> 标签。
autofocus ：属性规定当页面加载时按钮应当自动地获得焦点。
disabled ：属性规定禁用按钮。
name ：属性规定 keygen 元素的名称。用于在表单数据已被提交后对数据进行引用。
keytype ：属性规定应该使用哪种密钥生成算法。不同的浏览器支持不同的密钥类型。

output

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>

该标签定义不同类型的输出，比如脚本的输出。
IE8以下不支持。
for ：属性规定了计算中使用的元素与计算结果之间的关系。
name ：属性规定元素的名称。

HTML 输入类型

text

定义供文本输入的单行输入字段

<input type="text" name="firstname">

password

定义密码字段，password 字段中的字符会被做掩码处理（显示为星号或实心圆）。

<input type="password" name="psw">

submit

定义提交表单数据至表单处理程序的按钮。

<input type="submit" value="Submit">

radio

定义单选按钮。

<form action="/demo/demo_form.asp">
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
<br><br>
<input type="submit">
</form>

checkbox

定义复选框。允许用户在有限数量的选项中选择零个或多个选项。

<form action="/demo/demo_form.asp">
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
<br><br>
<input type="submit">
</form>

button

定义按钮。

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

number

用于应该包含数字值的输入字段。IE9以下不支持。

<form action="/demo/demo_form.asp">
  数量（1 到 5 之间）：
  <input type="number" name="quantity" min="1" max="5">
  <input type="submit">
</form>

date

用于应该包含日期的输入字段。根据浏览器支持，日期选择器会出现输入字段中。Firefox和IE不支持。

<form action="/demo/demo_form.asp">
请输入 1980-01-01 之前的日期：<br>
<input type="date" name="bday" max="1979-12-31"><br><br>
请输入 2000-01-01 之后的日期：<br>
<input type="date" name="bday" min="2000-01-02"><br><br>
<input type="submit"> 
</form>

color

用于应该包含颜色的输入字段。IE不支持。

<form action="action_page.php">
  Select your favorite color:
  <input type="color" name="favcolor" value="#ff0000">
  <input type="submit">
</form>

range

用于应该包含一定范围内的值的输入字段。IE9以下不支持。可与output一起用。

<form action="/demo/demo_form.asp" method="get">
  Points:
  <input type="range" name="points" min="0" max="10">
  <input type="submit">
</form>

month

允许用户选择月份和年份。Firefox和IE11以下不支持。

<form action="/demo/demo_form.asp">
  生日（月和年）：
  <input type="month" name="bdaymonth">
  <input type="submit">
</form>

week

允许用户选择周和年。Firefox和IE11以下不支持。

<form action="action_page.php">
  Select a week:
  <input type="week" name="year_week">
  <input type="submit">
</form>

time

允许用户选择时间（无时区）。Firefox和IE11以下不支持。

<form action="/demo/demo_form.asp">
  请选取一个时间：
  <input type="time" name="usr_time">
  <input type="submit">
</form>

datetime

允许用户选择日期和时间（有时区）。Chrome、Firefox和IE不支持。基本不用。

<form action="action_page.php">
  生日（日期和时间）：
  <input type="datetime" name="bdaytime">
  <input type="submit">
</form>

datetime-local

允许用户选择日期和时间（无时区）。Firefox和IE不支持。

<form action="/demo/demo_form.asp">
  生日（日期和时间）：
  <input type="datetime-local" name="bdaytime">
  <input type="submit" value="Send">
</form>

email

用于应该包含电子邮件地址的输入字段。根据浏览器支持，能够在被提交时自动对电子邮件地址进行验证。某些智能手机会识别 email 类型，并在键盘增加 ".com" 以匹配电子邮件输入。IE9以下不支持。

<form action="/demo/demo_form.asp">
  E-mail:
  <input type="email" name="email">
  <input type="submit">
</form>

search

用于搜索字段（搜索字段的表现类似常规文本字段）。

<form action="/demo/demo_form.asp">
  搜索谷歌：
  <input type="search" name="googlesearch">
  <input type="submit">
</form>

tel

用于应该包含电话号码的输入字段。目前只有 Safari 8 支持 tel 类型。别用。

<form action="action_page.php">
  Telephone:
  <input type="tel" name="usrtel">
  <input type="submit">
</form>

url

用于应该包含 URL 地址的输入字段。根据浏览器支持，在提交时能够自动验证 url 字段。某些智能手机识别 url 类型，并向键盘添加 ".com" 以匹配 url 输入。IE9以下不支持。

<form action="action_page.php">
  请添加您的首页：
  <input type="url" name="homepage">
  <input type="submit">
</form>

HTML Input 属性

value 属性规定输入字段的初始值。
readonly 属性规定输入字段为只读（不能修改）。
disabled 属性规定输入字段是禁用的。
被禁用的元素是不可用和不可点击的。
被禁用的元素不会被提交。
size 属性规定输入字段的尺寸（以字符计）。
maxlength 属性规定输入字段允许的最大长度。
如设置 maxlength 属性，则输入控件不会接受超过所允许数的字符。
该属性不会提供任何反馈。如果需要提醒用户，则必须编写 JavaScript 代码。
autocomplete 属性规定表单或输入字段是否应该自动完成。
novalidate 属性属于 <form> 属性。如果设置，则 novalidate 规定在提交表单时不对表单数据进行验证。
autofocus 属性是布尔属性。如果设置，则规定当页面加载时 <input> 元素应该自动获得焦点。
form 属性规定 <input> 元素所属的一个或多个表单。如需引用一个以上的表单，请使用空格分隔的表单 id 列表。
formaction 属性规定当提交表单时处理该输入控件的文件的 URL。formaction 属性覆盖 <form> 元素的 action 属性。
formaction 属性适用于 type="submit" 以及 type="image"。

<form action="/example/html5/demo_form.asp" method="get">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="提交" /><br />
<input type="submit" formaction="/example/html5/demo_admin.asp" value="以管理员身份提交" />
</form>

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

<form action="/example/html5/demo_post_enctype.asp" method="post">
  First name: <input type="text" name="fname" /><br />
<input type="submit" value="提交" />
<input type="submit" formenctype="multipart/form-data" value="以 Multipart/form-data 编码提交" />
</form>

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

<form action="/example/html5/demo_form.asp" method="get">
  First name: <input type="text" name="fname" /><br />
  Last name: <input type="text" name="lname" /><br />
<input type="submit" value="提交" />
<input type="submit" formmethod="post" formaction="/example/html5/demo_post.asp" value="使用 POST 提交" />
</form>

formnovalidate 属性是布尔属性。
如果设置，则规定在提交表单时不对元素进行验证。
formnovalidate 属性覆盖元素的 novalidate 属性。
formnovalidate 属性可用于 type="submit"。
与novalidate功能相同。

<form action="/example/html5/demo_form.asp" method="get">
E-mail: <input type="email" name="userid" /><br />
<input type="submit" value="提交" /><br />
<input type="submit" formnovalidate="formnovalidate" value="进行没有验证的提交" />
</form>

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

<form action="/example/html5/demo_form.asp" method="get">
  First name: <input type="text" name="fname" /><br />
  Last name: <input type="text" name="lname" /><br />
<input type="submit" value="提交" />
<input type="submit" formtarget="_blank" value="提交到新窗口/选项卡" />
</form>

height 和 width 属性规定 <input> 元素的高度和宽度。
height 和 width 属性仅用于 <input type="image">。
请始终规定图像的尺寸。如果浏览器不清楚图像尺寸，则页面会在图像加载时闪烁。
min 和 max 属性规定 <input> 元素的最小值和最大值。
multiple 属性是布尔属性。
如果设置，则规定允许用户在元素中输入一个以上的值。
multiple 属性适用于以下输入类型：email 和 file。

<form action="/example/html5/demo_form.asp" method="get">
选择图片：<input type="file" name="img" multiple="multiple" />
<input type="submit" />
</form>

pattern 属性规定用于检查元素值的正则表达式。

<form action="/example/html5/demo_form.asp" method="get">
国家代码：<input type="text" name="country_code" pattern="[A-z]{3}"
title="三个字母的国家代码" />
<input type="submit" />
</form>

placeholder 属性规定用以描述输入字段预期值的提示（样本值或有关格式的简短描述）。
该提示会在用户输入值之前显示在输入字段中。
required 属性是布尔属性。
如果设置，则规定在提交表单之前必须填写输入字段。
step 属性规定元素的合法数字间隔。
step 属性可与 max 以及 min 属性一同使用，来创建合法值的范围。

<form action="/example/html5/demo_form.asp" method="get">
<input type="number" name="points" step="3" />
<input type="submit" />
</form>

posted @ 2021-06-24 09:41 暗鸦08 阅读(89) 评论(0) 收藏举报

刷新页面返回顶部

暗鸦08

个人自学前端5-HTML标签3

表单

HTML 表单元素

select 元素（下拉列表）

textarea

button

datalist

keygen

output

HTML 输入类型

text

password

submit

radio

checkbox

button

number

date

color

range

month

week

time

datetime

datetime-local

email

search

tel

url

HTML Input 属性

公告