HTML学习笔记（3）
- 一、HTML 统一资源定位器（URL）
- 二、HTML 颜色
- 三、HTML 文档类型
- 四、速查
- 五、HTML 表单
一、HTML 统一资源定位器（URL）
- URL - Uniform Resource Locator
- URL 是网页的地址，比如 http://www.w3school.com.cn。 也被称为网址。
- Web 浏览器通过 URL 从 web 服务器请求页面。
- URL 可以由单词组成，比如
“w3school.com.cn”。或者是因特网协议（IP）地址：192.168.1.253。大多数人在网上冲浪时，会键入网址的域名，因为名称比数字容易记忆。
1.属性：
-
当您点击 HTML 页面中的某个链接时，对应的
<a>标签指向万维网上的一个地址。 -
统一资源定位器（URL）用于定位万维网上的文档（或其他数据）。
网址（比如 http://www.w3school.com.cn/html/index.asp），遵守以下的语法规则：
scheme://host.domain:port/path/filename
解释：
- scheme - 定义因特网服务的类型。最常见的类型是 http
- host - 定义域主机（http 的默认主机是 www）
- domain - 定义因特网域名，比如 w3school.com.cn
- :port - 定义主机上的端口号（http 的默认端口号是 80）
- path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
- filename - 定义文档/资源的名称
2.URL Schemes
以下是其中一些最流行的 scheme：
| Scheme | 访问 | 用于… |
|---|---|---|
| http | 超文本传输协议 | 以 http:// 开头的普通网页。不加密。 |
| https | 安全超文本传输协议 | 安全网页。加密所有信息交换。 |
| ftp | 文件传输协议 | 用于将文件下载或上传至网站。 |
| file | 您计算机上的文件。 |
3. URL 字符编码
- URL 编码会将字符转换为可通过因特网传输的格式。
- URL 只能使用 ASCII 字符集来通过因特网进行发送。
- 由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。
- URL 编码使用 “%” 其后跟随两位的十六进制数来替换非 ASCII 字符。
- URL 不能包含空格。URL 编码通常使用 + 来替换空格。
URL 编码示例
| 字符 | URL 编码 |
|---|---|
| € | %80 |
| £ | %A3 |
| © | %A9 |
| ® | %AE |
| À | %C0 |
| Á | %C1 |
| Â | %C2 |
| Ã | %C3 |
| Ä | %C4 |
| Å | %C5 |
如需完整的 URL 编码参考，请访问URL 编码参考手册 。
二、HTML 颜色
颜色由红色、绿色、蓝色混合而成。
1. 颜色值
颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。
每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。
这个表格给出了由三种颜色混合而成的具体效果：
2. 颜色名
大多数的浏览器都支持颜色名集合。
提示：仅仅有 16 种颜色名被 W3C 的 HTML4.0 标准所支持。它们是：aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow。
如果需要使用其它的颜色，需要使用十六进制的颜色值。
如需查看更多颜色名的十六进制颜色值及各种搭配测试效果，请访问颜色名 。
3. Web安全色（216 跨平台色）
数年以前，当大多数计算机仅支持 256 种颜色的时候，一系列 216 种 Web 安全色作为 Web 标准被建议使用。其中的原因是，微软和 Mac 操作系统使用了 40 种不同的保留的固定系统颜色（双方大约各使用 20 种）。
我们不确定如今这么做的意义有多大，因为越来越多的计算机有能力处理数百万种颜色，不过做选择还是你自己。
三、HTML 文档类型<!DOCTYPE>
<!DOCTYPE> 声明 帮助浏览器正确地显示网页。
Web 世界中存在许多不同的文档。了解文档类型，浏览器正确显示文档。
1.<!DOCTYPE> 的用处：
- HTML 有多个不同的版本，知道页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。
- 不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。
常用的声明
2.常用的声明
HTML5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
如需完整的文档类型声明列表，请访问DOCTYPE 参考手册 。
四、速查
1.HTML Basic Document
<html>
<head>
<title>Document name goes here</title>
</head>
<body>
Visible text goes here
</body>
</html>
2.Text Elements
<p>This is a paragraph</p>
<br> (line break)
<hr> (horizontal rule)
<pre>This text is preformatted</pre>
3.Logical Styles
<em>This text is emphasized</em>
<strong>This text is strong</strong>
<code>This is some computer code</code>
4.Physical Styles
<b>This text is bold</b>
<i>This text is italic</i>
5.Links, Anchors, and Image Elements
<a href="http://www.example.com/">This is a Link</a>
<a href="http://www.example.com/"><img src="URL"
alt="Alternate Text"></a>
<a href="mailto:webmaster@example.com">Send e-mail</a>A named anchor:
<a name="tips">Useful Tips Section</a>
<a href="#tips">Jump to the Useful Tips Section</a>
6.Unordered list
<ul>
<li>First item</li>
<li>Next item</li>
</ul>
7.Ordered list
<ol>
<li>First item</li>
<li>Next item</li>
</ol>
8.Definition list
<dl>
<dt>First term</dt>
<dd>Definition</dd>
<dt>Next term</dt>
<dd>Definition</dd>
</dl>
9.Tables
<table border="1">
<tr>
<th>someheader</th>
<th>someheader</th>
</tr>
<tr>
<td>sometext</td>
<td>sometext</td>
</tr>
</table>
10.Frames
<frameset cols="25%,75%">
<frame src="page1.htm">
<frame src="page2.htm">
</frameset>
11.Forms
<form action="http://www.example.com/test.asp" method="post/get">
<input type="text" name="lastname"
value="Nixon" size="30" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit">
<input type="reset">
<input type="hidden">
<select>
<option>Apples
<option selected>Bananas
<option>Cherries
</select>
<textarea name="Comment" rows="60"
cols="20"></textarea>
</form>
12.Entities
< is the same as <
> is the same as >
© is the same as ©
13.Other Elements
<!-- This is a comment -->
<blockquote>
Text quoted from some source.
</blockquote>
<address>
Address 1<br>
Address 2<br>
City<br>
</address>
五、HTML 表单
用于搜集不同类型的用户输入。
1.表单元素
- HTML 表单包含表单元素。
- 表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
（1）< input > 元素
- 最重要的表单元素是
<input>元素。 <input>元素根据不同的 type 属性，可以变化为多种形态。
注释：下一小节讲解所有 HTML 输入类型。
（2）< select > 元素和< option > 元素（下拉列表）
（2.1）< select > 元素
注：form action="/demo/demo_form.asp"，
action 属性规定当提交表单时,向何处发送表单数据。
<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit">
</form>
</body>
</html>
提交查询后：
（2.2）< option > 元素
定义待选择的选项。
列表通常会把首个选项显示为被选选项，能够通过添加 selected 属性来定义预定义选项。
<p>您可以通过 selected 属性预选择某些选项。</p>
<form action="/demo/demo_form.asp">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit">
</form>
（3）< textarea > 元素
定义多行输入字段（文本域）：
<html>
<body>
<textarea name="message" rows="10" cols="50" style="background-color:pink;color:red;">
The cat was playing in the garden.
</textarea>
</body>
</html>
（4）< button > 元素
定义可点击的按钮：
<button type="button" onclick="alert('Hello World!')">点击我！</button>
（5）HTML5 表单元素
HTML5 增加了如下表单元素：
<datalist>
<keygen>
<output>
注释：默认地，浏览器不会显示未知元素。新元素不会破坏您的页面。
HTML5 <datalist> 元素
<datalist> 元素为 <input> 元素规定预定义选项列表。
用户会在他们输入数据时看到预定义选项的下拉列表。
<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。
<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
<p><b>注释：</b>Safari 或 IE9（以及更早的版本）不支持 datalist 标签。</p>
</body>
</html>
2.< input >元素输入类型
（1）输入类型：text 文本
<input type="text"> 定义供文本输入的单行输入字段：
<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
<br><br>
<input type="submit">
</form>
<p>请注意表单本身是不可见的。</p>
<p>同时请注意文本字段的默认宽度是 20 个字符。</p>
</body>
</html>
（2）输入类型：password 密码字段
<input type="password"> 定义密码字段：
<form action="">
User name:<br>
<input type="text" name="userid">
<br>
User password:<br>
<input type="password" name="psw">
</form>
<p>密码字段中的字符被掩码（显示为星号或圆点）。</p>
（3）输入类型：submit 表单处理程序
<input type="submit">定义提交表单数据至表单处理程序的按钮。- 表单处理程序（form-handler）通常是包含处理输入数据的脚本的服务器页面。
- 在表单的 action 属性中规定表单处理程序（form-handler）：
<form action="/demo/demo_form.asp">
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">
</form>
<p>如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。</p>
（4）输入类型： radio 单选按钮
<input type="radio"> 定义单选按钮。
允许用户在有限数量的选项中只能选择1个选项。
<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>
（5）输入类型： checkbox 复选框
<input type="checkbox"> 定义复选框。
复选框允许用户在有限数量的选项中选择零个或多个选项。
<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>
（6）输入类型： button 按钮
<input type="button> 定义按钮。
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
（7）HTML5 输入类型
HTML5 增加了多个新的输入类型：
color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week
注释：老式 web 浏览器不支持的输入类型，会被视为输入类型 text。
（8）输入类型：number 数字值
<input type="number"> 用于应该包含数字值的输入字段。
能够对数字做出限制。
根据浏览器支持，限制可应用到输入字段。
<p>
根据浏览器支持：<br>
数值约束会应用到输入字段中。
</p>
<form action="/demo/demo_form.asp">
数量（1 到 5 之间）：
<input type="number" name="quantity" min="1" max="5">
<input type="submit">
</form>
<p><b>注释：</b>IE9 及早期版本不支持 type="number"。</p>
（9）输入限制
这里列出了一些常用的输入限制（其中一些是 HTML5 中新增的）：
| 属性 | 描述 |
|---|---|
| disabled | 规定输入字段应该被禁用。 |
| max | 规定输入字段的最大值。 |
| maxlength | 规定输入字段的最大字符数。 |
| min | 规定输入字段的最小值。 |
| pattern | 规定通过其检查输入值的正则表达式。 |
| readonly | 规定输入字段为只读（无法修改）。 |
| required | 规定输入字段是必需的（必需填写）。 |
| size | 规定输入字段的宽度（以字符计）。 |
| step | 规定输入字段的合法数字间隔。 |
| value | 规定输入字段的默认值。 |
代码：
<form action="action_page.php">
Quantity:
<input type="number" name="points"
min="0" max="100" step="10" value="30">
<input type="submit">
</form>
<p><b>Note:</b>type="number" is not supported in IE9 and earlier.
（10）输入类型：range
<input type="range"> 用于应该包含一定范围内的值的输入字段。
能够使用如下属性来规定限制：min、max、step、value。
根据浏览器支持，输入字段能够显示为滑块控件。
IE9 及早期版本不支持 type=“range”。
<form action="/demo/demo_form.asp" method="get">
Points:
<input type="range" name="points" min="0" max="10">
<input type="submit">
</form>
（11）输入类型：color
<input type="color"> 用于应该包含颜色的输入字段。
根据浏览器支持，颜色选择器会出现输入字段中。
type=“color” is not supported in Internet Explorer.
<form action="action_page.php">
Select your favorite color:
<input type="color" name="favcolor" value="#ff0000">
<input type="submit">
</form>
（12）输入类型：时间日期类
代码：
<p>
根据浏览器支持：<br>
当您填写输入字段时会弹出日期选择器。
</p>
<h4>(1)日期输入：</h4>
<form>
Birthday:
<input type="date" name="bday">
</form>
<h4>(2)限制日期输入：</h4>
<form>
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31"><br>
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02"><br>
</form>
<h4>(3)月份输入：</h4>
<form>
Birthday (month and year):
<input type="month" name="bdaymonth">
</form>
<h4>(4)week周输入：</h4>
<form>
Select a week:
<input type="week" name="week_year">
</form>
<h4>(6)time时间输入：</h4>
<form>
Select a time:
<input type="time" name="usr_time">
</form>
<h4>(7)datetime时间日期：</h4>
<form >
生日（日期和时间）：
<input type="datetime" name="bdaytime">
<h4>(8)datetime时间日期：</h4>
<form action="/demo/demo_form.asp">
生日（日期和时间）：
<input type="datetime-local" name="bdaytime">
<input type="submit" value="Send">
</form>
1. 输入类型：date
<input type="date"> 用于应该包含日期的输入字段。
IFirefox 或者 Internet Explorer11 以及更早版本不支持 type=“date”。
2.输入类型：month
<input type="month"> 允许用户选择月份和年份。
Firefox 或者 Internet Explorer 11 以及更早版本不支持
type=“month”。
3.输入类型：week
<input type="week"> 允许用户选择周和年。
根据浏览器支持，日期选择器会出现输入字段中。
Internet Explorer 不支持 type=“week”。
4. 输入类型：time
<input type="time"> 允许用户选择时间（无时区）。
Firefox 或者Internet Explorer 11 以及更早版本不支持 type=“time”。
5. 输入类型：datetime
<input type="datetime"> 允许用户选择日期和时间（有时区）。
Chrome、Firefox 或 Internet Explorer 不支持 type=“datetime”。
6. 输入类型：datetime-local
<input type="datetime-local"> 允许用户选择日期和时间（无时区）。
Firefox 或者
Internet Explorer 不支持 type=“datetime-local”。
<h4>(8)datetime时间日期：</h4>
<form action="/demo/demo_form.asp">
生日（日期和时间）：
<input type="datetime-local" name="bdaytime">
<input type="submit" value="Send">
</form>
（13）输入类型：email
<input type="email"> 用于应该包含电子邮件地址的输入字段。
根据浏览器支持，能够在被提交时自动对电子邮件地址进行验证。
某些智能手机会识别 email 类型，并在键盘增加 “.com” 以匹配电子邮件输入。
IE9 及更早版本不支持 type=“email”。
<form action="/demo/demo_form.asp">
E-mail:
<input type="email" name="email">
<input type="submit">
</form>
（14）输入类型：search
<input type="search"> 用于搜索字段（搜索字段的表现类似常规文本字段）。
<form >
搜索谷歌：
<input type="search" name="googlesearch">
</form>
（15）输入类型：tel
<input type="tel"> 用于应该包含电话号码的输入字段。
Safari 8 及更新版本支持 type=“tel”。
<form>
Telephone:
<input type="tel" name="usrtel">
</form>
（16）输入类型：url
<input type="url"> 用于应该包含 URL 地址的输入字段。
根据浏览器支持，在提交时能够自动验证 url 字段。
某些智能手机识别 url 类型，并向键盘添加 “.com” 以匹配 url 输入。
IE9 及其更早版本不支持 type=“url”。
<form action="action_page.php">
请添加您的首页：
<input type="url" name="homepage">
<input type="submit">
</form>
3.< input >输入属性
（1）value 属性
value 属性规定输入字段的初始值：
<h4>（1）value设置输入框初始值：</h4>
<form action="">
First name:<br>
<input type="text" name="firstname" value="John">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
（2）readonly 属性
readonly 属性规定输入字段为只读（不能修改）：
readonly 属性不需要值。它等同于 readonly=“readonly”。
<h4>（2）readonly设置输入框只读：</h4>
<form action="">
First name:<br>
<input type="text" name="firstname" value ="John" readonly>
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
（3）disabled 属性
disabled 属性规定输入字段是禁用的。
被禁用的元素是不可用和不可点击的。
被禁用的元素不会被提交。
disabled 属性不需要值。它等同于 disabled=“disabled”。
<h4>（3）disabled设置输入框禁用：</h4>
<form >
First name:<br>
<input type="text" name="firstname" value ="John" disabled>
<br>
Last name:<br>
<input type="text" name="lastname">
</form>>
（4）size 属性
size 属性规定输入字段的尺寸（以字符计）：
<h4>（4）size规定输入字段的尺寸（以字符计）：</h4>
<form >
First name:<br>
<input type="text" name="firstname" value ="John" size="40">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
（5）maxlength 属性
- maxlength 属性规定输入字段允许的最大长度：
- 如设置 maxlength 属性，则输入控件不会接受超过所允许数的字符。
- 该属性不会提供任何反馈。如果需要提醒用户，则必须编写 JavaScript 代码。
- 输入限制并非万无一失。JavaScript提供了很多方法来增加非法输入。如需安全地限制输入，则接受者（服务器）必须同时对限制进行检查。
<h4>（5）maxlength规定输入字段允许的最大长度：</h4>
<form action="">
First name:<br>
<input type="text" name="firstname" maxlength="10">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
4.HTML5 < input >输入属性
- HTML5 为
<input>增加了如下属性：
| autocomplete | 规定表单或输入字段是否应该自动完成。当自动完成开启，浏览器会基于用户之前的输入值自动填写值。适用于 <form> 以及如下 <input> 类型：text、search、url、tel、email、password、datepickers、range 以及 color。 | <form action="action_page.php" autocomplete="on">…E-mail: <input type="email" name="email" autocomplete="off"><br> |
| autofocus | 规定当页面加载时 <input> 元素应该自动获得焦点。是布尔属性。 | First name:<input type="text" name="fname" autofocus> |
| form | 规定 <input> 元素所属的一个或多个表单。 | <form action="action_page.php" id="form1"> ...... Last name: <input type="text" name="lname" form="form1"> |
| formaction | 规定当提交表单时处理该输入控件的文件的 URL。覆盖 <form> 元素的 action 属性。适用于 type=“submit” 以及 type=“image”。 | <input type=“submit” formaction=“demo_admin.asp” |
| formenctype | 规定当把表单数据（form-data）提交至服务器时如何对其进行编码（仅针对 method=“post” 的表单）。覆盖 <form> 元素的 enctype 属性。适用于 type=“submit” 以及 type=“image”。 | <input type="submit" formenctype="multipart/form-data" value="Submit as Multipart/form-data"> |
| formmethod | 定义用以向 action URL 发送表单数据（form-data）的 HTTP 方法。覆盖 <form> 元素的 method 属性。适用于 type=“submit” 以及 type=“image”。 | <form action="action_page.php" method="get"> …<input type="submit" formmethod="post" formaction="demo_post.asp" value="sup"> |
| formnovalidate | 规定在提交表单时不对 <input> 元素进行验证.是布尔属性。覆盖 <form> 元素的 novalidate 属性。可用于 type=“submit”。 | <input type="submit" formnovalidate value="Submit without validation"> |
| formtarget | 规定的名称或关键词指示提交表单后在何处显示接收到的响应。覆盖 <form> 元素的 target 属性。可与 type=“submit” 和 type=“image” 使用。 | <input type="submit" formtarget="_blank" value="Stw"> |
| height 和 width | 规定 <input> 元素的高度和宽度。请始终规定图像的尺寸。否则页面会在图像加载时闪烁。 | 仅用于<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48"> |
| list | 引用的 <datalist> 元素中包含了 <input> 元素的预定义选项。 | <input list="browsers">....<datalist id="browsers">....</datalist> |
| min 和 max | 规定 <input> 元素的最小值和最大值。 | 适用于如需输入类型：number、range、date、datetime、datetime-local、month、time 以及 week。 |
| multiple | 规定允许用户在 <input> 元素中输入一个以上的值。是布尔属性。适用于email 和 file。 | Select images: <input type="file" name="img" multiple> |
| pattern (regexp) | 规定用于检查 <input> 元素值的正则表达式。使用全局的 title 属性对模式进行描述.适用于text、search、url、tel、email、and password。 | <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code"> |
| placeholder | 规定用以描述输入字段预期值的提示（样本值或有关格式的简短描述）。该提示会在用户输入值之前显示在输入字段中。适用于text、search、url、tel、email 以及 password。 | <input type="text" name="fname" placeholder="请输入First name"> |
| required | 规定在提交表单之前必须填写输入字段。是布尔属性。适用于text、search、url、tel、email、password、date pickers、number、checkbox、radio、and file. | Username: <input type="text" name="usrname" required> |
| step | 规定 <input> 元素的合法数字间隔。可与 max 以及 min 属性一同使用，来创建合法值的范围。适用于number、range、date、datetime、datetime-local、month、time 以及 week。 | <input type="number" name="points" step="3"> |
- 并为
<form>增加如需属性：
| autocomplete | ||
| novalidate | 在提交表单时不对表单数据进行验证。属于 <form> 属性。 | <form action="url" novalidate> |
（1）autocomplete 属性
autocomplete 属性规定表单或输入字段是否应该自动完成。
当自动完成开启，浏览器会基于用户之前的输入值自动填写值。
提示：您可以把表单的 autocomplete 设置为 on，同时把特定的输入字段设置为 off，反之亦然。
autocomplete 属性适用于 <form> 以及如下 <input> 类型：text、search、url、tel、email、password、datepickers、range 以及 color。
<h4>1.</h4>
<form action="/example/html5/demo_form.asp" method="get" autocomplete="on">
First name:<input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>
<p>填写并提交表单，然后重新加载该页面，看看自动完成功能是如何工作的。</p>
<p>注意，表单的自动完成功能是打开的，但是 e-mail 字段的自动完成功能是关闭的。</p>
（2）novalidate 属性
novalidate 属性属于 <form> 属性。
如果设置，则 novalidate 规定在提交表单时不对表单数据进行验证。
<h4>2.</h4>
<p>指示表单在被提交时不进行验证：</p>
<form action="/example/html5/demo_form.asp" method="get" novalidate="novalidate">
E-mail: <input type="email" name="user_email" />
<input type="submit" />
</form>
<p>注意， e-mail 字段不验证是否为email格式，（1）就验证了。</p>
（3）autofocus 属性
autofocus 属性是布尔属性。
如果设置，则规定当页面加载时 <input> 元素应该自动获得焦点。
Internet Explorer 9 以及更早的版本不支持 input 标签的 autofocus 属性。
First name:<input type="text" name="fname" autofocus>
（4）form 属性
form 属性规定 <input> 元素所属的一个或多个表单。
提示：如需引用一个以上的表单，请使用空格分隔的表单 id 列表。
<h4>4.</h4>
<form action="/example/html5/demo_form.asp" method="get" id="form1">
First name: <input type="text" name="fname" /><br />
<input type="submit" value="提交" />
</form>
<p>下面的 "Last name" 字段位于 form 元素之外，但仍然是表单的一部分。</p>
Last name: <input type="text" name="lname" form="form1" />
（5）formaction 属性
formaction 属性规定当提交表单时处理该输入控件的文件的 URL。
formaction 属性覆盖 <form> 元素的 action 属性。
formaction 属性适用于 type=“submit” 以及 type=“image”。
代码：
拥有两个提交按钮并对应两个不同动作的 HTML 表单：
<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>
（6）formenctype 属性
formenctype 属性规定当把表单数据（form-data）提交至服务器时如何对其进行编码（仅针对 method=“post” 的表单）。
formenctype 属性覆盖 <form> 元素的 enctype 属性。
formenctype 属性适用于 type=“submit” 以及 type=“image”。
代码：
发送默认编码以及编码为 “multipart/form-data”（第二个提交按钮）的表单数据（form-data）：
<form action="demo_post_enctype.asp" method="post">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
<input type="submit" formenctype="multipart/form-data"
value="Submit as Multipart/form-data">
</form>
（7）formmethod 属性
formmethod 属性定义用以向 action URL 发送表单数据（form-data）的 HTTP 方法。
formmethod 属性覆盖 元素的 method 属性。
formmethod 属性适用于 type=“submit” 以及 type=“image”。
代码：
第二个提交按钮覆盖表单的 HTTP 方法：
<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>
扫一扫
8995
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
