HTML表单----数据收集器

HTML表单----数据收集器

2024.4.11

HTML表单是我们进入网站最常见的东西，例如登录界面、注册信息界面等，它的作用是记录用户填写的信息，然后提交给后台。我们可以使用HTML设计出简洁的表单，在设计之前，先来介绍表单的相关内容。

表单结构

form：表单标签，用于定义表单，如

<form>
xxx
</form>

表单的所有内容都写在form中。

常用属性

• action：用于指定表单的提交地址（由后端给出指定地址）

• target：定义点击链接后打开页面的方式

  • _blank：新建空白页打开
  • _self：在当前页面跳转

输入框

input：定义输入框

常用属性：

• type：定义输入类型，下列为常见属性值：

• text：文本

• password：密码，输入内容会被隐藏

• name:其值代表input的名字

• value：输入框默认输入值（对文本框一般没用）

• maxlength：定义文本框内容输入最大值

• radio：单选框（圆按钮），定义单选框通常要跟着value值与name值

• checkbox：复选框（正方形按钮），定义复选框通常要跟着value值与name值

• checked：默认选中，用于单选框和复选框

• hidden：隐藏

• submit：定义提交按钮

下面会逐步介绍type属性不同的值具有的效果。

文本框与密码框

文本框是我们最常见的一种输入框，定义文本框的格式为

<input type="text">

密码框是我们在登录或注册界面必定出现的一种输入框，定义密码框的格式为

<input type="password">

了解如何书写文本框与密码框的代码后，我们来试着打上代码看看效果：

我们可以得到

由此我们可以知道，密码框输入的内容是会被隐藏起来的，而文本框则会正常显示输入内容。

按钮

我们通常能看见登录界面中有“点击登录”，注册界面有“点击注册”，它们都是写在<button>之中，例如

我们可以得到如下效果：

单选框与复选框

单选框和复选框也属于一种比较常见的表单控件。首先是单选框和复选框的书写格式

<input type="radio">//单选框
<input type="checkbox">//复选框

可以看到属性值radio和checkbox分别对应单选框与复选框，效果如下

这里我们注意以下几点：

1.单选框和复选框都要有name属性与value属性，确保提交给后台的数据无误，减少出错

2.单选框的name值应该要相同，否则起不到单选效果

如果我们这样写单选框

或者

则会这样

3.同类型复选框name值也要相同，方便后台数据分析
4.可以在<input>最后写上 checked 值来默认选中

隐藏域

HTML隐藏域指的是网页中用户不可见的表单元素，通过语法<input type=“hidden” value=“值”>来创建。

隐藏域是一种特殊类型的输入框，其type属性设置为“hidden”，因此用户无法看到、修改或者输入任何内容。

然而，我们可以在服务器端获取并处理这些值。它可以帮助我们在不干扰用户界面的情况下，收集和传递必要的信息。

提交与重置

提交与重置按钮都有两种写法：

//第一种，写在button中
<button>确认</button>//默认情况下值为submit
<button type="reset">重置</button>

//第二种，写在type中
<input type="submit" value="确认">//这里value写值是给按钮改名
<input type="reset">

PS：按钮不必写name值，你也不想把按钮提交到后台吧

普通按钮

就是一个很普通的按钮，后面会通过学习JS与AJAX来灵活运用，这里就不再过多介绍

文本域与下拉框

文本域

文本域相当于一个大块输入区域，区别于输入框，因为文本域里面可以换行

书写格式为

<textarea name="" id="" cols="20" rows="5"></textarea>

这里默认给出四个属性值，其中name与id尤为关键

• name：用于表单数据提交，提交的是文本域输入的内容，即value

• id：标明唯一元素，在CSS与JS编写中可以准确定位

  PS：我们可以通过CSS修改文本域大小，无需在textarea中设置行列大小

下拉框

当我们选省份和城市，或年份月份等，经常会用到下拉框，下面是下拉框的代码展示

<select name="" id="">
<option value="">xxx</option>
<option value="">xxx</option>
<option value="">xxx</option>
<option value="">xxx</option>
</select>

<select>用于定义表单，表单的选项则写在<option>中；可以在<option>中写上 selected 表示默认选中

禁用表单控件

属性disabled，可以写在任何表单标签上，通常在JS中灵活运用

label标签

for属性：与id属性对应，用作关联别的表单控件，关联后点击文字，对应的表单控件就会获取焦点

例如，<label>中写名字，id写在<input>中，则点击<input>前面的名字可以选中输入框

写法可以是用<label>包裹名字或者包裹整个表单标签

标签fieldset与legend（了解即可）

区分主要信息和次要信息，不包含隐藏域,fieldset为表单控件分组，legend是分组的标题

格式：

<fieldset>
	<legend>
	xxx
	</legend>
</fieldset>

这是展示效果

注意，<legend>中只能写纯文本

关于表单的知识点我们就介绍到这里了，总结完顺便还把案例做了。希望能帮到每一位读者。