HTML表单元素

最新推荐文章于 2022-04-22 16:50:22 发布

一片海x

最新推荐文章于 2022-04-22 16:50:22 发布

阅读量73

点赞数

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

本文链接：https://blog.csdn.net/xingxinglinxi/article/details/108589813

版权

笔记专栏收录该内容

22 篇文章 0 订阅

订阅专栏

表单标签手机信息

把范围内的表单元素信息提交给服务器

各种表单控件

</form>

input输入表单元素

单选框实现多选一必须name相同，复选框也要有name属性

value，规定默认值（文本框用placeholder更合适）

checked 当页面打开时就默认选中的

label标签绑定一个表单元素（label标签for的属性值与表单元素id相同），点击label标签内文本时，光标就会转到对应的表单元素上

seclect下拉表单

textarea文本域表单，多行文本输入的空间（留言板、评论）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>增加客户</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        input,
        select,
        textarea {
            width: 400px;
            height: 40px;
            margin: 0 10px;
            background-color: #ccc;
            border: none;
            outline: none;

        }
        .item {
            width: 800px;
            height: 40px;
            margin: 20px 20px;
            color: #ccc;
        }
        label[class^="check"] input {
            width: 10px;
            height: 10px;
            color: #fff;
        }
        i {
            font-style: normal;
        }
        .checkgreen i {
            background-color: green;
        }
        .checkred i {
            background-color: red;
        }
        textarea {
            height: 60px;
        }
    </style>
</head>
<body>
    <form action="">
        <div class="item">
            <label for="tel">客户电话</label>
            <input type="text" id="tel" placeholder="请输入">
        </div>
        <div class="item">
            <label for="email">客户邮箱</label>
            <input type="email" id="email" placeholder="请输入">
        </div>
        <div class="item">
            <label for="company">客户公司</label>
            <input type="text" id="company" placeholder="请输入">
        </div>
        <div class="item">
            <label for="address">客户地址</label>
            <input type="text" id="address" placeholder="请输入">
        </div>
        <div class="item">
            <label for="no">客户等级</label>
            <select>
                <option value="">请选择</option>
                <option value="">1</option>
                <option value="">2</option>
                <option value="">3</option>
            </select>
        </div>
        <div class="item">
            <label for="tel">客户来源</label>
            <select>
                <option value="">客服录入</option>
                <option value="">自动加入</option>
            </select>
        </div>
        <div class="item">
            <label>选择标签</label>
                <label class="checkgreen"><input type="checkbox" id="custom"><i> 潜在客户</i></label>
                <label class="checkred"><input type="checkbox" id="company"><i>上市公司</i> </label>
 
        </div>
        <div class="item">
            <label for="other">客户备注</label>
            <textarea name="" id="" cols="30" rows="10" placeholder="请输入"></textarea>
        </div>

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

一片海x

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML表单元素

表单标签手机信息把范围内的表单元素信息提交给服务器<formaction="url地址" method="提交方式" name="表单域名称">各种表单控件</form>input输入表单元素单选框实现多选一必须name相同，复选框也要有name属性value，规定默认值（文本框用placeholder更合适）checked 当页面打开时就默认选中的label标签绑定一个表单元素（label标签for的属性值与表单元素id相同），点击lab..
复制链接

扫一扫