表单标签form、label、input、textarea、select 表单的介绍
表单⽤于搜集不同类型的⽤户输⼊(⽤户输⼊的数据)，然后可以把⽤户数据提交到web服务器 。
表单相关标签的使⽤
1. <form>标签 表⽰表单标签，定义整体的表单区域
2. <label>标签 表⽰表单元素的⽂字标注标签，定义⽂字标注
3. <input>标签 表⽰表单元素的⽤户输⼊标签，定义不同类型的⽤户输⼊数据⽅式
1. type属性
1. type="text" 定义单⾏⽂本输⼊框
2. type="password" 定义密码输⼊框
3. type="radio" 定义单选框
4. type="checkbox" 定义复选框
5. type="file" 定义上传⽂件
6. type="submit" 定义提交按钮
7. type="reset" 定义重置按钮
8. type="button" 定义⼀个普通按钮
4. <textarea>标签 表⽰表单元素的多⾏⽂本输⼊框标签 定义多⾏⽂本输⼊框
5. <select>标签 表⽰表单元素的下拉列表标签 定义下拉列表
1. <option>标签 与<select>标签配合，定义下拉列表中的选项
⽰例代码:
<form>
<p>
<label>姓名：</label><input type="text">
</p>
<p>
<label>密码：</label><input type="password">    </p>
<p>
<label>性别：</label>
<input type="radio"> 男
<input type="radio"> ⼥
</p>
<p>
<label>爱好：</label>
<input type="checkbox"> 唱歌
<input type="checkbox"> 跑步
<input type="checkbox"> 游泳
</p>
<p>
<label>照⽚：</label>
<input type="file">
</p>
<p>
<label>个⼈描述：</label>
<textarea></textarea>
</p>
<p>
<label>籍贯：</label>
<select>
<option>北京</option>
<option>上海</option>
<option>⼴州</option>
<option>深圳</option>
</select>
</p>
<p>
<input type="submit" value="提交">
<input type="reset" value="重置">
</p>
</form>
运⾏效果：
表单作⽤
表单⽬的是为了收集⽤户信息。
在我们⽹页中， 我们也需要跟⽤户进⾏交互，收集⽤户资料，此时也需要表单。
在HTML中，⼀个完整的表单通常由表单控件（也称为表单元素）、提⽰信息和表单域3个部分构成。
表单控件：
包含了具体的表单功能项，如单⾏⽂本输⼊框、密码输⼊框、复选框、提交按钮、重置按钮等。
提⽰信息：
⼀个表单中通常还需要包含⼀些说明性的⽂字，提⽰⽤户进⾏填写和操作。
表单域：
他相当于⼀个容器，⽤来容纳所有的表单控件和提⽰信息，可以通过他定义处理表单数据所⽤程序的url地址，以及数据提交到服务器的⽅法。如果不定义表单域，表单中的数据就⽆法传送到后台服务器。
input 控件
语法：
<input type="属性值" value="你好">
input 输⼊的意思
<input />标签为单标签
type属性设置不同的属性值⽤来指定不同的控件类型
除了type属性还有别的属性
常⽤属性：
1. type 属性
这个属性通过改变值，可以决定了你属于那种input表单。
⽐如 type = 'text' 就表⽰ ⽂本框 可以做 ⽤户名， 昵称等。
⽐如 type = 'password' 就是表⽰密码框 ⽤户输⼊的内容 是不可见的。
⽤户名: <input type="text" />
密码：<input type="password" />
2. value属性值
⽤户名:<input type="text"  name="username" value="请输⼊⽤户名">
value 默认的⽂本值。 有些表单想刚打开页⾯就默认显⽰⼏个⽂字，就可以通过这个value 来设置。
3. name属性
⽤户名:<input type="text"  name=“username” />
name表单的名字， 这样，后台可以通过这个name属性到这个表单。 页⾯中的表单很多，name主要作⽤就是⽤于区别不同的表单。
name属性后⾯的值，是我们⾃⼰定义的。
radio 如果是⼀组，我们必须给他们命名相同的名字 name 这样就可以多个选其中的⼀个啦
<input type="radio" name="sex"  />男
<input type="radio" name="sex" />⼥
name属性，我们现在⽤的较少， 但是，当我们学ajax 和后台的时候，是必须的。
4. checked属性
表⽰默认选中状态。 较常见于 单选按钮和复选按钮。
性别:
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="⼥" />⼥
上⾯这个，表⽰就默认选中了 男 这个单选按钮
5. input 属性⼩结
属性说明作⽤
type表单类型⽤来指定不同的控件类型
value表单值表单⾥⾯默认显⽰的⽂本
name表单名字页⾯中的表单很多，name主要作⽤就是⽤于区别不同的表单。checked默认选中表⽰那个单选或者复选按钮⼀开始就被选中了textarea中cols表示
label标签
⽬标：
label标签主要⽬的是为了提⾼⽤户体验。 为⽤户提⾼最优秀的服务。
概念：
label 标签为 input 元素定义标注（标签）。
作⽤：
⽤于绑定⼀个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输⼊焦点。如何绑定元素呢？
1. 第⼀种⽤法就是⽤label直接包括input表单。
<label> ⽤户名： <input type="radio" name="usename" value="请输⼊⽤户名">  </label>
适合单个表单选择
1. 第⼆种⽤法 for 属性规定 label 与哪个表单元素绑定。
<label for="sex">男</label>
<input type="radio" name="sex"  id="sex">
textarea控件(⽂本域)

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