大家好，欢迎来到IT知识分享网。
表单标签：
- 所有的表单内容，都要写在form标签里面
- 核心属性：type，不同的type决定了该输入框的方式、外观、规则等等
常见Type
- 明文：普通文本，type = “text”
- 暗文：隐藏文本密码，type=“password”
- 以上均可通过设置，value：表单默认值，maxlength：字符最大长度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<form>
<h2>01.简单表单</h2>
账号：<input type="text">
<br><br>
密码：<input type="password">
<hr>
</form>
</body>
</html>- 单选框：只能选择一个结果，type=“radio”
如果是radio按钮直选一个，那么标签属性的name应该是同一个，比如男和女，作为性别信息，只能选一个，则他们的input都是相同的name属性值
<h2>02.单选框</h2> 性别：<input type="radio" name="Sex">男 <input type="radio" name="Sex">女<input type=”radio” name=”Sex”>保密 <hr>
- 多选框：多选结果，type=“checkbox”
<h2>03.多选框</h2> 爱好：<input type="checkbox" name="Basketball">Basketball <input type="checkbox" name="Game">Game <input type="checkbox" name="Running">Running <hr>Label标签
所有表单元素都可以通过label标签进行绑定，通过label的属性值：for = 表单元素id
这么做的目的是，在点击label时，能够聚焦到绑定的Input输入框，例如点击 账号，鼠标自动聚焦到其输入框了
<h2>04.Label标签</h2> <label for="NameInput">账号：</label> <input type="text" id="NameInput"> <hr>
Select标签
<h2>05.Select标签(不带optgroup)</h2>
<select>
<option>波多野结衣</option>
<option>大桥未久</option>
<option>三上悠亚</option>
<option>椎名由奈</option>
</select>
<h2>06.Select标签(带optgroup)</h2>
<select>
<optgroup label="女优">
<option>波多野结衣</option>
<option>大桥未久</option>
<option>三上悠亚</option>
<option>椎名由奈</option>
</optgroup>
<optgroup label="番号">
<option>SNIS030</option>
<option>TEK071</option>
<option>MTK78</option>
<option>NSS032</option>
</optgroup>
</select>
附
Code：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<form>
<h2>01.简单表单</h2>
账号：<input type="text">
<br><br>
密码：<input type="password">
<hr>
<h2>02.单选框</h2>
性别：<input type="radio" name="Sex">男
<input type="radio" name="Sex">女
<input type="radio" name="Sex">保密
<hr>
<h2>03.多选框</h2>
爱好：<input type="checkbox" name="Basketball">Basketball
<input type="checkbox" name="Game">Game
<input type="checkbox" name="Running">Running
<hr>
<h2>04.Label标签</h2>
<label for="NameInput">账号：</label>
<input type="text" id="NameInput">
<hr>
<h2>05.Select标签(不带optgroup)</h2>
<select>
<option>波多野结衣</option>
<option>大桥未久</option>
<option>三上悠亚</option>
<option>椎名由奈</option>
</select>
<hr>
<br><br>
<h2>06.Select标签(带optgroup)</h2>
<select>
<optgroup label="女优">
<option>波多野结衣</option>
<option>大桥未久</option>
<option>三上悠亚</option>
<option>椎名由奈</option>
</optgroup>
<optgroup label="番号">
<option>SNIS030</option>
<option>TEK071</option>
<option>MTK78</option>
<option>NSS032</option>
</optgroup>
</select>
<hr>
<h2>07.textarea标签</h2>
<textarea cols="5" rows="2">我是原始内容</textarea>
</form>
</body>
</html>
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/100886.html
