type属性表示表单控件的类型
一,radio,checkbox,date,time,datetime-local,month,week等
1.radio:单选框
单选中一组内容必须设置同一个name名;
单选中每一个表单控件必须设置value值,如果不设置,显示on,表示选择了某个选项,但是不知道具体选中的内容(在url地址栏上显示)
checkbox:多选框
多选中一组内容必须设置同一个name名;
多选中每一个表单控件必须设置value值,如果不设置,显示on,表示选择了某个选项,但是不知道具体先中的内容(跟单选相似)
<form action="./demo4.html" method="get">
<div>
选择性别:
<input type="radio" name="gender" value="man">男
<input type="radio" name="gender" value="woman">女
<input type="radio" name="gender" value="other">不限
</div>
<div>
诗和远方:
<input type="checkbox" name="city" value="shanghai">上海
<input type="checkbox" name="city" value="fujian">福建
<input type="checkbox" name="city" value="yunnan">云南
<input type="checkbox" name="city" value="guizhou">贵州
<input type="checkbox" name="city" value="xinjiang">新疆
</div>
</form>
结果是:
2.date:日期
time:时间
datetime-local:同时选择日期和时间
month:月份
week:一年中的第几周
<form action="./demo4.html" method="get">
<div>
选择日期:<input type="date" name="date">
</div>
<div>
选择时间:<input type="time" name="time">
</div>
<div>
日期时间:<input type="datetime-local" name="datetime">
</div>
<div>
选择月份:<input type="month" name="month">
</div>
<div>
一年中的第几周:<input type="week" name="week">
</div>
</form>
结果:
二,text,password,email,url,number,color,file,seach,submit,reset等
1.text:文本框
password:密码框
email:邮件
url:网址
number:数字框
数字输入框
max 最大值
min 最小值
step 数字之间的间隔(默认为1)
color:颜色
file:文件
seach:搜索框
submit:提交按钮
reset:重置按钮
<form action="./demo4.html" method="get">
<div>
用户姓名: <input type="text" name="userName">
</div>
<div>
用户密码: <input type="password" name="userPassword">
</div>
<div>
用户邮箱: <input type="email" name="userEmail">
</div>
<div>
输入网址: <input type="url" name="userUrl">
</div>
<div>
用户体温: <input type="number" name="temperature" max="42" min="34" step="0.1">
</div>
<div>
选择颜色: <input type="color" name="userColor">
</div>
<div>
选择文件: <input type="file" name="userFile">
</div>
<div>
搜索内容: <input type="search" name="searchContent">
</div>
<input type="submit">
<input type="reset">
</form>
结果:
三,文本域和下拉框标签:
textrarea:文本框
cols 文本域的宽度
rows 文本域的高度
文本域中的默认值设置在开始和结束标签中间
下拉框:
select标签:定义下拉框
option标签:定义下拉选项
selected属性:设置默认选中某个选项
<form action="./demo4.html" method="get">
<div>
用户评价:
<textarea name="textarea" cols="40" rows="15">这是默认值</textarea>
</div>
<div>
用户身高:
<select name="heightContent">
<option value="">请选择身高</option>
<option value="160">160cm</option>
<option value="165">165cm</option>
<option value="170">170cm</option>
<option value="175">175cm</option>
</select>
</div>
</form>
结果: