form表单

小胡来

已于 2023-05-13 15:52:24 修改

阅读量313

点赞数

文章标签： html5

于 2023-05-13 15:47:43 首次发布

本文链接：https://blog.csdn.net/2201_75899444/article/details/130656874

版权

本文详细介绍了HTML中<form>标签的属性和元素，包括action、method（GET与POST的区别）、name属性，以及<input>、<select>和<textarea>标签的用法和各种类型。还讨论了表单提交的安全性问题。

摘要由CSDN通过智能技术生成

1.<form>

<form>标签是表单是一个框架,其中包含action，method，name属性

1.1. <form>标签的属性

action ----- 跳转的路径

method ------ 用来明确表单提交的方式（get post）默认值是get

name ----- 表单的名称，在地址栏

首先，action的地址分为绝对路径和相对路径

绝对路径：从盘符开始，找到你所需要的文件的路径路径+文件的名称

相对路径：当前源文件和目标文件的相对位置

其中，method的值'get'会把用户的信息暴露在地址栏上，例如用户名和密码

而post则不会将用户信息暴露，相较于 get安全

1.2. <form>标签的元素

表单元素（文本框，密码框，下拉列表框等等），一般由input，textarea，select标签构成，需要放到form标签内使用

1.2.1.<input>标签

<input>的属性有type，value，name

其中type的值有:

text ----- 文本框

password ---- 密码框

radio ----- 单选按钮

checkbox ---- 多选按钮

submit ------ 提交按钮

reset ----- 复位按钮

button ---- 普通按钮

image ----- 图像按钮

file ------ 文本域（上传文件的按钮）

hidden ---- 隐藏域

email ------ 邮箱

color ---- 颜色域

date ----- 日期

time ----- 时间

datetime-local ----- 日期+时间

range或renge ------ 进度条

<!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.baidu.com/" method="post" name="regester">
        <input type="text" value="张三" name="uesername">
        <input type="password" name="password"><br>
        <input type="radio" value="男" name="gender" checked>男
        <input type="radio" value="女" name="gender">女<br>
        <input type="checkbox" name="aihao">唱
        <input type="checkbox" name="aihao">跳
        <input type="checkbox" name="aihao">rap
        <input type="checkbox" name="aihao">篮球<br>
        <input type="submit">
        <input type="reset">
        <input type="button" value="普通按钮">
        <input type="image" src="ggbom.jpg">
        <!-- 图像按钮 也可以提交-->
        <input type="file">
        <input type="hidden" value="12345"><br>
        <input type="email" name="email" value="请填写邮箱">
        <input type="color">
        <input type="date">
        <input type="time">
        <input type="datetime-local">
        <input type="renge">
        <input type="range">
    </form>
</body>
</html>