HTML基础03-HTML标签（下）03-表单标签
HTML基础03-HTML标签（下）03-表单标签
03-表单标签
3.1为什么需要表单
使用表单的目的是为了收集用户信息。在网页中，如果需要与用户进行交互，收集用户资料，此时就需要表单。
3.2表单的组成
在HTML中，一个完整的表单通常由表单域、表单控件（也称表单元素）和提示信息3各部分构成。
3.3表单域
表单域是一个包含表单元素的区域。
在HTML页面中，使用<form>标签来表示一个表单域，以实现用户信息的收集和传递。
<form>会把其范围内的表单元素信息提交给服务器。
基本语法格式
<!-- 表单域标签 -->
<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素
</form>属性 | 属性值 | 说明 |
|---|---|---|
action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址 |
method | get/post | 用于设置表单数据的提交方式 |
name | 名称 | 用于指定表单的名称，以区分同一个页面的多个表单域 |
3.4表单控件
在表单域中可以定义各种表单控件（表单元素），这些表单元素就是允许用户在表单中输入或者选择的内容控件。
<input>输入表单元素
该标签用于收集用户信息。
在<input>标签中包含一个type属性，根据不同的type属性值，输入字段拥有很多形式（可以是文本字段、复选框、掩码后的文本字段、单选按钮、按钮等）。
<input type="属性值" />属性值 | 说明 |
|---|---|
button | 定义可点击按钮（多用于通过JavaScript启动脚本） |
checkbox | 定义复选框 |
file | 定义输入字段和“浏览”按钮，共文件上传 |
hidden | 定义隐藏的输入字段 |
image | 定义图像形式的提交按钮 |
password | 定义密码字段，该字段中的字符被掩码处理 |
radio | 定义单选按钮 |
reset | 定义重置按钮，重置按钮会清除表单中的所有数据 |
submit | 定义提交按钮，提交按钮会把表单数据发送到服务器 |
text | 定义单行输入字段，用户可在其中输入文本，默认宽度为20个字符 |
<!-- 表单域标签 -->
<form align="center">
<!-- 表单控件 -->
button:<input type="button" /> <br />
checkbox:
checbox1<input type="checkbox" name="复选框"/>
checbox2<input type="checkbox" name="复选框"/>
checbox3<input type="checkbox" name="复选框"/><br />
file:<input type="file" /> <br />
hidden:<input type="hidden" /> <br />
image:<input type="image" /> <br />
password:<input type="password" /> <br />
radio:
radio1<input type="radio" name="单选按钮"/>
radio2<input type="radio" name="单选按钮"/>
radio3<input type="radio" name="单选按钮"/> <br />
reset:<input type="reset" /> <br />
submit:<input type="submit" /> <br />
text:<input type="text" />
</form>
除type属性外，<input>标签还有其他很多属性，其常用属性如下：
属性 | 属性值 | 说明 |
|---|---|---|
name | 由用户自定义 | 定义input元素的名称 |
value | 由用户自定义 | 规定input元素的值 |
checked | checked | 规定此input元素首次加载时应被选中 |
maxlength | 正整数 | 规定输入字段中字符的最大长度 |
注意点：
- name和value是每个表单元素都应该有的属性，主要是给后台人员使用
- name是表单元素的名称，要求同一组单选按钮或同一组复选框有相同的name值
- checked属性主要针对于单选按钮和复选框，作用是打开页面时默认选中某个单选按钮或复选框
<select>下拉表单元素
使用场景：在页面中，如果有多个选项让用户选择，并且想要节省页面空间，就可以选择使用<select>标签来定义下拉列表。
基本语法格式
<!-- 下拉列表 -->
省份：
<select>
<option>请选择省份</option>
<option>北京</option>
<option>河北</option>
<option>山东</option>
</select>注意点：
- <select>中至少包含一对<option>
- 给某个<option>添加 selected=“selected” 属性，表示当前项为打开页面时的默认选中项
<textarea>文本域标签
使用场景：当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们应该使用<textarea>标签。在表单元素中，<textarea>标签是用于定义多行文本的输入控件。
基本语法格式
<!-- 文本域标签 -->
个人介绍：
<textarea cols="30" rows="3">这个人很懒，什么都没有留下...</textarea>注意点：
- <textarea></textarea>之间的文字表示打开页面时，文本域内默认出现的文字
- 可以通过clos和rows两个属性来设置文本域的大小，但在实际开发中会通过CSS来设置，不会使用这两个属性