HTML——表单标签

最新推荐文章于 2024-11-17 20:29:19 发布

新建Word

最新推荐文章于 2024-11-17 20:29:19 发布

阅读量100

点赞数 2

文章标签： html 前端 java

本文链接：https://blog.csdn.net/qq_64848411/article/details/132038571

版权

form标签表示表单本身，如果表单没有对应的表单项（表单控件），不会显示任何收集数据的数据

<!-- get方式提交的特点：

1：提交的数据在浏览器的地址栏可以直接看到，

2：提交的数据大小有限制。

3：代码方便，速度快

post方式提交的特点：

1：提交的数据，在地址栏上边不会显示，需要使用浏览器的抓包工具才能看到提交的数据。

2：提交的数据大小没有限制，文件上传的时候，必须使用post；

3：代码相对复杂。

        <!-- action="表单内容提交的网站" method="(get / post)" -->

    <form action="#" method="post"></form>

input标签中的提交按钮

butter属性跟submit属性虽然都是按钮，但是butter在点击时不会有任何反应，没有效果的按钮。

还可以在按钮中使用图

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片按钮</title>
</head>

<body>

    <input type="image" src="../img/anNiu.jpg" width="100px" height="25px">
    <!-- src为图片位置 这个是我本电脑的位置，在使用时需要自己把图片下载下来 -->
</body>

</html>

表单框

输入框：在表单中可以输入内容。普通的文本输入框。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>普通的文本输入框</title>
</head>

<body>

   姓名：<input type="text">
</body>

</html>

密码框：输入后会变成小黑点。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>密码输入框</title>
</head>

<body>
 
    密码：<input type="password">

</body>

</html>

下拉框：可以初始化选中项

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下拉框</title>
</head>
<body>
    <select name="address" id="address">
        <option value="beijing">北京,大首都</option>
        <option value="shanghai">上海市</option>
        <option value="guangzhou">广州省</option>
        <option value="zhengzhou">河南省</option>
    </select>
    <select name="shi" id="shi">
        <option value="zhengzhou">郑州市</option>
        <option value="luoyang">洛阳市</option>
        <option value="xinmi">新密</option>
</body>
</html>

单选框：多个选项只能选择一个，多用于表单中唯一的选项中使用

注意：name必须统一，如果不统一，两个都会勾选，或者出现错误

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单选框</title>
</head>

<body>
    <input type="radio" name="sex">男
    <input type="radio" name="sex" >女
</body>

</html>

多选框：可以勾选多个选择

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多选框</title>
</head>

<body>

    <input type="checkbox" name="hobby" >运动
    <input type="checkbox" name="hobby" >读书
    <input type="checkbox" name="hobby" >宅家
    <input type="checkbox" name="hobby" >还是（_ _），启动！
</body>

</html>