<form action="" method="get|post"> </form>
<input type="" name="" placeholder="" />
常用属性:
上面的这些属性值,有的浏览器尚未实现,最好自己写正则表达式验证。
<input type="text" name="" />
<input type="password" name="" />
性别:<input type="radio" name="gender" value="male" />男 <input type="radio" name="gender" value="女" />女<br />
一组单选按钮的name要相同。
爱好:<br /> <input type="checkbox" name="hobby" value="basketball" />篮球<br /> <input type="checkbox" name="hobby" value="running" />跑步<br /> <input type="checkbox" name="hobby" value="swimming" />游泳<br />
复选框的字段会分别提交,比如?hobby=basketball&hobby=running,并不是放在一个数组中提交,就是说一组复选框的name可以不同。
<input type="number" name="" min="0" max="10">
只能输入[0,10]上的10个整数其中之一。可指定步长:
<input type="number" name="" min="0" max="10" step="2">
只能输入0,2,4,6,8,10这几个数字其中之一。
会自动检查内容是否要求,不符合会提示。
<form id="form1" action="" method="get"> </form> <input type="" name="" form="form1" />
<input>元素可以通过form属性与一个或多个表单(的id)绑定,绑定后此<input>属于所绑定的表单,提交表单时会提交此<input>。
可与多个表单绑定,通过逗号隔开即可,form="from1,form2"。
<form action="1.php" method=""> <input type="" name="" formaction="2.php" /> </form>
提交时会把此<input>提交给2.php处理,不会提交给1.php(覆盖<form>元素的action属性),表单的其他字段提交给1.php处理。
请输入密码:<input type="password" name="" title="密码只能为字母、数字" />
鼠标移到输入框上时,会弹出title设置的提示信息。
<input type="text" name="" pattern="[a-za-z]{3}" title="three letter country code">
浏览器会自动使用这个正则表达式来验证内容,不符合要求会提示。
<input type="range" name="" min="0" max="100">
可用step属性指定步长,可用value属性指定默认值。
input type="hidden" name="" value="" />
<form action="" method="post" enctype="multipart/form-data"> <input type="file" name="" /> </form>
method必须指定为post,enctype必须指定为multipart/form-data。
默认可以选择所有类型的文件,可以使用accept属性来限定文件类型:
<input type="file" name="" accept="image/jpeg" />
可以使用通配符: accept="image/*"
默认只能选择一个文件,可使用multiple属性指定可选择多个文件:
<input type="file" name="" multiple />
<label for="user">用户名:</label> <input type="text" name="user" id="user">
通过<label>的for属性绑定输入框的id(必须是id,不能用name代替)。
<input type="button" value="普通按钮" /> <input type="reset" value="重置" /> <input type="submit" value="提交" /> <input type="image" src="image/1.jpg" width="" height="" />
type="image"是以图片作为提交按钮上的内容,点击会提交表单。
<input>元素只有image类型可以设置width、heigth(设置的是图片的宽、高),其他类型都是通过size属性来设置输入框的宽度。(input是内联元素,设置宽高无效)
<button type="button">普通按钮</button> <button type="reset">重置按钮</button> <button type="submit">提交</button>
请选择国籍: <select name="nationality"> <option value="china">中国</option> <!--默认选择第一项--> <option value="america">美国</option> <option value="other">其他</option> </select>
提示文字可以这样写:
<select name="nationality"> <option>请选择国籍</option> <option value="china">中国</option> <option value="america">美国</option> <option value="other">其他</option> </select>
此处的<option>是双标签。
请选择您使用的浏览器: <input list="browsers"> <datalist id="browsers"> <option value="internet explorer"> <option value="firefox"> <option value="chrome"> <option value="opera"> <option value="safari"> </datalist>
通过<input>的list属性绑定<datalist>的id(只能是id,不能是name)。
此处的<option>是单标签。
<textarea name="" rows="10" cols="50">此处可以写默认值</textarea>
文本域的默认值不是通过value属性指定的。
如对本文有疑问, 点击进行留言回复!!
CSS中的两个特殊值用于控制层叠的inherit和initial的方法
CSS3 input框的实现代码类似Google登录的动画效果
CSS 容器背景 10 种颜色渐变Demo(linear-gradient())
详解CSS文件中的4种引入方式:行内,内联式,外部式,导入式
网友评论