day 5 表单

最新推荐文章于 2024-07-26 15:05:55 发布

banana tree

最新推荐文章于 2024-07-26 15:05:55 发布

阅读量150

点赞数

文章标签：前端 html css

本文链接：https://blog.csdn.net/lemon_shinning/article/details/124352971

版权

表单form

表单是一个包含表单元素的区域。我们可以在表单元素中输入内容，例如type="text"文本框，select/option下拉选择框，textarea文本域。type有以下类型：

text	文本框（placeholder文本框中的字体）
password	密码
radio	单选框
checkbox	复选框
button	按钮
submit	提交
reset	重置
file	文件
hidden	隐藏

method（数据提交方式）有两个值，get信息拼接在地址后，信息不安全。post信息打包发送，信息安全。

<form action="">，其中action中内容是数据提交地址。

练习实现百度一下

<!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>百度一下</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        input{
            /* input默认背景颜色是白色 */
            border: 0;
            /* 外廓,不占盒模型面积 ,跟border用法一样*/
            outline: 0;
            background-color: transparent;
        }
        .search{
            width: 650px;
            height: 40px;
            border: 2px solid deepskyblue;
            margin: 150px auto;
            border-radius: 8px;
        }
        .search input{
            height: 40px;
            float: left;
        }
        #search{
            width: 530px;
            margin: 0 10px;

        }
        #submit{
            width: 100px;
            background-color: deepskyblue;
            color: #fff;
        }
        #submit:hover{
            background-color: blue;
            /* 指针变成小手 */
            cursor: pointer;
        }
    </style>
</head>
<body>
    <form action="https://www.baidu.com/s">
        <div class="search">
            <input id="search" name="wd" type="text">
            <input value="百度一下" id="submit" type="submit">
        </div>
    </form>
</body>
</html>

banana tree

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day 5 表单

表单form表单是一个包含表单元素的区域。我们可以在表单元素中输入内容，例如type="text"文本框，select/option下拉选择框，textarea文本域。type有以下类型：text 文本框（placeholder文本框中的字体） password 密码 radio 单选框 checkbox 复选框 button 按钮 submit 提交 reset 重置 file 文件 hidden 隐藏 me
复制链接

扫一扫