Input标签是Html中的一种输入标签,没有结束标签,常在form表单中使用,根据type属性的不同类型,Input标签又分为不同类型的输入框。下面为大家介绍几种Input标签。(下面的Input标签全都使用默认样式,毕竟还没开始学CSS样式)在学习<input>标签前我们先看一个收货地址的表单,看看都用到了什么。
<!DOCTYPE html> <html> <head> <title>站宝库 ZhanBaoKu.Com</title><!-- 修改页面标题--> <meta charset="UTF-8"> </head> <body> <div id="dreg"> <div class="regitem-title"> <div class="regtext-title"><h2>信息填写</h2></div> </div> <div class="regitem"> <span>姓名</span> <input type="text" id="name" name="name" value="姓名"> </div> <div class="regitem"> <span>联系电话</span> <input type="text" id="txtPhone" name="txtPhone" data-mobile="13800138000" value="13800138000"> </div> <div class="regitem-mesage"> <span></span> <input type="text" id="mesage" name="mesage" value="获取验证码"> <span class="msgs">获取验证码</span> </div> <div class="regitem"> <span>选择地址</span> <div id="city"> <select class="prov"></select> <select class="city" disabled="disabled"></select> <select class="dist" disabled="disabled"></select> </div> </div> <div class="regitem"> <span class="regitem-detail">详细地址</span> <textarea id="txtarea" name="txtarea" placeholder="请输入你的详细地址">请输入你的详细地址</textarea> </div> <div class="regitem-but"> <div class="dregbtn"><a href="javascript:;">确定</a></div> </div> </div> </body> </html>
这个表单已经把HTML的4个表单标签(<input>、<textarea>、<select>和<option>)全部都用上了,其中大部分都是用input标签完成的,下面我们详细的分析下吧。
<input>标签语法:
<input type=”属性值”/>,它就是传说中的不需要闭合的标签之一,搞清楚<input>标签的语法后我们再来看看它的属性值有哪些,其实上面的代码已经基本把常用的都包括了。
- type=“text”:文本输入框,这是最常见的一种输入类型。
- type=“button”:点击按钮,与Button标签类似。
- type=“radio”:单选框,在多个选项中只能选择一个。(注:要给单选框加入相同的name属性)
- type=“checkbox”:复选框,在多个选项中可以进行多项选择。(注:单选框同样要加入相同的name属性)
- type=“file”:点击在本地选择文件上传到网络上。
- type=“password”:常见的密码输入框,输入的字体会被字符代替。(这里还可以加入maxlength属性规定可输入字符的长度)
- type=“date”:带有日期表,可以选择年月日。
这里就为大家介绍这几款Input标签了,还有很多有趣的Input标签,如果有兴趣可以查阅HTML手册,自己动手操作一下。(多种Input标签组合起来会更有趣哦)
总结:
这里讲道了<input>标签中type属性的值,分别为type=“text”:文本输入框、type=“button”:点击按钮、type=“radio”:单选框、type=“checkbox”、type=“file”上传文件、type=“password”、type=“date”,自己尝试组合使用几次看看,看能否做一个在线报名表单出来?