<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>从新出发之表单元素</title>
</head>
<body>
<!--<p cl-->
<form action="http://www.baidu.com">
<!-- 明文输入 value指定默认值-->
<!-- label用于关联-->
<label for="account">请输入</label>
<input type="text" value="value指定默认值" id="account">
<br>
<!-- 暗文输入-->
<label for="pwd">密码</label>
<input type="password" id="pwd">
<br>
<!-- 默认输入-->
<label for="selec">请选择车型</label>
<!-- list指定datalist-->
<input type="text" placeholder="这是默认输入" id="selec" list="cars"><br>
<!-- 数字输入 value类型是string-->
请输入
<input type="number" placeholder="请输入数字"><br>
<!-- 单选框-->
<!-- 如果想要互斥，单选框必须有name属性且必须相等-->
<!-- 默认需要checked-->
性别
<input type="radio" name="sex" checked>男
<input type="radio" name="sex">女
<input type="radio" name="sex">保密
<!-- 多选框 checkbox-->
<br>
<p>爱好</p>
<div><input type="checkbox">足球
<input type="checkbox">篮球
<input type="checkbox">桌球
</div> <br>
<!-- 按钮-->
<input type="button" value="请选择">
<!-- reset用于清空-->
<input type="reset" value="清空">
<!-- 提交按钮 submit-->
<input type="submit">
<!-- datalist-->
<datalist id="cars">
<option>宝马</option>
<option>奔驰</option>
<option>尼桑</option>
<option>宾利</option>
<option>红旗</option>
</datalist>
<!-- <input type="color">-->
<!-- <input type="file">-->
<!-- <input type="email">-->
<!-- select-->
<br>
<!-- select的name和option中的value适用于提交的-->
<select name="" id="">
<optgroup label="济南">
<option value="" selected >历下</option>
<option value="">历城</option>
<option value="">市中</option>
</optgroup>
<optgroup label="青岛">
<option value="">城阳 111</option>
<option value="">黄岛</option>
<option value="">崂山</option>
</optgroup>
</select>
<!-- textarea宽用cols高用rows-->
<textarea cols="40" rows="10">
</textarea>
</form>
</body>
</html>前端从头再出发之表单
猜你喜欢
转载自www.cnblogs.com/sogeisetsu/p/11734232.html
今日推荐
周排行