HTML中表单元素介绍及如何使用表单

小亮编码

已于 2023-12-19 16:51:59 修改

阅读量506

点赞数 7

分类专栏： HTML 文章标签： html 前端

于 2023-12-09 11:38:36 首次发布

本文链接：https://blog.csdn.net/a836996156/article/details/134891802

版权

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

前言

什么是表单

HTML中的表单（form）是一个用于收集用户输入的区域。表单可以包含各种输入元素，例如文本输入框、复选框、单选按钮、下拉菜单等，用户可以在表单中输入数据并提交给服务器进行处理。通过使用表单，网站可以与用户进行交互，收集用户输入的数据，例如注册新用户、提交评论、搜索等。

为什么要用表单

HTML使用表单的主要目的是收集用户输入的数据，并将这些数据发送到服务器进行处理。

表单的基本语法

在HTML中，一个完整的表单通常由表单域、表单控件（表单元素）和提示信息三个部分构成

<form action="表单提交地址" method="提交方法">
    … 文本框、按钮等表单元素…
</form>

表单属性：

action 将表单数据提交到指定地址
method 表单数据发送至服务器的方法,常用的有两种 get(默认)/post。

get和post的区别

get：从指定的资源请求数据。
post：向指定的资源提交要被处理的数据

表单控件元素

表单元素

在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件

表单元素可分为三类，即：input输入表单元素、select下拉表单元素、textarea文本域元素

input 输入表单元素

标签是一个单标签，用于收集用户信息

控件名称	type属性值	描述
文本框	text	用于接收用户的文本输入，默认宽度20，可以使用size属性设置文本框的宽度
密码框	password	用于接收用户的密码输入。输入的内容将被隐藏为点或星号，以保护用户的隐私。
单选按钮	radio	用于提供多个选项中的选择。为了将多个单选按钮组合在一起，需要给它们设置相同的name属性，但不同的values属性。
复选框	checkbox	用于提供多个选项中的多选选择。与单选按钮类似，需要给复选框设置相同的name属性，但不同的value属性。
提交按钮	submit	用于在表单中提交用户输入的数据。用户在填写完表单内容后，可以点击提交按钮将数据发送到服务器进行处理。
文件域	file	用于让用户选择上传文件。当用户点击该输入框时，会弹出一个文件选择对话框。
邮箱	email	用于接收电子邮件地址。输入内容会进行基本的邮箱格式验证。
数字	number	用于接收数字输入。可以通过min和max属性设置允许的最小和最大值，step属性设置递增或递减的步长。
重置	reset	用于清空表单中的所有输入，恢复到初始状态。
搜索框	search	用于接收搜索关键字。通常会有一个搜索图标和清除按钮。

文本框（text） <input type="text">

<form>
    <label>文本框：<input type="text"></label>
</form>

结果：
在这里插入图片描述
用于接收用户的文本输入。

密码框（password） <input type="password">

<form>
    <label>密码框：<input type="password"></label>
</form>

结果：
在这里插入图片描述
输入的内容将被隐藏为点或星号，以保护用户的隐私。

单选按钮（radio） <input type="radio">

<form>
    性别：男<input type="radio" name="1" values="男">
    女<input type="radio" name="1" values="女">
</form>

结果：
在这里插入图片描述
给它们设置相同的name属性，但不同的value属性，就只能选择一个，但是提交给服务器的数据不同，不设置相同的name属性的话都能同时选择。

复选框（checkbox） <input type="checkbox">

<form>
    爱好：吃饭<input type="checkbox">睡觉<input type="checkbox">打游戏<input type="checkbox">
</form>

结果：
在这里插入图片描述
可以进行多选。

提交按钮（submit） `

<form>
    <input type="submit" value="提交">
</form>

结果：
在这里插入图片描述
点击提交，会将用户输入的数据提交给服务器。

文件域（file） <input type="file">

<form>
    上传头像：<input type="file">
</form>

结果：在这里插入图片描述
点击选择文件，会打开一个窗口。

邮箱（email）<input type="email">

<form>
    邮箱<input type="email" name="yx">
    <input type="submit" value="提交">
</form>

结果：
在这里插入图片描述
点击提交时，会提示按邮箱格式规范输入。

8.数字（number）<input type="number">

<form>
	
    数字<input type="number">
</form>

结果：
在这里插入图片描述
可以直接输入数字，也可以点击右边的上下箭头进行加减。

9.重置（reset）<input type="reset">

<form>
    <input type="reset">
</form>

结果：
在这里插入图片描述
用于清空表单中的所有输入，恢复到初始状态。

搜索框（search）

<form>
    <input type="search">
</form>

结果：
在这里插入图片描述
用于接收搜索关键字。通常会有一个搜索图标和清除按钮，点击×会清空内容。

select 下拉表单元素

使用场景：在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用标签控件定义下拉列表

注意点：

中至少包含一对
在中定义selected=“selected”时，当前项即为默认选中项

代码实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
</head>
<body>
<form>
    地址：
    <select>
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
        <option selected="selected">深圳</option>
    </select>
</form>
</body>
</html>

结果：
在这里插入图片描述

textarea 表单元素

当用户输入内容较多的情况下，我们可以用表单元素标签替代文本框标签，在表单元素中，标签是用于定义多行文本输入的控件

代码实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
</head>
<body>
<form>
        今日反馈：
        <textarea placeholder="请在此输入内容"></textarea>
</form>
</body>
</html>

结果：
在这里插入图片描述

控件属性

属性	描述
value	文本框赋默认值
checked	默认按钮，单选和复选都可用
maxlength	输入内容最大长度
hidden	隐藏
readonly	只读
disabled	禁用
label	聚焦
outline	轮廓需要使用css设置
placeholder	提示输入
required	必填

1.默认值（value） <input type="text" value="我叫张三">

<form>
    <input type="text" value="我叫张三">
</form>

结果：
在这里插入图片描述
value里面的值，在打开网页时就存在。

默认按钮（checked）<input type="radio" checked> （单选复选都可以用）

<form>
    性别：男<input type="radio" name="1" values="男">
    女<input type="radio" name="1" values="女" checked>
</form>

结果:
在这里插入图片描述
打开网页时就默认选择女。

最大长度（maxlength）<input type="text" maxlength="最大长度的数值">

<form>
    <input type="text" maxlength="5">
</form>

结果：
在这里插入图片描述
内容最长只能5个字，因为我设置的最大长度就是5，因为博主不会动画不能生动展示结果，大家可以自行复制代码，进行测试。

隐藏（hidden）<input type="text" hidden>

<form>
    <input type="text" hidden>
    <input type="text">
</form>

结果：
在这里插入图片描述
可以看到只有一个文本框，第一个隐藏了。

只读（readonly）<input type="text" readonly>

<form>
    <input type="text" readonly value="只读文本">
</form>

结果：
在这里插入图片描述
文本现在只能看，不能进行修改了，大家可以复制代码，自行测试；只读属性在表单中的使用场景是为了限制用户对特定字段的编辑和修改，以确保数据的完整性和准确性。

禁用（disabled）<input type="text" disabled>

<form>
    <input type="text" disabled value="只读文本">
    <input type="text" value="只读文本">
</form>

结果：
在这里插入图片描述
可以看到颜色都变灰色了，完全点击不了更别说输入了；禁用属性在表单中的使用场景是为了阻止用户对特定字段或整个表单进行输入、编辑或提交，以达到限制或控制用户操作的目的。

聚焦（label）<label>文本框：<input type="text"></label>

<form>
    <label>文本框：<input type="text"><input type="text"></label>
</form>

结果：
在这里插入图片描述
当点击文字时，会自动聚焦到最近的表单元素，边框颜色变黑。

轮廓（outline）

在HTML表单中，常用的轮廓属性包括：

outline-color: 设置轮廓的颜色。可以使用具体的颜色值（如red、#00ff00等），也可以使用预定义的颜色名称（如blue、green等）。
outline-width: 设置轮廓的宽度。可以使用具体的像素值（如2px、3px等），也可以使用相对单位（如em、rem等）。
outline-style: 设置轮廓的样式。常用的取值有solid（实线）、dotted（点线）、dashed（虚线）、double（双实线）等。

这些属性可以分别使用，也可以合并在一起使用，形成一个轮廓属性的声明。例如：

input.outline{
  outline: 2px dashed red;
}

以上代码将会给class为"custom"的input元素设置一个2px宽、红色、虚线样式的轮廓。

除了上述常用属性，还可以使用outline-offset属性，设置轮廓与元素边缘之间的偏移量。这可以用来调整轮廓的位置。

需要注意的是，轮廓属性仅用于视觉上的效果，不会影响表单元素的交互行为。如果需要禁用表单元素或设置只读属性，应使用其他相应的属性，如"disabled"或"readonly"。

代码实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .a{
            outline: 2px solid red;
        }
    </style>
</head>
<body>
<form>
    <input type="text" class="a">
    <input type="text">
</form>
</body>
</html>

结果：
在这里插入图片描述
9. 提示输入（placeholder）<input type="text" placeholder="要提示的内容">

<form>
    <input type="text" placeholder="请输入">
    <input type="text" placeholder="请输入">
</form>

结果：
在这里插入图片描述
提示用户输入，当输入时提示会隐藏，把内容删除提示又会显示。

必填（required）<input type="text" required>

<form>
    <input type="text" required>
    <input type="submit">
</form>

结果：
在这里插入图片描述
当用户提交时，如果带有必填的元素没有填，提交时就会提示该元素没有填。

总结

一个完整的表单由表单控件(表单元素)、提示信息和表单域3个部分构成。

1、表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、搜索框等。
2、提示信息：一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。
3、表单域：相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过它定义、处理表单数据所用程序的url地址及数据提交到服务器的方法。
注：如果不定义表单域，表单中的数据就无法传送到后台服务器。

表单的作用主要是收集用户输入的数据，并将这些数据发送到服务器进行处理。

小亮编码

关注

7
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
HTML中表单元素介绍及如何使用表单

HTML中的表单（form）是一个用于收集用户输入的区域。表单可以包含各种输入元素，例如文本输入框、复选框、单选按钮、下拉菜单等，用户可以在表单中输入数据并提交给服务器进行处理。通过使用表单，网站可以与用户进行交互，收集用户输入的数据，例如注册新用户、提交评论、搜索等。一个完整的表单由表单控件(表单元素)、提示信息和表单域3个部分构成。1、表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、搜索框等。
复制链接

扫一扫

专栏目录