input的样式简介

<input

type="text"

autocomplete="off"

placeholder=""

x-webkit-speech=""

id="name" name="name"

value="" maxlength="10"

>

input 大部分样式

type：

autocomplete：

关于form/input 的autocomplete="off"属性

一、

有过表单设计经验的朋友肯定知道，当我们在浏览器中输入表单信息的时候，往往input文本输入框会记录下之前提交表单的信息，以后每次只要双击 input文本输入框就会出现之前输入的文本，这样有时会觉得比较方便，但有时也会暴露用户的隐藏数据，所以今天就教大家让input表单输入框不记录输 入过信息的方法。

其实方法很简单，只需要在input文本输入框中加一条属性即可，相关代友如下所示：

如果是ASP.NET服务器控件,比如TextBox，可以在后台代码加上：

this.txbAddress.Attributes.Add("autocomplete",off);

二、

input 的属性autocomplete 默认为on

其含义代表是否让浏览器自动记录之前输入的值

很多时候，需要对客户的资料进行保密，防止浏览器软件或者恶意插件获取到

可以在input中加入 来关闭记录

另外，如果整个表单都不想让浏览器自动记录之前输入的值，我们可以给from表单加上，这样整个表单都不会记录用户输入的值。

If the page containing the password field is served over HTTPS and it was served with headers preventing caching 
of the data in the form, then Autocomplete is turned off for the
form in Internet Explorer.

如果页面使用HTTPS协议并且包含密码字段，它是在请求头部阻止缓存表单中的数据，然后关闭IE中的自动补全。（呵呵，按自己的理解翻译的，未必准确）

系统需要保密的情况下可以使用此参数

placeholder：

placeholder顾名思义是一个占位符。
在你的value为空的时候他才会显示出来，但是他本身并不是value，也不会被表单提交。

注：其实明白点就是你想给在框里的字，但是你想打字到边框它就消失了

x-webkit-speech 输入框中的“小话筒”：

使用语音输入作用有：
1.提供除了键盘和鼠标的另一个输入方法，针对pc用户，当键盘不可用时也可以使用语音输入。
2.为手机用户提供更加方便的输入方法。

lang

这玩意可以强制输入框里面的语音的语言种类，例如
<input type="text" x-webkit-speech lang="zh-CN"/>

1.支持的浏览器

x-webkit-speech是webkit内核浏览器的私有属性(废话)。但现在只能在google的chrome 11以上才能使用。
实现过程大概是捕捉到语音后，数据发送到google的服务器进行语音识别，然后返回结果。所以没有足够强大大的研发能力和服务器资源，真没法支持这个服务。
作为普通话不标准经常被别人吐槽的人，使用语音搜索还是能十分准确地返回关键词，我顿时感动得一塌糊涂。

2.支持的标签

输入标签有input和textarea，实际上目前只有input支持。

3.检测浏览器是否支持

1if (document.createElement("input").webkitSpeech === undefined) {

2    alert("Speech input is not supported in your browser.");

3}

4.直接使用

为input标签加上x-webkit-speech属性

1<input type="search" x-webkit-speech />

捕捉到语音输入后会直接将关键词填入到输入框里。

5.监听输入

若要监听输入变化以便做其他处理，使用onwebkitspeechchange属性添加处理函数。

1<input type="search" x-webkit-speech onwebkitspeechchange="onChange()"/>

1<script type="text/javascript">

2    function onChange() {

3        alert('changed');

4    }

5</script>

6.注意：

如果原input中value不为空，输入会直接添加在原有文字后面。既然用webkit就要用placeholder了，不要再使用value为作输入提示了。

转自：http://hi.baidu.com/etion/item/395750dc3a6c72e7b3f7778e

id and name：

     name在以下用途是不能替代的：
1.
表单(form)的控件名，提交的数据都用控件的name而不是id来控制。因为有许多name会同时对应多个控件,比如checkbox和radio,
而id必须是全文档中唯一的。此外浏览器会根据name来设定发送到服务器的request。因此如果用id，服务器是无法得到数据的。

2. frame和window的名字,用于在其他frame或window指定target。

以下两者可以通用，但是强烈建议用id不要用name：
1. 锚点，通常以前写作<a
name="myname">,现在可以用任何的元素id来指定:<div
id="myid">。

以下只能用id：
1. label与form控件的关联,
   
<label for="MyInput">My
Input</label>
    
<input id="MyInput"
type="text">
    
for属性指定与label关联的元素的id,不可用name替代。
2. CSS的元素选择机制，以#MyId的方式指定应用样式的元素,不能用name替代。
3. 脚本中获得对象:
IE支持在脚本中直接以id(而不是name)引用该id标识的对象。例如上面的input,要在脚本中获得输入的内容,可以直接以MyInput.value来获得。

如果用DOM的话,则用document.getElementByIdx("MyInput").value,如果要用name的话,通常先得到包含控
件的form,例如document.forms[0]，然后从form再引用name,注意这样得到的是经过计算后将发送给服务器的值。

name与id的还有区别是：
id要符合标识的要求,比如大小写敏感,最好不要包含下划线(因为不兼容CSS)。而name基本上没有什么要求,甚至可以用数字。

补充：name主要是表单元素里才有的属性。。。通过js的document.表单名称.文本框.value来获取文本框的值，其中的表单名称和文本框名
称指的是name,而非表单元素例如div，span等是没有name属性的，而id属性是任何一个HTML元素都会有的。当你需要用js获取非表单元素
对象是就得用document.getElementByIdx("id")

 

value：

value 属性为 input 元素规定值。

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

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

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

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

maxlength：

maxlength 属性规定输入字段的最大长度，以字符个数计。

maxlength 属性与 <input type="text"> 或 <input type="password"> 配合使用

差不多用到这多了！