HTML通俗易懂—表单标签+表单元素（input输⼊表单元素+select下拉列表
+tex。。。
现实中的表单：
1、表单的组成
在 HTML 中，⼀个完整的表单通常由表单域、表单控件（也称为表单元素）和 提⽰信息3个部分构成。
（1）表单域
表单域是⼀个包含表单元素的区域。
在 HTML 标签中， <form> 标签⽤于定义表单域，以实现⽤户信息的收集和传递。
<form> 会把它范围内的表单元素信息提交给服务器。
<form action=“url地址” method=“提交⽅式” name=“表单域名称">
各种表单元素控件
</form>
基础⼩⽩来说，我们暂时不⽤表单域提交数据，只需要写上 form 标签即可。等学习服务器编程阶段再进⼀步学。
这⾥只需要记住两点:
1. 在我们写表单元素之前，应该有个表单域把他们进⾏包含。
2. 表单域是 form标签。
2、表单控件(表单元素)
在表单域中可以定义各种表单元素，这些表单元素就是允许⽤户在表单中输⼊或者选择的内容控件。
接下来我们讲解:
2.1 input输⼊表单元素
input 是输⼊的意思，表单元素中 <input> 标签⽤于收集⽤户信息。
在 <input> 标签中，包含⼀个 type 属性，根据不同的 type 属性值，输⼊字段拥有很多种形式（可以是⽂本字段、复选框、掩码后的⽂本控件、单选按钮、按钮等）。
<input /> 标签为单标签
type 属性设置不同的属性值⽤来指定不同的控件类型
（1） type 属性的属性值及其描述如下：
（2）除 type 属性外，<input>标签还有其他很多属性
其常⽤属性如下：
1. name 和value 是每个表单元素都有的属性值，主要给后台⼈员使⽤。
value:
2. name 表单元素的名字, 要求 单选按钮和复选框要有相同的name值。
3. checked属性主要针对于单选按钮和复选框, 主要作⽤⼀打开页⾯，就要可以默认选中某个表单元素。
4. maxlength 是⽤户可以在表单元素输⼊的最⼤字符数, ⼀般较少使⽤。
input表单元素案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"content="IE=edge">
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<!-- text ⽂本框⽤户可以⾥⾯输⼊任何⽂字-->
⽤户名：<input type="text"name="username"value="请输⼊⽤户名"maxlength="6"><br>
<!-- password 密码框⽤户看不见输⼊的密码-->
密码：<input type="password"name="pwd"><br>
<!-- name 是表单元素名字，这⾥性别单选按钮必须拥有相同的名字才可以实现多选⼀-->
<!--单选按钮和复选框可以设置checked属性，当页⾯打开的时候就可以默认选中这个按钮-->
性别：男<input type="radio"name="sex"value="男">⼥<input type="radio"name="sex"value="⼥"><br>
<!-- checkbox 复选框多选多-->
爱好：吃饭<input type="checkbox"name="hobby"value="吃饭">睡觉<input type="checkbox"name="hobby"value="睡觉">打⾖⾖<input type="check box"name="hobby"value="打⾖⾖"><br>
<!--点击了提交按钮，可以把表单域form⾥⾯的表单元素⾥的值提交给后台服务器-->
<input type="submit"value="免费注册">
<!--普通按钮还原表单元素初始的默认状态-->
<input type="reset"value="重新填写">
<!--普通按钮button后期结合js搭配使⽤-->
<input type="button"value="获取短信验证码">
</form>
</body>
</html>
（3）额外重要补充
问1：有些表单元素想刚打开页⾯就默认显⽰⼏个⽂字怎么做?
答1：可以给这些表单元素设置 value 属性=“值”
⽤户名: <input type="text"value="请输⼊⽤户名" />
问2：页⾯中的表单元素很多，如何区别不同的表单元素?
答2 ：name 属性：当前 input 表单的名字，后台可以通过这个 name 属性到这个表单。页⾯中的表单很多，name 的主要作⽤就是⽤于区别不同的表单。
⽤户名: <input type="text"value="请输⼊⽤户名"name="username" />
name 属性后⾯的值，是⾃定义的
radio (或者checkbox）如果是⼀组，我们必须给他们命名相同的名字
<input type="radio"name="sex" />男
<input type="radio"name="sex" />⼥
问3：如果页⾯⼀打开就让某个单选按钮或者复选框是选中状态?
答3：: checked 属性：表⽰默认选中状态。⽤于单选按钮和复选按钮。
性别:
<input type="radio"name="sex"value="男"checked="checked" />男
<input type="radio"name="sex"value="⼥" />⼥
问4：如何让input表单元素展⽰不同的形态? ⽐如单选按钮或者⽂本框？
答4：type属性：type属性可以让input表单元素设置不同的形态。
<input type="radio"name="sex"value="男"checked="checked" />男
<input type="text"value=“请输⼊⽤户名”>
2.2<label>标签
<label> 标签为 input 元素定义标注（标签）。
htmlradio设置默认的按钮
<label> 标签⽤于绑定⼀个表单元素, 当点击<label> 标签内的⽂本时，浏览器就会⾃动将焦点(光标)转到或者选择对应的表单元素上,⽤来增加⽤户体验。(⽐如点”男“，这个字，那么男的复选框被选上)
语法：
<label for="sex">男</label>
<input type="radio"name="sex"id="sex" />
核⼼： <label> 标签的 for 属性应当与相关元素的 id 属性相同。
2.2 select下拉表单元素
使⽤场景: 在页⾯中，如果有多个选项让⽤户选择，并且想要节约页⾯空间时，我们可以使⽤<select>标签控件定义下拉列表。
语法：
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
1. <select> 中⾄少包含⼀对<option> 。
2. 在<option> 中定义 selected =“ selected " 时，当前项即为默认选中项。
下拉列表框案例：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。