nput框作为一个简单的输入框,你对它的属性知道有多少？
常见的属性（带new为h5新增属性）:

1、accept：accept 属性规定了可通过文件上传提交的服务器接受的文件类型。仅用于input的type类型为"file"的时候。

属性值：

audio/*，音频

video/* ，视频

image/* ，图片

MIME_type，一个有效的 MIME 类型，不带参数

  <input type="file" name="pic" accept="image/*" />

// 如需规定多个值，请使用逗号分隔

<input  type="file" accept="audio/*,video/*,image/*" />

2、value：指定元素的value值。

属性值：text

value 属性对于不同 input 类型，用法也不同：

• 对于 "button"、"reset"、"submit" 类型 - 定义按钮上的文本
• 对于 "text"、"password"、"hidden" 类型 - 定义输入字段的初始（默认）值
• 对于 "checkbox"、"radio"、"image" 类型 - 定义与 input 元素相关的值，当提交表单时该值会发送到表单的 action URL。

注意：value 属性对于 <input type="checkbox"> 和 <input type="radio"> 是必需的。

注意：value 属性不适用于 <input type="file">。

<input value="文本" />

3、name:表示的该文本输入框名称。用于表单提交后引用表单数据。只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。

属性值：text

<input type="text" name="email" />

4、size：输入框的长度大小。

属性值：number

<input type="text" name="email" size="35" />

注意：size 属性适用于下面的 input 类型：text、search、tel、url、email 和 password。

5、maxlength：输入框中允许输入字符的最大数。

属性值：number

<input type="text" name="usrname" maxlength="10" />

6、readonly：表示该框中只能显示，不能添加修改。

<input type="text" name="country" value="中国" readonly />

7、required（new）：属性规定必须在提交表单之前填写输入字段。

 <input type="text" name="username" required />

8、alt：定义图像输入的替代文本。 (只针对type="image")

属性值：text

<input type="image" src="submit.gif" alt="Submit" width="48" height="48" />

9、autocomplete（new）：autocomplete 属性规定输入字段是否应该启用自动完成功能。

属性值：on/off，默认启动自动完成功能。

<input autocomplete="off" />

注意：autocomplete 属性适用于下面的 <input> 类型：text、search、url、tel、email、password、datepickers、range 和 color。

10、autofocus（new）：属性规定当页面加载时 <input> 元素应该自动获得焦点。

属性值：autofocus

<input type="text"  autofocus />

11、checked：checked 属性规定在页面加载时应该被预先选定的 <input> 元素。 (只针对 type="checkbox" 或者 type="radio")

属性值：checked

<input type="checkbox" name="vehicle" value="Car" checked />小汽车

12、disabled：disabled 属性规定应该禁用的 <input> 元素。

属性值：disabled

<input type="text" name="lname" disabled />

13、form（new）: form 属性规定 <input> 元素所属的一个或多个表单。

位于 form 表单外的输入字段（但仍然属于 form 表单的一部分）：

<form action="demo-form.php" id="form1">
    First name: <input type="text" name="fname"><br>
   <input type="submit" value="提交">
</form>

14、formaction（new）:属性规定当表单提交时处理输入控件的文件的 URL。(只针对 type="submit" 和 type="image")

属性值：URL

<input type="submit" formaction="demo-admin.php" value="提交" />

注意：

formaction 属性规定当表单提交时处理输入控件的文件的 URL。

formaction 属性覆盖 <form> 元素的 action 属性。

15、formenctype（new）：属性规定当表单数据提交到服务器时如何编码(只适合 type="submit" 和 type="image")。

属性值：application/x-www-form-urlencoded ；multipart/form-data text/plain

<input type="submit" formenctype="multipart/form-data" value="以 Multipart/form-data 提交" />

注意：

formenctype 属性规定当表单数据提交到服务器时如何编码（仅适用于 method="post" 的表单）。

formenctype 属性覆盖 <form> 元素的 enctype 属性。

16、formmethod （new）：定义发送表单数据到 action URL 的 HTTP 方法。 (只适合 type="submit" 和 type="image")

属性值：get / post

<input type="submit" formmethod="post" formaction="demo-post.php" value="使用 POST 提交" />

17、formnovalidate（new）：formnovalidate 属性覆盖 <form> 元素的 novalidate 属性。

属性值：formnovalidate

<input type="submit" formnovalidate="formnovalidate" value="不验证提交">

18、formtarget （new）:规定表示提交表单后在哪里显示接收到响应的名称或关键词。(只适合 type="submit" 和 type="image")

属性值：_blank； _self； _parent； _top； framename

<input type="submit" formtarget="_blank" value="提交到一个新的页面上">

19、height （new）;width（new）:属性规定 <input> 元素的高度和宽度。 (只针对type="image")

属性值：pixels

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48" />

20、max （new）;min（new）:属性规定 <input> 元素的最大值和最小值。

属性值：number；date

 <input type="date" name="bday" max="1979-12-31">
  <input type="date" name="bday" min="2000-01-02">  
<input type="number" name="quantity" min="1" max="5">

21、multiple （new）：属性规定允许用户输入到 <input> 元素的多个值。

属性值：multiple

<input type="file" name="img" multiple>

注意：multiple 适用于以下 input 类型：email 和 file。

22、pattern （new）：pattern 属性规定用于验证 <input> 元素的值的正则表达式。

属性值：regexp;

<form action="demo_form.html">
   Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
   <input type="submit">
</form>

23、placeholder （new）： 属性规定可描述输入 <input> 字段预期值的简短的提示信息 。

属性值：text

<input placeholder="请输入姓名" />

24、src : src 属性规定显示为提交按钮的图像的 URL。 (只针对 type="image")

属性值：URL

<input type="image" src="submit.gif" alt="Submit" />

25、step （new）: step 属性规定 <input> 元素的合法数字间隔。

属性值：number

<input type="number" name="points" step="3">

26、list（new） :属性引用 <datalist> 元素，其中包含 <input> 元素的预定义选项。

属性值：datalist_id

<input list="browsers">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Google Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

27、type: type 属性规定要显示的 <input> 元素的类型。

属性值：button；checkbox；color；date；datetime；datetime-local；email；file；hidden；image；month；number；password；radio；range；reset；search；submit；tel；text；time；url；week

type的属性值众多，也是用的比较多的一个。

button：定义可点击的按钮（通常与 JavaScript 一起使用来启动脚本）。

checkbox：定义复选框。

color（new）：定义拾色器。

date（new）：定义 date 控件（包括年、月、日，不包括时间）。

datetime（new）：定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，基于 UTC 时区）。

datetime-local（new）：定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，不带时区）。

email（new）：定义用于 e-mail 地址的字段。file定义文件选择字段和 "浏览..." 按钮，供文件上传。

hidden：定义隐藏输入字段。

image：定义图像作为提交按钮。

month（new）：定义 month 和 year 控件（不带时区）。

number（new）：定义用于输入数字的字段。

password：定义密码字段（字段中的字符会被遮蔽）。

radio：定义单选按钮。

range（new）：定义用于精确值不重要的输入数字的控件（比如 slider 控件）。

reset：定义重置按钮（重置所有的表单值为默认值）。

search（new）：定义用于输入搜索字符串的文本字段。

submit：定义提交按钮。

tel（new）：定义用于输入电话号码的字段。

text：默认。定义一个单行的文本字段（默认宽度为 20 个字符）。

time（new）：定义用于输入时间的控件（不带时区）。

url（new）：定义用于输入 URL 的字段。

week（new）：定义 week 和 year 控件（不带时区）。

站开发入门指南：表单相关标签们。

接下来我们来学习一下表单以及相关的元素。

·表单其实英文是叫做fo.rm，在我们平时使用的这种互联网产品中包括网站也好、app也好，经常会看到这种需要你去填一些资料、填一些文字、填一些数据的这样一种页面。像这种页面其实都是通过表单以及表单的元素去构成、去实现的。

也就是说表单其实是用来收集用户数据的，它是给用户去输入一些数据的。而且输入完之后，一般它是要跟服务器去发生一些交互的。就是比如说把数据发送到服务器或者在本地处理过后，再给到服务器去进一步的处理或者去保存。所以其实表单这些元素，如果真正要去用起来的话，真正要让它功能跑起来的话，其实很多时候是要跟js打交道的。所以目前来说只要简单的去了解一下表单的元素的基本使用就可以了。

·然后后面学了CSS之后，你也知道怎么去给这些表单做它的样式就OK了。那我们看一下表单以及相关的元素有哪些？表单主要是有一个这样一个表单本身的标签，另外这些就是跟它相关的一些标签元素了。这些元素一般都是放在这个for.m元素里面的嵌套在它里面的。

但是表单的元素，它跟我们之前学过的ul li-olli一定要进行嵌套使用的，这种元素还不太一样。表单中的元素，像这个和这个是经常可以单独使用的，也就是说不用嵌套在这个form表单里面也是可以用的。所以要明白这些表单内的元素，如果你有需要是完全可以去独立的去使用它的，并不一定要跟这个for.m.搭.配起来嵌套在它里面的。

·很多时候去使用form这样的标签。然后把这些表单的元素嵌套在里面。它其实主要的一个目的，它是为了让这些就是收集到的数据组成一种结构化的一种模式，结构化的一种状态。这样发送到服务器，服务器也可以通过这种更好的结构去读取数据。

所以目前的学习阶段来讲是没有办法给你去展示表单的作用。但是等你学到JS之后，你在有了这些基础知识之后，就能通过JS其实非常清晰看到它的整个数据结构。这节课主要是来讲一讲这个标签，这个标签其实会经常单独的来进行使用。这个标签之前也简单的给大家去演示过，它是一个用来做这种文字输入的标签。

很多时候，像这种真实的产品页面，产品里面会发现很多的输入栏都是用这个标签去实现。打开开发者工具之后，可以看到这里有一个这样的小工具，选用它之后就可以去快速的定位到元素。可以看到它这边有个input，选中之后，元素列表这里也能看到就是input这样的元素。所以很多的页面上的输入框其实都是用input元素来实现的。

input非常重要的属性叫做type，type属性之前演示过一个叫text(的值)，一个叫Checkbox，给大家演示过。这两个设置之后是会产生不同的效果。这种能设置的属性的值非常多，我这里不给大家去做演示，你有兴趣自己可以去尝试去使用一下。

这里主要是介绍一个是这个之前讲过的，给大家简单也再看一下。一个是checkbox，一个是checkbox，还有一个file，其他的。

还有pasisword也给大家看一下。这里来看一下。首先看到input非常简单，直接默认的text它这边，这边先把它放大一点，放五倍大，大家看起来清楚一点。这样就可以在这里输入这样一个内容了，非常简单。

然后比如这里改成password，然后这边输入的东西自动的就变成这种小圆点了，就相当于是一种帮你保密，就是防止别人偷看到你的密码。然后就是checkbox(多选框)。之前简简单演示过了checkbox会变成这种勾选的框，它有一个属性，如果你使用的checkbooks这样的类型，你可以使用这个checked这样的属性，就让元素默认是打勾(选中)的状态。

像这种东西其他的前面一般都会有一个文字，告诉你这个选项是什么，然后这里把这个改一下，就叫做选择。想学习的语言其实一定是可以多选的。这里来一个写一个span，叫做js好html，然后自己再多复制几个，然后这里变成CSS，变成javascript。像这种前面这种文字用span都是没有任何问题的。

但是其实在表单元素里面有一个标签叫做lab.el。label其实一般用来写这种，就是告诉这个选项是什么样的一个选项，这样的一些文字。label有个特殊的作用，比如说把这个换成label，label之后这里有一个属性叫做for，for可以去跟比如说input，这里设计一个id叫做html。

稍微跟写的不一样，这个其实写一样也没有关系，但是这里写不一样，大家可能更容易理解一点。

把名字id名跟这个对应上之后for里面是某个元素的id值，就是input这样的一个元素的id值，label就跟input元素绑定了。注意这里写错了label。

·然后看一下可以点击文字，就相当于点击了选项框，其他的用spam包裹的文字是没有绑定的效果。所以label标签的作用就是有这样的一个文字跟相应的元素绑定起来。点击文字相当于就点击元素这样的效果。

·然后可以看一下另外一种叫radio这种单选框的元素，也是用input来实现的。然后来看一下input，把它设置成radio的类型就会变成这样一个圆点。假如还是按照这种模式，比如说这里把ID也设置一下叫做htmltag，其实跟htmltag类型的数据库也是一样的。如果设置checked就默认的，就相当于是选中的状态。

·如果这里还有单选，这里还有一个，如果叫CSS，把这个先取消掉。这里其实是有两个选项，两个可选项，整个的结果是希望是呈现单选的状态，选中其中另外一个，肯定要呈现一种未选中的状态。

·现在两个都可以同时选中，这样肯定是不行的。所以这里可以用属性，叫做name，就叫section。下面同时也取名字，也是name同样的值。

这里可以把它理解成用了同一个名字的单选框，他们最终只能选中其中一个。可以试一下，比如说点CSS，点html，这个东西是单选框里面非常重要的知识点。

日常开发中，为了方便数据的输入和输出，JavaScript提供了一些常用的输入输出语句，具体如表1-3所示。
表1常用的输入输出语句

接下来将分别演示document.write0、console.log0和promptO的使用。

1. document.write()

document.write0的输出内容中如果含有HTML标签，会被浏览器解析。下面利用documenL.write0在页面中输出“我是document.write0语句!”，示例代码如下。

document.write('我是document.write()语句！');

2. console.log()

利用console.log0语句在控制台输出“我是console.log0语句!”，示例代码如下。

console.log('我是console.log()语句!');

console:.log0的输出结果需要在浏览器的控制台中查看。在Chrome 浏览器中按“F12”键(或在网页空白区域右击，在弹出的菜单中选择“检查”)启动开发者工具，然后切换到“Console”(控制台)面板，即可看到console.log0的输出结果。

3.prompt()

利用prompt0语句实现在页面中弹出一个带有提示信息的输入框，示例代码如下。

prompt(请输入姓名：');

上述示例代码运行后，将在页面中弹出一个输人框并提示用户“请输人姓名：”提示框。