css技巧

--accept （规定上传文件类型）

规定通过文件上传来提交的文件的类型

<form>
  <input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />
</form>

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

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

--autocomplete （是否记录历史输入）

启用自动完成功能的表单（是否记录输入值）

<form action="demo_form.asp" method="get" autocomplete="on">
  First name:<input type="text" name="fname" />
</form>

效果：

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

--autofocus （页面加载时获取焦点）

为当页面加载时文本输入框获得焦点

<form action="demo_form.asp">
  First name:<input type="text" name="fname" autofocus="autofocus" /><br />
  Last name: <input type="text" name="lname" /><br />
  <input type="submit" />
</form>

效果：

--checked （预选定）

带有一个预选定复选框的 HTML 表单

<form action="form_action.asp" method="get">
<input type="checkbox" name="vehicle" value="Car" checked="checked" /> I have a car
</form>

效果：

checked 属性规定在页面加载时应该被预先选定的 input 元素。
checked 属性 与 或 配合使用。
checked 属性也可以在页面加载后，通过 JavaScript 代码进行设置。

--disabled （禁用）

禁用输入字段的 HTML 表单

<form action="form_action.asp" method="get">
  <p>First name: <input type="text" name="fname" /></p>
  <p>Last name: <input type="text" name="lname" disabled="disabled" /></p>
  <input type="submit" value="Submit" />
</form>

效果：

--form （表单之外的输入字段）

位于表单之外的输入字段

Last name: <input type="text" name="lname" form="nameform" />

效果：

form 属性规定 input 元素所属的一个或多个表单。
form 属性的值必须是其所属表单的 id。
如需引用一个以上的表单，请使用空格分隔的列表。

--formaction （覆盖表单的 action 属性）

覆盖表单的 action 属性 。 适用于 type="submit" 和 type="image"

<form action="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="Submit" /><br />
  <input type="submit" formaction="demo_admin.asp" value="Submit as admin" />
</form>

效果：

--formmethod （覆盖表单的 method 属性）

覆盖了表单的 HTTP 方法

<form action="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="Submit" />
<input type="submit" formmethod="post" formaction="demo_post.asp" value="Submit" />
</form>

效果：

--formenctype （覆盖表单的 enctype 属性）

覆盖表单的 target 属性
带有两个提交按钮的表单（拥有有不同的编码方式）

<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" />
</form>

效果：

注：该属性与 type="submit" 和 type="image" 配合使用。

--formnovalidate （提交表单时不进行验证）

覆盖表单的 novalidate 属性，提交表单时不进行验证
带有两个提交按钮的表单（一个进行验证，另一个不验证）：

<form action="demo_form.asp" method="get">
E-mail: <input type="email" name="userid" /><br />
<input type="submit" value="Submit" /><br />
<input type="submit" formnovalidate="formnovalidate" value="Submit" />
</form>

效果：

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

--formtarget （提交到不同的目标窗口）

带有两个提交按钮的表单，会提交到不同的目标窗口显示：

<form action="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="Submit" />
<input type="submit" formtarget="_blank" value="Submit" />
</form>

效果：

--height （定义 input 字段的高度）

用图片作为提交按钮的表单：

<form action="demo_form.asp" method="get">
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="128" height="128"/>
</form>

效果：

提示：为图片指定高度和宽度是一个好习惯。如果设置了这些属性，当页面加载时会为图片预留需要的空间。而如果没有这些属性，则浏览器就无法了解图像的尺寸，也就无法为其预留合适的空间。情况是当页面和图片加载时，页面布局会发生变化。

--list （带有 datalist 的表单）

带有 datalist 的表单

<form action="demo_form.asp">
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3Schools" value="http://www.w3schools.com" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
<input type="submit" />
</form>

效果：

--max （规定输入字段的最大值）

带有指定范围的数字输入字段

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

效果：

注：max 和 min 属性适用于以下 类型：number, range, date, datetime, datetime-local, month, time 以及 week。

--maxlength （规定输入字段中的字符的最大长度）

下面这个 HTML 表单带有最大长度分别是 85 和 55 个字符的两个输入字段

<form action="form_action.asp" method="get">
  <p>Name: <input type="text" name="fullname" maxlength="85" /></p>
  <p>Email: <input type="text" name="email" maxlength="55" /></p>
  <input type="submit" value="Submit" />
</form>

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

--multiple（允许一个以上的值）

可接受多个值的文件上传字段

<form action="demo_form.asp" method="get">
  Select images: <input type="file" name="img" multiple="multiple" />
  <input type="submit" />
</form>

上传图片的时候可以多选

用法：multiple 属性规定输入字段可选择多个值。
如果使用该属性，则字段可接受多个值。
注释：multiple 属性使用欧冠与以下 类型：email 和 file。

--name （定义 input 元素的名称）

带有两个文本字段和一个提交按钮的 HTML 表单

<form action="form_action.asp" method="get">
  <p>Name: <input type="text" name="fullname" /></p>
  <p>Email: <input type="text" name="email" /></p>
  <input type="submit" value="Submit" />
</form>

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

--pattern（规定输入字段的值的模式或格式）

规定输入字段的值的模式或格式。
例如 pattern="[0-9]" 表示输入值必须是 0 与 9 之间的数字。
只能包含三个字母的文本字段（数字或特殊字符）

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

用法：pattern 属性规定用于验证输入字段的模式。
模式指的是正则表达式。您可以在我们的 JavaScript 教程中阅读到这方面的内容。
注释：pattern 属性适用于以下 <input> 类型：text, search, url, telephone, email 以及 password 。
提示：请使用标准的 "title" 属性来描述模式。

--placeholder （规定帮助用户填写输入字段的提示）

规定帮助用户填写输入字段的提示

<form action="demo_form.asp" method="get">
  <input type="search" name="user_search" placeholder="Search W3School" />
  <input type="submit" />
</form>

效果：

注：placeholder 属性提供可描述输入字段预期值的提示信息（hint）。
该提示会在输入字段为空时显示，并会在字段获得焦点时消失。
placeholder 属性适用于以下的 类型：text, search, url, telephone, email 以及 password。

--readonly（只读）

<form action="form_action.asp" method="get">
  Name:<input type="text" name="email" />
  Country:<input type="text" name="country" value="China" readonly="readonly" />
  <input type="submit" value="Submit" />
</form>

注：readonly 属性规定输入字段为只读。
只读字段是不能修改的。不过，用户仍然可以使用 tab 键切换到该字段，还可以选中或拷贝其文本。
readonly 属性可以防止用户对值进行修改，直到满足某些条件为止（比如选中了一个复选框）。然后，需要使用 JavaScript 消除 readonly 值，将输入字段切换到可编辑状态。
readonly 属性可与 <input type="text"> 或 <input type="password"> 配合使用。

--required （指示输入字段的值是必需的）

带有必填字段的表单

<form action="demo_form.asp" method="get">
  Name: <input type="text" name="usr_name" required="required" />
  <input type="submit" />
</form>

效果：

注：required 属性适用于以下 类型：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

--step （规定输入字的的合法数字间隔）

带有合法数字间隔的数字输入控件

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

效果：

注：step、max 以及 min 属性适用于以下 类型：number, range, date, datetime, datetime-local, month, time 以及 week。

--size（定义输入字段的宽度）

<form action="form_action.asp" method="get">
  <p>Email: <input type="text" name="email" size="35" /></p>
  <p>PIN: <input type="text" name="pin" maxlength="18" size="18" /></p>
  <input type="submit" value="Submit" />
</form>

效果：

--width（定义 input 字段的宽度）

定义 input 字段的宽度。（适用于 type="image"）

<form action="demo_form.asp" method="get">
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="128" height="128"/>
</form>

width 属性只适用于 ，它规定 image input 的宽度。
提示：为图片指定高度和宽度是一个好习惯。如果设置了这些属性，当页面加载时会为图片预留需要的空间。而如果没有这些属性，则浏览器就无法了解图像的尺寸，也就无法为其预留合适的空间。情况是当页面和图片加载时，页面布局会发生变化。