h5-文本框
h5-文本框
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>文本框</title> 6 </head> 7 <body> 8 <!-- form是表单,内部可以包含多个控件, 9 控件内可以输入值。 10 我们是以表单为单元进行提交,一次要提交一个表单所包含所有控件的值。 11 表单只是用来定提交的范围。 12 表单是透明的。 13 #:表示无处可提交。在有服务器时可提交给服务器,即是填入服务器地址取代#。 14 --> 15 <form action="#"> 16 <p> 17 <!-- 加标签: 18 在input里加入属性id,并起名“account”,设置文本框的唯一id, 19 而后,在“账号:”前加上lable for="文本框的id"来捆绑标签 20 从而实现,点击文字“账号:”也可以进行文本框输入。 21 --> 22 <label for="account">账号:</label> 23 <input type="texts" id="account"/> 24 </p> 25 <p> 26 <label for="password">密码:</label> 27 <input type="pwd" id="password"/> 28 </p> 29 <!-- 单选框:在input里添加属性name,让选项使用同名 30 互相排斥,即可实现单选 31 --> 32 <p> 33 性别: 34 <input type="radio" checked id="male" name="sex"/> 35 <label for="male">男</label> 36 <input type="radio" id="female" name="sex"/> 37 <label for="female">女</label> 38 </p> 39 <p> 40 兴趣: 41 <input type="checkbox" checked id="basketball"> 42 <label for="basketball">篮球</label> 43 <input type="checkbox" id="football"> 44 <label for="football">足球</label> 45 </p> 46 <p> 47 <!-- value:按钮的名称;button:需用js进行定义 --> 48 <input type="submit" value="提交"/> 49 <input type="reset" value="重置"/> 50 <input type="button" value="取消"/> 51 </p> 52 </form> 53 </body> 54 </html>
补充部分功能:
1 <!-- 文件选择提交框 --> 2 <label for="attachment">上传附件:</label> 3 <input type="file" id="attachment"/> 4 <!-- 文本域:大号文本框 --> 5 <p><label for="disc">自我介绍:</label></p> 6 <textarea id="disc"></textarea>
补充:
1 <!-- 下拉选择 --> 2 <label for="choseone">选择你要学习的课程:</label> 3 <select id="choseone"> 4 <option>-请选择-</option> 5 <option value="1">html5</option> 6 <option value="2">js</option> 7 <option value="3">css</option> 8 </select>