1

jikexueyuanwiki · Jan 8, 2015 · 0bfec93 · 0bfec93
1 parent 9436004
commit 0bfec93
Show file tree

Hide file tree

Showing 33 changed files with 815 additions and 4 deletions.
diff --git a/TOC.md b/TOC.md
@@ -53,7 +53,20 @@
   * [表单元素：datalist](form_datalist.md)
   * [表单元素：keygen](form_keygen.md)
   * [表单元素：output](form_output.md)
-  * [](.md)
-  * [](.md)
-  * [](.md)
-  * [](.md) 
+  * [表单属性：autocomplete](form_autocomplete.md)
+  * [表单属性：novalidate](form_novalidate.md)
+  * [新的input属性：autofocus](form_autocomplete.md)
+  * [新的input属性：form](form_form.md) 
+  * [新的input属性：formaction](form_formaction.md) 
+  * [新的input属性：formenctype](form_formenctype.md) 
+  * [新的input属性：formmethod](form_formmethod.md) 
+  * [新的input属性：formnovalidate](form_formnovalidate.md) 
+  * [新的input属性：formtarget](form_formtarget.md) 
+  * [新的input属性：height 和 width ](form_height_width.md) 
+  * [新的input属性：list](form_list.md) 
+  * [新的input属性：min 和 max](form_min_max.md)  
+  * [新的input属性：multiple](form_multiple.md) 
+  * [新的input属性：pattern](form_pattern.md) 
+  * [新的input属性：placeholder](form_placeholder.md)  
+  * [新的input属性：required](form_required.md) 
+  * [新的input属性：step](form_step.md) 
diff --git a/form_autocomplete.md b/form_autocomplete.md
@@ -0,0 +1,29 @@
+# 表单属性：autocomplete
+
+autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。
+
+当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。
+
+> 提示: autocomplete 属性有可能在 form元素中是开启的，而在input元素中是关闭的。
+> 注意: autocomplete 适用于 <form> 标签，以及以下类型的 <input> 标签：text, search, url, telephone, email, password, datepickers, range 以及 color。
+
+例：
+
+```javascript
+<!DOCTYPE html>
+<html>
+<body>
+
+<form action="demo-form.php" 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>注意 form的 autocomplete属性为 "on"（开），但是e-mail自动为“off”（关）。</p>
+
+</body>
+</html>
+```
diff --git a/form_autofocus.md b/form_autofocus.md
@@ -0,0 +1,21 @@
+# 新的input属性：autofocus
+
+autofocus 属性是一个 boolean 属性，规定在页面加载时，域自动地获得焦点。
+
+例：
+
+```javascript
+<!DOCTYPE html>
+<html>
+<body>
+
+<form action="demo-form.php">
+First name: <input type="text" name="fname" autofocus><br>
+Last name: <input type="text" name="lname"><br>
+<input type="submit">
+</form>
+<p><strong>注意：</strong> Internet Explorer 9及更早IE版本不支持input标签的 autofocus 属性。</p>
+
+</body>
+</html>
+```
diff --git a/form_datalist.md b/form_datalist.md
@@ -0,0 +1,28 @@
+# 表单元素：datalist
+
+datalist 元素规定输入域的选项列表。
+
+列表是通过 datalist 内的 option 元素创建的。
+
+如需把 datalist 绑定到输入域，请用输入域的 list 属性引用 datalist 的 id：
+
+例：
+
+```javascript
+<!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="jikexueyuan" value="http://www.jikexueyuan.com" />
+<option label="Google" value="http://www.google.com" />
+<option label="Microsoft" value="http://www.microsoft.com" />
+</datalist>
+<input type="submit" />
+</form>
+
+</body>
+</html>
+``
diff --git a/form_date_pickers.md b/form_date_pickers.md
@@ -0,0 +1,31 @@
+# Input输入类型：Date Pickers（日期选择器）
+
+HTML5 拥有多个可供选取日期和时间的新输入类型：
+
+date - 选取日、月、年
+
+month - 选取月、年
+
+week - 选取周和年
+
+time - 选取时间（小时和分钟）
+
+datetime - 选取时间、日、月、年（UTC 时间）
+
+datetime-local - 选取时间、日、月、年（本地时间）
+
+例：
+
+```javascript
+<!DOCTYPE HTML>
+<html>
+<body>
+
+<form action="/example/html5/demo_form.asp" method="get">
+Date: <input type="date" name="user_date" />
+<input type="submit" />
+</form>
+
+</body>
+</html>
+```
diff --git a/form_email.md b/form_email.md
@@ -0,0 +1,21 @@
+# input输入类型：email
+
+email 类型用于应该包含 e-mail 地址的输入域。
+
+在提交表单时，会自动验证 email 域的值。
+
+例：
+
+```javascript
+<!DOCTYPE HTML>
+<html>
+<body>
+
+<form action="/example/html5/demo_form.asp" method="get">
+E-mail: <input type="email" name="user_email" /><br />
+<input type="submit" />
+</form>
+
+</body>
+</html>
+```
diff --git a/form_form.md b/form_form.md
@@ -0,0 +1,27 @@
+# 新的input属性：form
+
+form 属性规定输入域所属的一个或多个表单。
+
+> 提示:如需引用一个以上的表单，请使用空格分隔的列表。
+
+例：
+
+```javascript
+<!DOCTYPE html>
+<html>
+<body>
+
+<form action="demo-form.php" id="form1">
+First name: <input type="text" name="fname"><br>
+<input type="submit" value="Submit">
+</form>
+
+<p> "Last name" 字段没有在form表单之内，但它也是form表单的一部分。</p>
+
+Last name: <input type="text" name="lname" form="form1">
+
+<p><b>注意:</b> IE不支持form属性</p>
+
+</body>
+</html>
+```
diff --git a/form_formaction.md b/form_formaction.md
@@ -0,0 +1,24 @@
+# 新的input属性：formaction
+
+The formaction 属性用于描述表单提交的URL地址，会覆盖<form> 元素中的action属性.
+
+> 注: The formaction 属性用于 type="submit" 和 type="image".
+
+例：
+
+```javascript
+<!DOCTYPE html>
+<html>
+<body>
+
+<form action="demo-form.php">
+First name: <input type="text" name="fname"><br>
+Last name: <input type="text" name="lname"><br>
+<input type="submit" value="Submit"><br>
+<input type="submit" formaction="demo-admin.php" value="Submit as admin">
+</form>
+<p><strong>注意：</strong> Internet Explorer 9及更早IE版本不支持input标签的 formaction 属性。</p>
+
+</body>
+</html>
+```
diff --git a/form_formenctype.md b/form_formenctype.md
@@ -0,0 +1,26 @@
+# 新的input属性：formenctype
+
+formenctype 属性描述了表单提交到服务器的数据编码 (只对form表单中 method="post" 表单)
+
+formenctype 属性覆盖 form 元素的 enctype 属性。
+
+主要: 该属性与 type="submit" 和 type="image" 配合使用。
+
+例：
+
+```javascript
+<!DOCTYPE html>
+<html>
+<body>
+
+<form action="demo-post-enctype.php" 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>
+
+<p><strong>注意：</strong> Internet Explorer 9及更早IE版本不支持input标签的 formenctype 属性。</p>
+
+</body>
+</html>
+```
diff --git a/form_formmethod.md b/form_formmethod.md
@@ -0,0 +1,25 @@
+# 新的input属性：formmethod
+
+formmethod 属性定义了表单提交的方式，它覆盖了`<form>`元素的的method 属性。
+
+>注: 该属性可以与 type="submit" 和 type="image" 配合使用。
+
+例：
+
+```javascript
+<!DOCTYPE html>
+<html>
+<body>
+
+<form action="demo-form.php" method="get">
+First name: <input type="text" name="fname"><br>
+Last name: <input type="text" name="lname"><br>
+<input type="submit" value="Submit">
+<input type="submit" formmethod="post" formaction="demo-post.php" value="Submit using POST">
+</form>
+
+<p><strong>注：</strong> Internet Explorer 9及更早IE版本不支持input标签的 formmethod 属性。</p>
+
+</body>
+</html>
+```
diff --git a/form_formnovalidate.md b/form_formnovalidate.md
@@ -0,0 +1,27 @@
+# 新的input属性：formnovalidate
+
+novalidate 属性是一个 boolean 属性，它描述了 <input> 元素在表单提交时无需被验证。
+
+formnovalidate 属性会覆盖 <form> 元素的novalidate属性.
+
+> 注: formnovalidate 属性与type="submit一起使用
+
+例：
+
+```javascript
+<!DOCTYPE html>
+<html>
+<body>
+
+<form action="demo-form.php" method="get">
+First name: <input type="text" name="fname"><br>
+Last name: <input type="text" name="lname"><br>
+<input type="submit" value="Submit">
+<input type="submit" formmethod="post" formaction="demo-post.php" value="Submit using POST">
+</form>
+
+<p><strong>注意：</strong> Internet Explorer 9及更早IE版本不支持input标签的 formmethod 属性。</p>
+
+</body>
+</html>
+```
diff --git a/form_formtarget.md b/form_formtarget.md
@@ -0,0 +1,27 @@
+# 新的input属性：formtarget
+
+formtarget 属性指定一个名称或一个关键字来指明表单提交数据接收后的展示。
+
+The formtarget 属性覆盖 `<form>`元素的target属性.
+
+> 注: formtarget 属性与type="submit" 和 type="image"配合使用.
+
+例：
+
+```javascript
+<!DOCTYPE html>
+<html>
+<body>
+
+<form action="demo-form.php">
+First name: <input type="text" name="fname"><br>
+Last name: <input type="text" name="lname"><br>
+<input type="submit" value="Submit as normal">
+<input type="submit" formtarget="_blank" value="提交到一个新的页面上">
+</form>
+
+<p><strong>注意：</strong> Internet Explorer 9及更早IE版本不支持input标签的 formtarget 属性。</p>
+
+</body>
+</html>
+```
diff --git a/form_height_width.md b/form_height_width.md
@@ -0,0 +1,25 @@
+# 新的input属性：height 和 width 
+
+height 和 width 属性规定用于 image 类型的 `<input>` 标签的图像高度和宽度。
+
+> 注: height 和 width 属性只适用于 image 类型的`<input>` 标签。
+
+> 提示:图像通常会同时指定高度和宽度属性。如果图像设置高度和宽度，图像所需的空间 在加载页时会被保留。如果没有这些属性， 浏览器不知道图像的大小，并不能预留 适当的空间。图片在加载过程中会使页面布局效果改变 （尽管图片已加载）。
+
+例：
+
+```javascript
+<!DOCTYPE html>
+<html>
+<body>
+
+<form action="demo-form.php">
+First name: <input type="text" name="fname"><br>
+Last name: <input type="text" name="lname"><br>
+<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
+</form>
+
+
+</body>
+</html>
+```
diff --git a/form_intro.md b/form_intro.md
@@ -0,0 +1,12 @@
+# 表单
+
+## 概念
+表单在网页中主要负责数据采集功能。
+
+一个表单有三个基本组成部分： 
+
+- 表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 
+
+- 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 
+
+- 表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。w