HTML常见标签-表单

1. 表单的作用

表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分： 表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

• 表单标签

就像表格一样，需要有一个table标签

• 表单域

输入框、单选框、多选框、下拉框、密码框、文件上传、多行文本输入框

• 表单按钮

提交按钮、重置按钮、一般按钮

虽然表单有这么多功能，但是，我们前期学习只学习外观样式。

2. 表单标签

2.1. form标签

一个表单曾经需要用form包裹，现在因为前端有更好的技术实现数据交互，所以form标签不重要了，用不用form标签包裹，都可以。建议不用。

2.2. input

input标签不代表某一种元素，使用input可以实现很多的效果。

2.2.1. type="text"

表示文本输入框，可以输入单行文本

<input type="text">

2.2.2. type="password"

表示密码框，可以输入密文，输入的内容用黑点展示。

密码输入框安全吗？自己的电脑上尽量不要用密码保存功能，别人只要修改输入框中的type类型，密码就会显示。

占位 placeholder

通常我们的输入框中会提示要输入的内容。需要使用placeholder属性

<input type="xxx" placeholder="占位内容">

没内容时，占位显示，有内容时占位消失。

2.2.3. type="radio"

单选框，默认情况下，单选框时未选中状态。同时单选框默认不会有单选效果，所有的单选框都会被选中。

name属性

name属性可以给任意的input添加，对于其他input暂时没有什么作用。但是如果想要让多个radio有单选效果，就必须给对应的单选框添加相同的name属性，值可以为任意值。

<input type="radio" name="1">
<input type="radio" name="1">
<input type="radio" name="1">
<input type="radio" name="2">
<input type="radio" name="2">
<input type="radio" name="2">

checked属性

添加给单选或者多选后，可以让对应的选择框默认被选中

<input type="radio" checked>

只有属性没有属性值

2.2.4. type="checkbox"

用来在页面上实现多选框

<input type="checkbox">

多选也能通过checked属性设置默认选中状态。

disabled

这个属性可以任意的表单元素添加，让用户不能对某些表单元素进行操作。

<input type="xxx" disabled>

readonly

只读属性，表示这个输入框没有办法输入内容，只能阅读内部的内容。一般不用。

2.2.5. type="file"

很多时候，我们的网页上需要进行文件的上传操作，比如头像等。就需要使用文件上传组件

<input type="file">

现在我们不能实现真正的上传文件的操作，想要实现还需要结合JS和后台一起，才能实现。

2.2.6. 下拉框

下拉框不属于input，是单独的标签。需要多个标签才能实现下拉框操作

select + option

<select>
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
  <option>选项4</option>
</select>

这个东西在练习时用一用还行，因为样式无法修改，所以未来项目中需要自己模拟select(结合css)

label标签

配合表单元素来实现，点击文本也能让对应的表单元素获取焦点的功能。

我们要使用label属性，包裹我们input旁边的文本

该标签有一个属性，叫for，这个属性的属性值，如果和对应的某个input的id值相同的话，就能实现对应的效果了。

<input type="radio" name="sex" id="male"> <label for="male">男</label>

textarea标签

多行文本框