表单元素以及get和post提交

最新推荐文章于 2024-07-19 10:03:45 发布

原创最新推荐文章于 2024-07-19 10:03:45 发布 · 377 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #html5

HTML 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了HTML中的表单元素，包括get和post提交方式的区别。get方式提交数据会在URL中显示，适合传递少量安全数据；post方式更安全，适合传输大文件或敏感信息。此外，还详细讲解了表单元素的属性，如type、name、value等，并列举了不同类型的表单元素，如文本框、单选框、按钮和多选框等。同时提到了文件域、邮箱验证、滑块、搜索框等高级表单元素及其用法。

一、get和post提交

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--表单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="pwd"></p>
    
    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form>
</body>
</html>

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

二、表单元素格式

属性	说明
type	指定元素的类型。text ， password ， checkbox ， radio ， submit ， reset ， file， hidden ， image和button，默认为text
name	指定表单元素的名称
value	元素的初始值。type为radio时必须指定一个值
size	指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其它类型，宽度一像素为单位
maxlength	type为text或password时，输入的是最大字符数
checked	type为radio或checkbox时，指定按钮是否是被选中