html常用表单元素使用.

Happy Moment!

已于 2023-12-19 15:24:17 修改

阅读量418

点赞数 8

文章标签： html 前端

于 2023-12-11 10:16:31 首次发布

本文链接：https://blog.csdn.net/2301_78753262/article/details/134920101

版权

🍓html常用表单元素使用

✨1.为什么需要表单？

表单：
使用表单目的是为了收集用户信息。

在我们网页中，我们需要跟用户进行交互，收集用户资料，此时就需要表单。
表单的组成

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

表单域是一个包含表单元素的区域。

在HTML标签中，标签用于定义表单域，以实现用户收集和传递。

✨ 2.表单中常用的一些元素;

表单元素	解释
test	普通文本框
password	密码输入框
checkbox	复选框
radio	单选框，属性name设置相同
image	将图片设置为提交按钮
option	下拉列表框
textarea	多行文本域
submit	提交按钮
button	普通按钮
reset	重置按钮
hidden	隐藏域
file	文件选择框

✨3.使用表单元素;

✨(1).文本属性

常见的文本属性有：text、password、email、number、url

代码演示如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单元素</title>
</head>
<body>
<!--表单-->
<form method="post" action="">
    <!--文本属性-->
    <!--定义一个单行的文本字段-->
    text<input type="text" name="name"><br>
    <!--定义一个密码输入框-->
    password<input type="password" name="password"><br>
    <!--定义一个Email地址输入框-->
    Email<input type="email" name="email"><br>
    <!--定义一个数值的输入宽-->
    number<input type="number" name="number"><br>
    <!--定义一个url地址的输入框-->
    url<input type="url" name="url"><br>
</form>
</body>
</html>

运行结果如下:
在这里插入图片描述

✨(2).日期属性

常见的日期属性有：date、datetime、month、week

代码演示如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单元素</title>
</head>
<body>
<!--表单-->
<form method="post" action="">
    <!--日期属性-->
    <!--定义一个date控件（包括年、月、日，不包括时间）-->
    date<input type="date" name="date"><br>
    <!--定义date和time控件(包括年月日，时分秒)-->
    datetime<input type="datetime" name="datetime"><br>
    <!--定义 month 和 year 控件（不带时区）-->
    month<input type="month" name="month"><br>
    <!--定义 week 和 year 控件（不带时区）-->
    week<input type="week" name="week"><br>
</form>
</body>
</html>

运行结果如下：
在这里插入图片描述

✨(3).按钮属性

常见的按钮属性有：
代码演示如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单元素</title>
</head>
<body>
<!--表单-->
<form method="post" action="">
    <!--按钮属性-->
    <!--定义一个可点击的按钮-->
    button<input type="button" name="button" value="按钮"><br>
    <!--定义一个重置的按钮-->
    reset<input type="reset" name="reset"><br>
    <!--定义一个提交的按钮-->
    submit<input type="submit" name="submit"><br>
</form>
</body>
</html>

运行结果如下：
在这里插入图片描述

✨(4).其他

常见的其他有：file、hidden、radio、range
代码演示如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单元素</title>
</head>
<body>
<!--表单-->
<form method="post" action="">
    <!--其他-->
    <!--选择文件-->
    file<input type="file" name="file"><br>
    <!--隐藏域-->
    hidden<input type="hidden" name="hidden"><br>
    <!--单选按钮-->
    radio<input type="radio" name="radio"><br>
    <!--滑动条-->
    range<input type="range" name="range"><br>
</form>
</body>
</html>