HTML学习-表单语法、表单元素格式、单选框、多选框、按钮 2021-1-19

心️要努力吖

已于 2022-06-05 20:19:01 修改

阅读量1.6k

点赞数

分类专栏：笔记文章标签： html 前端 javascript

于 2022-01-19 23:34:34 首次发布

本文链接：https://blog.csdn.net/m0_56661579/article/details/122589424

版权

笔记专栏收录该内容

61 篇文章

订阅专栏

本文详细介绍了HTML中的表单语法，包括表单的action和method属性，以及text、password类型的输入框。此外，还探讨了表单元素的格式设置，如value、maxlength和size属性。在单选框和多选框部分，讲解了checked属性的使用，以及如何通过name属性来限定单选和多选。最后，提到了不同类型的按钮，如提交、重置和图像按钮，以及label标签的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表单语法

表单form
action:表单提交的位置，可以是网站，也可以是一个请求处理地址
method:post,get 提交方式
get方式提交：我们可以再url中看到我们提交的信息，不安全，高效
post方式提交：比较安全，传输大文件
文本输入框 input type=“text”
密码框：input type=“password”
submit是提交，reset是重置

此图片是其他作者的，作为自己学习使用
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action:表单提交的位置，可以是网站，也可以是一个请求处理地址
method:post,get  提交方式
get方式提交：我们可以再url中看到我们提交的信息，不安全，高效
post方式提交：比较安全，传输大文件
-->
<form action="1.我的第一个网页.html" method="post">
    <!--文本输入框  input type="text"-->
    <p>名字：<input type="text" name="username"></p>
    <!--密码框：input type="password"-->
    <p>密码：<input type="password" name="psd"></p>
    <p>
        <input type="submit">
        <input type="reset">
    </p>

</form>
</body>
</html>

在这里插入图片描述
set是直接url查看

post是以下方式查看
在这里插入图片描述

表单元素格式

在这里插入图片描述

value：默认初始值

maxlength：最长可以输入的字符

size:文本框的长度

<p>名字：<input type="text" name="username" value="xxx" maxlength="8" size="30"></p>

在这里插入图片描述

radio单选框:checked表示默认选中

<input type="radio" value="boy" name="sex" checked>男

在这里插入图片描述

<p>性别：
        <input type="radio" value="boy">男
        <input type="radio" value="girl">女
    </p>

在这里插入图片描述

可以看出这两个选项都可以选，是因为radio单选框必须将两个放在同一个组里面，就和多选框没有什么区别，因此需要加name,所有属性是都需要加name 的。

可以更改为如下：

name 属性改为一样的名字就表示他们是一个组的，现在这个单选男女之间只能选一个

<p>
        <input type="radio" value="boy" name="sex">男
        <input type="radio" value="girl" name="sex">女
    </p>

在这里插入图片描述
现在只能选一个

多选框：checked表示默认选中

<!--多选框标签
    input type="checkbox"
    -->
    <p>爱好：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby">敲代码
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="game" name="hobby">游戏
    </p>

在这里插入图片描述

<input type="checkbox" value="code" name="hobby" checked>敲代码

在这里插入图片描述
用户在单元格中输入的最大字符maxlength

按钮

input type="button"普通按钮
input type="image"图片按钮
input type="submit"提交按钮
input type="reset"重置按钮

普通按钮

<!--按钮-->
    <p>
        <input type="button" name="btn1" value="点击变长">
    </p>

在这里插入图片描述

图片按钮

<p>
        <input type="button" name="btn1" value="点击变长">
        <input type="image" src="../resourse/image/1.jpg">
    </p>

在这里插入图片描述
鼠标放在图片上可以点击跳转

重置按钮

<p>
        <input type="reset" value="清空表单">
    </p>

在这里插入图片描述

label标签
扩大点击范围在这里插入图片描述