input 表单

Posted yuer20180726

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了input 表单相关的知识,希望对你有一定的参考价值。

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>

 

以上是关于input 表单的主要内容,如果未能解决你的问题,请参考以下文章

js修改表单值不会触发input事件

JS采坑记录 - form表单中只有一个input时,按回车键后表单自动提交

表单标签(input)

表单中Readonly和Disabled的区别

表单提交:button input submit 的区别

jQuery的表单选择器