<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;
}