zoukankan html css js c++ java

HTML5学习总结-05 HTML5表单

一 HTML5 新的类型

　　HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

email
url
number
range
Date pickers (date, month, week, time, datetime, datetime-local)
search
color

1 Input 类型 - email

　　email 类型用于应该包含 e-mail 地址的输入域。在提交表单时，会自动验证 email 域的值。

　　例子：

E-mail: <input type="email" name="user_email" />

提示：iPhone 中的 Safari 浏览器支持 email 输入类型，并通过改变触摸屏键盘来配合它（添加 @ 和 .com 选项），Android也同样适用。

2 Input 类型 - url

　　url 类型用于应该包含 URL 地址的输入域。在提交表单时，会自动验证 url 域的值。

　　例子：

Homepage: <input type="url" name="user_url" />

提示：iPhone 中的 Safari 浏览器支持 url 输入类型，并通过改变触摸屏键盘来配合它（添加 .com 选项）。

3 Input 类型 - number

　　number 类型用于应该包含数值的输入域。您还能够设定对所接受的数字的限定：

　　例子：

Points: <input type="number" name="points" min="1" max="10" />

　　number类型的属性列表：

属性	值	描述
max	number	规定允许的最大值
min	number	规定允许的最小值
step	number	规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）
value	number	规定默认值

4 Input 类型 - range

　　range 类型用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。还能够设定对所接受的数字的限定。

　　例子：

<input type="range" name="points" min="1" max="10" />

　　下面的属性来规定对数字类型的限定：

属性	值	描述
max	number	规定允许的最大值
min	number	规定允许的最小值
step	number	规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）
value	number	规定默认值

5 Input 类型 - Date Pickers（日期选择器）

　　HTML5 拥有多个可供选取日期和时间的新输入类型：

date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间（小时和分钟）
datetime - 选取时间、日、月、年（UTC 时间）
datetime-local - 选取时间、日、月、年（本地时间）

　　例子：

Date: <input type="date" name="user_date" />
Month: <input type="month" name="user_date" />
Week: <input type="week" name="user_date" />
Time: <input type="time" name="user_date" />
Date and time: <input type="datetime" name="user_date" />
Date and time: <input type="datetime-local" name="user_date" />

6 Input 类型 - search

　　search 类型用于搜索域，比如站点搜索或 Google 搜索。search 域显示为常规的文本域。
　　例子：

<input type=“search” name=“inputSearch” results=“n”  />

二 HTML5 表单元素

1 datalist 元素　　

　　datalist 元素规定输入域的选项列表。列表是通过 datalist 内的 option 元素创建的。如需把 datalist 绑定到输入域，请用输入域的 list 属性引用 datalist 的 id：

　　例子：

<!DOCTYPE HTML>
<html>
<body>

<form action="/example/html5/demo_form.asp" method="get">
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
    <option label="W3School" value="http://www.w3school.com.cn" />
    <option label="Google" value="http://www.google.com" />
    <option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
<input type="submit" />
</form>

</body>
</html>

提示：option 元素永远都要设置 value 属性。

2 output 元素

　　output 元素用于不同类型的输出，比如计算或脚本输出;

　　例子：

<!DOCTYPE HTML>
<html>

    <head>
        <meta charset="utf-8" />
        <script type="text/javascript">
            function resCalc() {
                numA = document.getElementById("num_a").value;
                numB = document.getElementById("num_b").value;
                document.getElementById("result").value = Number(numA) + Number(numB);
            }
        </script>
    </head>

    <body>
        <p>使用 output 元素的简易计算器：</p>
        <form onsubmit="return false">
            <input id="num_a" /> +
            <input id="num_b" /> =
            <output id="result"  ></output>
            <br />
            <button onclick="resCalc()"  >计算结果</button>
        </form>
    </body>
</html>

三 HTML5 表单属性

　　HTML5 的新的表单属性，主要是 <form> 和 <input> 元素的新属性。

1 新的 form 属性

1）autocomplete 属性
　　autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。autocomplete 适用于 <form> 标签，以及以下类型的 <input> 标签：text, search, url, telephone, email, password, datepickers, range 以及 color。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：
　　实例：

<!DOCTYPE HTML>
<html>
    <header>
        <meta charset="utf-8" />
    </header>

    <body>

        <form action="#" method="get">
            姓氏：<input type="text" name="LastName" value="" autocomplete="on" /><br />
            名字：<input type="text" name="FirstName" value="" autocomplete="off" /><br /> 
            <input type="submit" />
        </form>
    </body>

</html>

2) autofocus 属性
　　autofocus 属性规定在页面加载时，域自动地获得焦点。autofocus 属性适用于所有 <input> 标签的类型。

　　例子：

<!DOCTYPE HTML>
<html>
    <body>
        <form action="/example/html5/demo_form.asp" method="get">
             First Name: <input type="text" name="first_name"   />     <br />
             Last name: <input type="text" name="last_name" autofocus="autofocus" /><br />
             
            <input type="submit" />
        </form>

    </body>

</html>

3) form 属性
　　form 属性规定输入域所属的一个或多个表单。form 属性适用于所有 <input> 标签的类型。form 属性必须引用所属表单的 id.

　　例子：

<!DOCTYPE HTML>
<html>
<body>
<form action="/example/html5/demo_form.asp" method="get" id="user_form">
First name:<input type="text" name="fname" />
<input type="submit" />
</form>

<p>下面的输入域在 form 元素之外，但仍然是表单的一部分。</p>
Last name: <input type="text" name="lname" form="user_form" />

</body>
</html>

4)表单重写属性
　　表单重写属性（form override attributes）允许您重写 form 元素的某些属性设定。
　　表单重写属性有：

formaction - 重写表单的 action 属性
formmethod - 重写表单的 method 属性

　　注释：表单重写属性适用于以下类型的 <input> 标签：submit

　　例子：

<!DOCTYPE HTML>
<html>
<body>
<form action="/example/html5/demo_form.asp" method="get" id="user_form">
E-mail: <input type="email" name="userid" /><br />
<input type="submit" value="Submit" /><br />
<input type="submit" formaction="/example/html5/demo_admin.asp" value="Submit as admin" /><br />
</form>
</body>
</html>

5) list 属性

　　list 属性规定输入域的 datalist。datalist 是输入域的选项列表。
　　注释：list 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email, date pickers, number, range 以及 color。
　　例子：

Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3Schools" value="http://www.w3school.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

6）min、max 和 step 属性
　　min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。
　　max 属性规定输入域所允许的最大值。
　　min 属性规定输入域所允许的最小值。
　　step 属性为输入域规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）。
　　注释：min、max 和 step 属性适用于以下类型的 <input> 标签：date pickers、number 以及 range。
　　下面的例子显示一个数字域，该域接受介于 0 到 10 之间的值，且步进为 3（即合法的值为 0、3、6 和 9）：
　　例子：

Points: <input type="number" name="points" min="0" max="10" step="3" />

7）pattern 属性

　　pattern 属性规定用于验证 input 域的模式（pattern）。
　　模式（pattern）是正则表达式。您可以在我们的 JavaScript 教程中学习到有关正则表达式的内容。
　　注释：pattern 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password。
　　下面的例子显示了一个只能包含三个字母的文本域（不含数字及特殊字符）：

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

8）placeholder 属性
　　placeholder 属性提供一种提示（hint），描述输入域所期待的值。
　　注释：placeholder 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password。
　　提示（hint）会在输入域为空时显示出现，会在输入域获得焦点时消失：

<input type="search" name="user_search"  placeholder="Search W3School" />

9）required 属性
　　required 属性规定必须在提交之前填写输入域（不能为空）。
　　注释：required 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

Name: <input type="text" name="usr_name" required="required" />

10) enctype 属性

　　enctype 属性规定在将表单数据发送到服务器之前如何对其进行编码。
　　默认是对表单数据以 "application/x-www-form-urlencoded" 进行编码。这意味着在发送前对所有字符进行编码（把 "+" 转换为空格，把特殊字符转换为 ASCII 十六进制值）。

综合例子

<!DOCTYPE html >

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <meta charset="utf-8" />
        <style>
            * {
                margin: 0px;
                padding: 0px;
            }
            
            header,
            nav,
            article,
            aside,
            footer {
                border: 1px solid greenyellow;
                padding: 10px;
                //margin: 0px;
                
            }
            
            header{
                 1070px;
            }
            
            nav{
                float: left;
                 200px;
                height: 500px;
            }
            
            article{
                float: left;
                  500px;
                 height: 500px;
            }
            
            aside{
                float: left;
                 326px;
                 height: 500px;
            }
            
            footer{
                clear: both;    
                 1070px;
            }
            
        </style>

    </head>

    <body>
        <header>
            导航
        </header>
        <nav>菜单
        </nav>
        <article>
            内容</article>
        <aside>
            侧边栏</aside>
        <footer>
            尾部</footer>

    </body>

</html>

计算数据：

1092

-222
-522

内边框+ 内边距 22


外边框  12 * 4 = 48

1092 - 222 - 522 = 348

参考资料：

http://www.w3school.com.cn/html5/html_5_form_attributes.asp

http://www.w3school.com.cn/html5/att_form_enctype.asp

查看全文

相关阅读:
智器SmartQ T7实体店试用体验
 BI笔记之SSAS库Process的几种方案
 PowerTip of the Day from powershell.com上周汇总（八）
PowerTip of the Day2010071420100716 summary
PowerTip of the Day from powershell.com上周汇总（十）
PowerTip of the Day from powershell.com上周汇总（六）
重新整理Cellset转Datatable
自动加密web.config配置节批处理
 与DotNet数据对象结合的自定义数据对象设计 (二) 数据集合与DataTable
在VS2003中以ClassLibrary工程的方式管理Web工程.

原文地址：https://www.cnblogs.com/wangshuo1/p/5858724.html