标签：50000 ... 标签 selected 表单 输入框 HTML 按钮 默认值
|
名称 |
用例 |
备注 |
|
文 本 输入框
|
<input type="text" name="uname" value="" placeholder="请输入您的用户名" /> |
placeholder:提示信息 |
|
<input type="text" name="realname" value="无名"/> |
value:默认值 |
|
|
密 |
<input type="password" name="pwd" value="" /> |
|
|
单 |
<input type="radio" name="gender" value="1" />男 <input type="radio" name="gender" value="2"checked="checked" />女 <input type="radio" name="gender" value="3" />未知 |
checked="checked" 默认选择 |
|
多 |
<input type="checkbox" name="fav" value="1" />刘备<inputtype="checkbox" name="fav" value="2" />关羽 <input type="checkbox" name="fav" value="3"checked="checked" />张飞 <input type="checkbox" name="fav" />赵云 |
|
|
选 |
<input type="number" name="age" value="18" min="16"max="60" /> |
|
|
|
<select name="address"> <option value="1">山东省</option> <option value="2" selected="selected">北京市</option> <option value="3">河北省</option> <option value="4">河南省</option> <option value="5">安徽省</option> <option value="6">福建省</option> <option value="7">湖南省</option> <option value="8">湖北省</option> <option value="9">新疆维吾尔族自治区</option> </select> |
selected="selected" 默认显示,不选择,不提交 |
|
<select name="un" multiple="multiple"size="2"> |
可以多选; size显示的数量 |
|
|
|
|
|
|
时间 |
<input type="date" name="birthday" /> |
Type:可以换属性 |
|
颜色 |
<input type="color" name="cc" /> |
|
|
文件上传 |
<input type="file" name="photo" /> |
|
|
长文本 |
<textarea name="introduce" rows="5" cols="50">默认值显示...</textarea> |
|
|
图片 |
<input type="image" src="img/123.jpg" width="100px" /> |
|
|
按钮 |
<input type="submit" value="提交" /> |
|
|
<input type="reset" value="重置" /> |
|
|
|
<input type="button" value="普通按钮" onclick="alert('功能有待实现');" /> |
|
实例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>form表单练习</title> </head> <body> <h1>注册页面</h1> <form action="reallove" method="get"> <table border="1" cellspacing="0" width="600px"> <tr> <th width="200px">用户名</th> <td width="400px"> <input type="text" name="uname" value="" placeholder="请输入您的用户名" /> </td> </tr> <tr> <th>密码</th> <td> <input type="password" name="pwd" value="" /> </td> </tr> <tr> <th>确认密码</th> <td><input type="password" name="pwd2" value="" /></td> </tr> <tr> <th>真实姓名</th> <td> <input type="text" name="realname" value="无名" /> </td> </tr> <tr> <th>身份证号</th> <td> <input type="text" name="idcard" value="" /> </td> </tr> <tr> <th>性别</th> <td> <input type="radio" name="gender" value="1" />男 <input type="radio" name="gender" value="2" checked="checked" />女 <input type="radio" name="gender" value="3" />未知 </td> </tr> <tr> <th>婚姻状况</th> <td> <input type="radio" name="marry" value="1" />已婚 <input type="radio" name="marry" value="2" checked="checked" />未婚 <input type="radio" name="marry" value="3" />离婚 </td> </tr> <tr> <th>爱好</th> <td> <input type="checkbox" name="fav" value="1" />刘备 <input type="checkbox" name="fav" value="2" />关羽 <input type="checkbox" name="fav" value="3" checked="checked" />张飞 <input type="checkbox" name="fav" />赵云 </td> </tr> <tr> <th>年龄</th> <td> <input type="number" name="age" value="18" min="16" max="60" /> </td> </tr> <tr> <th>户籍地址</th> <td> <select name="address"> <option value="1">山东省</option> <option value="2" selected="selected">北京市</option> <option value="3">河北省</option> <option value="4">河南省</option> <option value="5">安徽省</option> <option value="6">福建省</option> <option value="7">湖南省</option> <option value="8">湖北省</option> <option value="9">新疆维吾尔族自治区</option> </select> </td> </tr> <tr> <th>学历</th> <td> <select name="un" multiple="multiple" size="3"> <option value="1">北京大学</option> <option value="2" selected="selected">清华大学</option> <option value="3">麻省理工</option> <option value="4">哈佛大学</option> <option value="5">剑桥大学</option> <option value="6" selected="selected">慕尼黑大学</option> <option value="7">俄罗斯红场大学</option> <option value="8">牛津大学</option> <option value="9">北京尚学堂</option> </select> </td> </tr> <tr> <th>收入</th> <td> <select name="money"> <option value="1">10000-19999</option> <option value="2">20000-50000</option> <option value="3">50000以上</option> </select> </td> </tr> <tr> <th>出生日期</th> <td> <input type="date" name="birthday" /> </td> </tr> <tr> <th>幸运色</th> <td> <input type="color" name="cc" /> </td> </tr> <tr> <th>上传照片</th> <td> <input type="file" name="photo" /> </td> </tr> <tr> <th>个人介绍</th> <td> <textarea name="introduce" rows="5" cols="50">我是默认值...</textarea> </td> </tr> <tr> <th>图片</th> <td> <input type="image" src="img/ly.jpg" width="100px" /> </td> </tr> <tr> <th>联系方式</th> <td> <input type="text" name="areacode" value="" size="4" maxlength="4" /> - <input type="text" name="phonenum" value="" /> </td> </tr> <tr> <th>验证码</th> <td> <input type="text" name="areacode" value="" size="4" maxlength="4" /> 7788 </td> </tr> <tr> <th colspan="2"> <input type="submit" value="注册" /> <input type="reset" value="重置" /> <input type="button" value="普通按钮" onclick="alert('点我干什么?你瞅啥?');" /> </th> </tr> </table> </form> </body> </html>标签：50000,...,标签,selected,表单,输入框,HTML,按钮,默认值 来源： https://www.cnblogs.com/wangenxian/p/10927205.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。