input 属性及值，input全部属性及值，属性、值，全部属性，form表单

示例1.accept属性—可指定文件类型2.align属性—它规定图像的对齐方式3.alt属性—当图片不幸丢失后显示的文字4.autocomplete属性—是否让浏览器自动记录之前输入的值5.autofocus属性—在页面加载时获取焦点6.checkbox属性—在页面加载时应该被预先被选中的单选框或复选框7.disabled属性—禁用该input元素8.form属性—规定该元素所属哪个表单9.formaction属性—覆盖form元素的action属性10.formenctype属性—覆盖form元素的enctype属性11.formmethod属性—覆盖form元素的method属性12.formnovalidate属性—覆盖form元素的novalidate属性13.formtarget属性—覆盖form元素的target属性14.height属性—规定图片的高度15.list属性—引用数据列表包含输入字段的预定义选项16.max属性—规定输入字段所允许的最大值17.maxlength属性—规定输入字段的最大长度18.min属性—规定输入字段所允许的最小值19.multiple属性—可选择多个文件类型20.name属性—规定input元素的名称21.pattern属性—规定用于验证输入字段的模式(正则)22.title属性—当鼠标悬浮到该元素上时显示的信息23.placeholder属性—该元素在未输入内容前的提示24.readonly属性—规定该元素为只读25.required属性—规定该元素是必填(必选)的26.size 属性—该元素的可见输入宽度27.src属性—规定提交按钮显示的图像的URL28.step属性—只能填step值的整倍数29.value属性—该元素的初始值30.width属性—规定图片的宽度31.type属性—全部值

示例

1.accept属性—可指定文件类型

<form action="index.html" method="post" id="f1"> <p> <!-- accept属性 可指定文件类型如果不限可写成 accept="image/*" 或 accept="*"， 只能和 type="file" 配合使用。 --> accept属性<input type="file" accept="image/gif,image/jpeg"/> </p> </form>

2.align属性—它规定图像的对齐方式

<form action="index.html" method="post" id="f1"> <p> <!-- align属性 它规定图像的对齐方式。 right 右对齐对象 和 left 左对齐图像（默认）所有浏览器都支持， top 上对齐图像， middle 居中对齐图像， bottom 下对齐图像， 只能与 type="image" 配合使用。 --> align属性<input type="image" src="img/未标题-1-恢复的.jpg" align="left" width="50px"/> </p> </form>

3.alt属性—当图片不幸丢失后显示的文字

<form action="index.html" method="post" id="f1"> <p> <!-- alt属性 当图片不幸丢失后显示的文字。 --> alt属性<input type="image" src="img/未-恢复的.jpg" alt="Submit"/> </p> </form>

4.autocomplete属性—是否让浏览器自动记录之前输入的值

<form action="index.html" method="post" id="f1"> <p> <!-- autocomplete属性 是否让浏览器自动记录之前输入的值。 默认为on（记录）， 为了对客户的资料进行保密，防止浏览器软件或者恶意插件获取到可以在input中加入autocomplete="off" 来关闭记录。 --> autocomplete属性<input type="email" autocomplete="off" /> </p> </form>

5.autofocus属性—在页面加载时获取焦点

<form action="index.html" method="post" id="f1"> <p> <!-- autofocus属性 在页面加载时获取焦点（一个页面只能出现一次 不适用于 type="hidden"）。 --> autofocus属性<input type="datetime" autofocus="autofocus" /> </p> </form>

6.checkbox属性—在页面加载时应该被预先被选中的单选框或复选框

<form action="index.html" method="post" id="f1"> <p> <!-- checkbox属性 在页面加载时应该被预先被选中的单选框或复选框。 注：单选框只能出现一次，若每个单选框都加上此属性则以最后一个为准。 与 type="checkbox" 或 type="radio" 配合使用。 --> checkbox属性<input type="checkbox" />a&nbsp;<input type="checkbox" checked="checked" />b&nbsp;<input type="checkbox" />c <input type="checkbox" checked="checked" />d&nbsp;<input type="radio" name="a" id="a" value="男" checked="checked" />男 <input type="radio" name="a" id="a" value="女" checked="checked" />女 </p> </form>

7.disabled属性—禁用该input元素

<form action="index.html" method="post" id="f1"> <p> <!-- disabled属性 禁用该input元素, 无法与 type="hidden" 一起使用。 注：当禁用该input元素时此元素的autofocus属性将会失效其他元素要是有autofocus属性将会生效， 此元素的checked属性不会失效。 --> disabled属性<input type="text" disabled="disabled" /> </p> </form>

8.form属性—规定该元素所属哪个表单

<form action="index.html" method="post" id="f1"> <p> <!-- form属性 规定该元素所属哪个表单（一个或多个使用空格分隔）， form的值为表单的id，该元素可以写在form之外。 --> form属性<input type="text" form="f1" /> </p> </form>

9.formaction属性—覆盖form元素的action属性

<form action="index.html" method="post" id="f1"> <p> <!-- formaction属性 覆盖form元素的action属性， 一个form元素中可以出现多个该属性分别提交向不同的地方， 该属性适用于 type="submit" 或 type="image"。 如果没有该属性还是会按照form元素的action属性进行提交 --> formaction属性<input type="submit" formaction="demo_admin.asp" value="formaction属性" /> </p> </form>

10.formenctype属性—覆盖form元素的enctype属性

<form action="index.html" method="post" id="f1"> <p> <!-- formenctype属性 覆盖form元素的enctype属性，该属性与 type="submit" 或 type="image" 配合使用。 值： ①、application/x-www-form-urlencoded 在发送前对所有字符进行编码（默认）。 ②、multipart/form-data 不对字符编码。当使用有文件上传控件的表单时，该值是必需的。 ③、text/plain 将空格转换为 "+" 符号，但不编码特殊字符。 注：①和③都不能用 于上传文件，只有multipart/form-data才能完整的传递文件数据。 form的enctype属性默认为① --> formenctype属性<input type="submit" formenctype="multipart/form-data" value="Submit" /> </p> </form>

11.formmethod属性—覆盖form元素的method属性

<form action="index.html" method="post" id="f1"> <p> <!-- formmethod属性 覆盖form元素的method属性。该属性与type="submit" 或 type="image"配合使用。 值： get 向 URL 追加表单数据（form-data）：URL?name=value&name=value post 以 HTTP post 事务的形式发送表单数据（form-data） --> formmethod属性<input type="submit" formmethod="post" formaction="demo_post.asp" value="Submit" /> </p> </form>

12.formnovalidate属性—覆盖form元素的novalidate属性

<form action="index.html" method="post" id="f1"> <p> <!-- formnovalidate属性 覆盖form元素的novalidate属性。 如果使用该属性，则提交表单时按钮不会执行验证过程。 --> formnovalidate属性<input type="submit" formnovalidate="formnovalidate" value="Submit" /> </p> </form>

13.formtarget属性—覆盖form元素的target属性

<form action="index.html" method="post" id="f1"> <p> <!-- formtarget属性 覆盖form元素的target属性。该属性与 type="submit" 以及 type="image" 配合使用。 _blank 在新窗口/选项卡中将表单提交到文档。 _self 在同一框架中将表单提交到文档。（默认） _parent 在父框架中将表单提交到文档。 _top 在整个窗口中将表单提交到文档。 framename 在指定的框架中将表单提交到文档。 --> formtarget属性<input type="submit" formtarget="_blank" value="Submit" /> </p> </form>

14.height属性—规定图片的高度

<form action="index.html" method="post" id="f1"> <p> <!-- height属性 只适用于type="image"，它规定图片的高度。 单位为px（默认）或% --> height属性<input type="image" src="img/未标题-1-恢复的.jpg" alt="Submit" height="128"/> </p> </form>

15.list属性—引用数据列表包含输入字段的预定义选项

<form action="index.html" method="post" id="f1"> <p> <!-- list属性 引用数据列表，其中包含输入字段的预定义选项。 值为文档中的 datalist 的 id。 --> list属性 <input type="text" list="url_list" /> <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> </p> </form>

16.max属性—规定输入字段所允许的最大值

<form action="index.html" method="post" id="f1"> <p> <!-- max属性 规定输入字段所允许的最大值。max属性最好与min属性配合使用。 max = "10"输入的值必须小于或等于10（type="number"） max="2019-01-01"输入的日期必须小于或等于2019-01-01，格式必须为"yyyy-MM-dd"不可以缩写（type="date"） --> max属性<input type="date" max="2019-01-01" /> </p> </form>

17.maxlength属性—规定输入字段的最大长度

<form action="index.html" method="post" id="f1"> <p> <!-- maxlength属性 规定输入字段的最大长度，以字符个数计。 与 type="text" 或 type="password" 配合使用。 --> maxlength属性<input type="text" maxlength="10" /> </p> </form>

18.min属性—规定输入字段所允许的最小值

<form action="index.html" method="post" id="f1"> <p> <!-- min属性 规定输入字段所允许的最小值。min属性最好与max属性配合使用。 min = "10"输入的值必须大于或等于10（type="number"） min="2019-01-01"输入的日期必须大于或等于2019-01-01，格式必须为"yyyy-MM-dd"不可以缩写（type="date"） --> min属性<input type="number" min="10"/> </p> </form>

19.multiple属性—可选择多个文件类型

<form action="index.html" method="post" id="f1"> <p> <!-- multiple属性 可选择多个文件类型。 --> multiple属性<input type="file" multiple="multiple" /> </p> </form>

20.name属性—规定input元素的名称

<form action="index.html" method="post" id="f1"> <p> <!-- name属性 规定input元素的名称。（必选） 注：只有设置了name属性的表单元素才能在提交表单时传递它们的值。 --> name属性 <input type="text" name="email" /> </p> </form>

21.pattern属性—规定用于验证输入字段的模式(正则)

<form action="index.html" method="post" id="f1"> <p> <!-- pattern属性 规定用于验证输入字段的模式（正则表达式）。 --> pattern属性<input type="text" name="country_code" pattern="[A-z]{3}" /> </p> </form>

22.title属性—当鼠标悬浮到该元素上时显示的信息

<form action="index.html" method="post" id="f1"> <p> <!-- title属性 当鼠标悬浮到该元素上时显示的信息 --> title属性<input type="text" title="提示" /> </p> </form>

23.placeholder属性—该元素在未输入内容前的提示

<form action="index.html" method="post" id="f1"> <p> <!-- placeholder属性 该元素在未输入内容前的提示 该提示会在输入字段为空时显示，并会在字段获得焦点时消失。 --> placeholder属性<input type="text" placeholder="请输入姓名" /> </p> </form>

24.readonly属性—规定该元素为只读

<form action="index.html" method="post" id="f1"> <p> <!-- readonly属性 规定该元素为只读。不可更改值。 readonly 属性可与 type="text" 或 type="password" 配合使用。 --> readonly属性<input type="text" value="0000000" readonly="readonly" /> </p> </form>

25.required属性—规定该元素是必填(必选)的

<form action="index.html" method="post" id="f1"> <p> <!-- required属性 规定该元素是必填（或必选）的。 --> required属性<input type="text" required="required" /> </p> </form>

26.size 属性—该元素的可见输入宽度

<form action="index.html" method="post" id="f1"> <p> <!-- size属性 规定该元素的可见输入宽度。 对于 type="text"和 type="password"size 属性定义的是可见的字符数。 而对于其他类型，size 属性定义的是以像素为单位的输入字段宽度。 --> size属性<input type="text" size="35" /> </p> </form>

27.src属性—规定提交按钮显示的图像的URL

<form action="index.html" method="post" id="f1"> <p> <!-- src属性 只能与 type="image"配合使用。 它规定作为提交按钮显示的图像的 URL。 --> src属性 <input type="image" src="submit.jpg" /> </p> </form>

28.step属性—只能填step值的整倍数

<form action="index.html" method="post" id="f1"> <p> <!-- step属性 该元素只能填step值的整倍数（不分正负） --> step属性<input type="number" step="3" /> </p> </form>

29.value属性—该元素的初始值

<form action="index.html" method="post" id="f1"> <p> <!-- value属性 该元素的初始值 --> value属性<input type="text" value="Bush" /> </p> </form>

30.width属性—规定图片的宽度

<form action="index.html" method="post" id="f1"> <p> <!-- width 属性只适用于type="image"，它规定图片的宽度。 单位为px（默认）或% --> width属性<input type="image" src="img/未标题-1-恢复的.jpg" width="50%"/> </p> </form>

31.type属性—全部值

顺序属性值用途1button按钮2checkbox复选框3color颜色选择器4date(日历)包括年、月、日，不包括时间5datetime-localdate 和 time 控件(包括年、月、日、时、分，不带时区)6email用于 e-mail 地址的字段7file文件选择字段和 “浏览…” 按钮，供文件上传8hidden隐藏输入字段9image图像作为提交按钮10month年和月控件(不带时区)11number用于输入数字的字段12password密码字段13radio单选按钮。(name必须一样)14range精确值不重要的输入数字的控件（拖动条）15reset重置所有的表单值为初始值16search输入搜索字符串的文本字段17submit提交按钮18tel用于输入电话号码的字段19text定义一个单行的文本字段(默认)20time用于输入时间的控件(不带时区)21url用于输入 URL 的字段22week年和周控件(不带时区) <form action="index.html" method="post" id="f1"> <p> 1.定义按钮<input type="button" /><br /> 2.定义复选框<input type="checkbox" /><br /> 3.定义颜色选择器<input type="color" /><br /> 4.定义（日历）包括年、月、日，不包括时间<input type="date" /><br /> <!-- ！！不知道为什么datetime值目前还不太管用 定义date和 time控件（包括年、月、日、时、分、秒、几分之一秒，基于 UTC 时区）<input type="datetime" /><br /> --> 5.定义 date 和 time 控件（包括年、月、日、时、分，不带时区）<input type="datetime-local" /><br /> 6.定义（日历）用于 e-mail 地址的字段<input type="email" /><br /> 7.定义文件选择字段和 "浏览..." 按钮，供文件上传<input type="file" /><br /> 8.定义隐藏输入字段<input type="hidden" /><br /> 9.定义图像作为提交按钮<input type="image" /><br /> 10.定义年和月控件（不带时区）<input type="month" /><br /> 11.定义用于输入数字的字段<input type="number" /><br /> 12.定义密码字段（字段中的字符会被遮蔽）<input type="password" /><br /> 13.定义单选按钮。（name必须一样）<input type="radio" /><br /> 14.定义用于精确值不重要的输入数字的控件（拖动条）<input type="range" /><br /> 15.定义重置按钮（重置所有的表单值为初始值）<input type="reset" /><br /> 16.定义用于输入搜索字符串的文本字段<input type="search" /><br /> 17.定义提交按钮<input type="submit" /><br /> 18.定义用于输入电话号码的字段<input type="tel" /><br /> 19.默认。定义一个单行的文本字段<input type="text" /><br /> 20.定义用于输入时间的控件（不带时区）<input type="time" /><br /> 21.定义用于输入 URL 的字段<input type="url" /><br /> 22.定义年和周控件（不带时区）<input type="week" /> </p> </form>