表单标签：

所有的表单内容，都要写在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">女

多选框：多选结果，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>

【Html标签学习】表单标签相关推荐

Web学习第二天——HTML的基本标签（媒体标签、链接标签、列表标签、表格标签、表单标签）
第二天 HTML的常用标签(媒体标签.链接标签.列表标签.表格标签.表单标签) 一.媒体标签 (一).图片标签(img) 标签格式及属性介绍 (二).音频标签(embed.audio) embed标签 ...
Struts2中UI标签之表单标签介绍
1.在Struts2中UI标签的表单标签分为两种:form标签本身和单个表单标签. 2.Struts2表单标签包括:form.textfield.password.radio.checkbox.che ...
HTML 表格标签、列表标签、表单标签（案例：注册页面）
1. 表格标签表格是实际开发中非常常用的标签: 1. 表格的主要作用 2. 表格的基本语法 1.1 表格的主要作用表格主要用于显示.展示数据,因为它可以让数据显示的非常的规整,可读性非常好.特别是 ...
HTML的表格标签，列表标签，表单标签，HTML5有哪些新特性
HTML的表格标签,列表标签,表单标签,HTML5有哪些新特性欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可博客园主页:博客园主页-冰山一树Sankey CSDN主页: ...
[JavaWeb-HTML]HTML标签_表单标签
HTML标签:表单标签 * 表单:* 概念:用于采集用户输入的数据的.用于和服务器进行交互.* form:用于定义表单的.可以定义一个范围,范围代表采集用户数据的范围* 属性:* action:指定提 ...
java day32【HTML标签：表单标签、CSS】
第一章 HTML标签:表单标签 * 表单: * 概念:用于采集用户输入的数据的.用于和服务器进行交互. * form:用于定义表单的.可以定义一个范围,范围代表采集用户数据的范围 * 属性: * a ...
HTML标签-排版标签、媒体标签、列表标签、表格标签、表单标签、语义化标签、字符实体
一.排版标签 1.标题标签在新闻和文章的页面中都离不开标题,用来突出显示文章主题. h系列标题 <body><h1>1级标题</h1> <h2>2级标 ...
4、HTML——表格标签、表单标签
目录一.表格标签:table-tr-td/th 1.合并单元格 1.1 合并同行不同列的单元格(列合并) 1.2 合并同列不同行的单元格(行合并) 二.表单标签:form 1.form标签 2.i ...
HTML 列表标签、表格标签、表单标签
HTML 列表标签.表格标签.表单标签一.列表标签二.表格标签三.表单标签四.综合练习一.列表标签 <!DOCTYPE html> <html lang="en& ...
Day46（列表标签，表格标签，表单标签，css的引入方式，css选择器）
一.列表标签列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,"无序列表"的 ...

【Html标签学习】表单标签

表单标签：

常见Type

Label标签

Select标签

【Html标签学习】表单标签相关推荐

最新文章

热门文章