placeholder 属性
placeholder 属性规定用以描述输入字段预期值的提示(样本值或有关格式的简短描述)。
该提示会在用户输入值之前显示在输入字段中。
placeholder 属性适用于以下输入类型:text、search、url、tel、email 以及 password。
Opera Safari Chrome Firefox Internet Explorer
实例
拥有占位符文本的输入字段:
required 属性
required 属性是布尔属性。
如果设置,则规定在提交表单之前必须填写输入字段。
required 属性适用于以下输入类型:text、search、url、tel、email、password、date pickers、number、checkbox、radio、and file.
Opera Safari Chrome Firefox Internet Explorer
实例
必填的输入字段:
step 属性
step 属性规定 <input> 元素的合法数字间隔。
示例:如果 step="3",则合法数字应该是 -3、0、3、6、等等。
提示:step 属性可与 max 以及 min 属性一同使用,来创建合法值的范围。
step 属性适用于以下输入类型:number、range、date、datetime、datetime-local、month、time 以及 week。
Opera Safari Chrome Firefox Internet Explorer
示例
拥有具体的合法数字间隔的输入字段:
练习的代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <!-- form表单用于定义表单,而table用于有序的布局文本框等组件 --> <form> <fieldset> <legend>注册及用户登录页面</legend> <table> <tr> <td><input type="radio" name="sex" value="male">男生<br/></td> </tr> <tr> <td><input type="radio" name="sex" value="female">女生<br/></td> </tr> <tr> <td>用户名:</td> <td><input type="text" name="username" value="张三" disabled></td> <td><input type="text" name="asdf" placeholder="jack chen" required="required" /></td> </tr> <tr> <td>密码:</td> <td><input type="password" name="passwd" autofocus="autofocus" ></td> </tr> <tr> <td><input type="button" name="submit" value="提交"></td> <td><input type="button" name="reset" value="重置"></td> </tr> <tr> <select name="country"> <option value="America" selected>美国</option> <option value="China" >中国</option> <option value="Korea">韩国</option> </select> </tr> </table> </fieldset> </form> <textarea name="message" rows="10" cols="30"> The cat was playing in the garden. </textarea> <br><hr> Enter a date after 1997-3-2:<br/> <input type="date" name="d1" min="1997-3-2"> <input type="submit"><br> <input type="range" name="rag1" min="1" max="10" ><br> <input type="month" name="m1"><br> <input type="week" name="w1"><br> <input type="time" name="t1"><br> <input type="datetime" name="dt1"><br> <input type="datetime-local" name="dt-l1"><br> <input type="tel" name="tel1"><br> <input type="file" name="img" multiple="multiple"><br> </body> </html>
结果: