input标签

 <input type="text" placeholder="xxxx">

type类型

属性 

在type为file,中使用 accept 属性

 <input type="file"  accept="image/gif, image/jpeg" />

type是image 的时候，alt属性是可以使用的。

<form action="demo_form.html">
First name: <input type="text" name="fname"><br>
<input type="image" src="submit.gif" alt="Submit" width="48" height="48">
</form>

autocomplete用于表单的自动填充功能

<form action="demo_form.html" 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>

注意 form 的 autocomplete 属性为 "on"（开），但是 e-mail 自动为“off”（关）

autofocus页面加载时输入框自动聚焦

<input type="text" name="name" autofocus>

capture?属性用于调用设备的摄像头或麦克风,type为file

checked类型为复选框时选中的状态,type为raadio,checkbox

 <input type="checkbox" checked>

dirname？表单区域的一个名字，用于在提交表单时发送元素的方向性，type为text,search

disabled表单控件禁用

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

form将控件和一个form元素联系在一起

<form action="/example/html5/demo_form.asp" method="get" id="form1">
 <input type="text" name="fname" />
<input type="submit" value="提交" />
</form>

<p>下面的 "Last name" 字段位于 form 元素之外，但仍然是表单的一部分。</p>

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

formaction用于确认提交表单的URL,type为image,submit

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

formenctype用于确认编码方式,type为image,submit

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

formmethod用于确认是哪种提交方法,type为image,submit

<input type="submit" formmethod="post" formaction="/example/html5/demo_post.asp" value="提交" />
</form>

formnovalidate，如果不想验证，就使用,type为image,submit

 //三种表达方式 
 <input type="submit" formnovalidate="formnovalidate" value="提交">

 <input type="submit" formnovalidate value="提交">

 <input type="submit" formnovalidate="true" value="提交">

formtarget,提交到不同的目标窗口, type为image,submit

<input type="submit" formtarget="_blank" value="提交">

height,width，src当type为image时，确认高度,宽度,图像资源的地址

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

list,带有 <datalist> 中的预定义值的 <input> 元素

<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

max,min带有指定范围的数字输入字段,type为number

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

 maxlength，value 的最大长度，minlength,value 的最小长度,typr为password, search, tel, text, url

<input type="text" name="name" maxlength="85" minlength='2'/>

multiple可接受多个值的文件上传字段，type为email, file

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

 name，input表单控件的名字。以名字/值对的形式随表单一起提交

注释：只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。

pattern匹配输入的字段，type为password, text, tel

<input type="text" name="code" pattern="[A-Za-z]{3}">

placeholder当表单控件为空时，控件中显示的内容，type为password, search, tel, text, url

 <input type="search" name="search" placeholder="Search" />

 readonly表示表单内容不可更改

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

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

<input type="text" name="country" value="China" readonly="true" />

required表示此值为必填项或者提交表单前必须先检查该值

<input type="text" name="usrname" required>

 size控件的长度，type为email, password, tel, text

<input type="text" name="text" size="5" />

step将内容加或减，type为number

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

样式 

为所有被选中的 input 元素设置背景色

input:checked{ 
    background-color: #ff0000;
}

为所有 type="text" 的被禁用的 input 元素设置背景色 

input[type="text"]:disabled{ 
    background-color: #dddddd;
}

选择获得焦点的输入字段，并设置其样式

input:focus{ 
   background-color:yellow;
}

 ::placeholder 选择器来改变占位文本的颜色 

input::placeholder {
  color: red;
}

 为所有 type="text" 的已启用的 input 元素设置背景色

input[type="text"]:enabled{ 
    background-color: #ff0000;
}