input 表单

最新推荐文章于 2023-02-22 11:47:10 发布

weixin_30925411

最新推荐文章于 2023-02-22 11:47:10 发布

阅读量81

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yuer20180726/p/11161963.html

博客介绍了HTML中与input组件相关的属性。datalist元素可与input配合定义可能输入的值；placeholder用于定义输入框内的提示文本；required属性可检测输入框内容；autocomplete能保护用户敏感信息。还给出代码示例供参考。

1：datalist元素，一般与input组建配合使用，以定义可能输入的值，例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <text>输入你最喜欢的汽车</text>
    <input list="cars" />
    <datalist id="cars">
        <option value="BMW">
        <option value="Ford">
        <option value="Volvo">
    </datalist>
</body>
</html>

可自行复制运行。

2：placeholder定义出现在输入框内的提示文本

密码：<input type="password" name="pwd2" id="pwd1" required placeholder="请输入密码" pattern="[a-zA-Z][a-zA-Z0-9]{10,20}" />

3:required的属性，检测输入框内是否有内容。

4：autocomplete保护用户敏感信息，如：输入密码的时候不进行显示。

5：下列代码对所介绍的属性进行了一次运用，如有不懂请留言

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5 Forms</title>
    <style>
    *{margin:0;padding:0;}
    h1{
        text-align: center;
        background:#ccc;
    }
    form{
        /* text-align:center; */
    }
    div{
        padding:10px;
        padding-left:50px;
    }

    .prompt_word{
        color:#aaa;
    }
    </style>

</head>
<body>
    <h1>用户注册表</h1>
    <form id="userForm" action="#" method="post" oninput="x.value=userAge.value">
        <div>
            用户名：<input type="text" name="username" required pattern="[0-9a-zA-z]{6,12}" placeholder="请输入用户名">
            <span class="prompt_word">用户名必须是6-12位英文字母或者数字组成</span>
        </div>
        <div>
            密码：<input type="password" name="pwd2" id="pwd1" required placeholder="请输入密码" pattern="[a-zA-Z][a-zA-Z0-9]{10,20}" />
            <span class="prompt_word">密码必须是英文字母开头和数字组成的10-20位字符组成</span>
        </div>
        <div>
            确认密码：<input type="password" name="pwd2" id="pwd2" required placeholder="请再次输入密码" pattern="[a-zA-Z][a-zA-Z0-9]{10,20}" />
            <span class="prompt_word">两次密码必须一致</span>
        </div>
        <div>
            姓名：<input type="text" placeholder="请输入您的姓名" />
        </div>
        <div>
            生日：<input type="date" id="userDate" name="userDate">
        </div>
        <div>
            主页：<input type="url" name="userUrl" id="userUrl">
        </div>
        <div>
            邮箱：<input type="email" name="userEmail" id="userEmail">
        </div>
        <div>
            年龄：<input type="range" id="userAge" name="userAge" min="1" max="120" step="1" />
            <output for="userAge" name="x"></output>
        </div>
        <div>
            性别：<input type="radio" name="sex" value="man" checked>男<input type="radio" name="sex" value="woman">女
        </div>
        <div>
            头像：<input type="file" multiple>
        </div>
        <div>
            学历：<input type="text" list="userEducation">
                    <datalist id="userEducation">
                        <option value="初中">初中</option>
                        <option value="高中">高中</option>
                        <option value="本科">本科</option>
                        <option value="硕士">硕士</option>
                        <option value="博士">博士</option>
                        <option value="博士后">博士后</option>
                    </datalist>
        </div>
        <div>
            个人简介：<textarea name="userSign" id="userSign" cols="40" rows="5"></textarea>
        </div>
        <div>
            <input type="checkbox" name="agree" id="agree"><label for="agree">我同意注册协议</label>
        </div>
    </form>
    <div>
        <input type="submit" value="确认提交" form="userForm" />
    </div>
</body>
</html>