前端基础：form表单提交

时间：2024-06-10 17:06:14

今天介绍下form表单提交经常用到的表单元素。

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:;padding:;}

    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="" max="" step="" />

            <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="" rows=""></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>

相关文章