HTML表单介绍

最新推荐文章于 2024-10-10 11:15:29 发布

芏舛

最新推荐文章于 2024-10-10 11:15:29 发布

阅读量283

点赞数

分类专栏：前端学习文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/qq_50864240/article/details/125954589

版权

前端学习专栏收录该内容

16 篇文章 0 订阅

订阅专栏

文章目录

前言
一、表单是什么？
二、表单域
二、表单按钮
三、表单标签
- - 1.概念：
四、表单案例
总结

前言

在HTML学习中，表单是使网页具有交互功能的重要部分。我们可以使用HTML表单从网站访问者那里进行数据的采集。

一、表单是什么？

表单是在网页中负责数据采集功能的。

二、表单域

１. 文本输入框

<input type="text">

２.密码输入框

<input type="password">

３.单选输入框

<input type="ｒａｄｉｏ"　ｎａｍｅ＝＂属性值“”>

注意：同一组的单选选项，必须有相同的name属性值！

４.复选框

<input type=＂checkbox">

二、表单按钮

1.提交按钮

提交按钮

<button type="submit">提交按钮</button>

2.普通按钮

<button type="button">普通按钮</button>

3.重置按钮

<button type="reset">重置按钮</button>

三、表单标签

1.概念：

数据提交的地址和方式

<from action= "数据提交的方式" method="数据提交的方式可以是get或post">
    表单域
    表单按钮
</from>

注意：如果数据要提交到后端，必须保证表单域有name属性值

四、表单案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="https://www.abcd.com/">
        用户名 <input type="text" name="username" placeholder="请输入2-8个文字">
        <br>
        密码：<input type="password" name="password">
        <br>
        性别：<input type="radio" name="sex" id="">男
        <input type="radio" name="sex" id="">女
        <br>
        爱好：
        <input type="checkbox" name="" id="">唱歌
        <input type="checkbox" name="" id="">看书
        <input type="checkbox" name="" id="">打游戏
        <input type="checkbox" name="" id="">看电视
        <br>
        <button type="submit">登录</button>
        <button type="reset">取消</button>
    </form>
</body>
</html>