10.1 表单的应用和初级验证提示

10.1 表单的应用和初级验证提示

<body>
<h1>注册</h1>
<form action="1.我的第一个网页.html" method="get">
    <p>名字： <input type="text" name="username" value="默认初始值为intelliyu" maxlength="5" size="15"  id="123" readonly></p>
    <p>密码：<input type="password" name="pwd" hidden value="123456">
    <p>提示信息：<input type="text" name="text" placeholder="请输入您的文本">
    <p>不能为空：<input type="text" name="text" required>
    <p>性别：
        <input type="radio" value="boy" name="sex" disabled/>男
        <input type="radio" value="girl" name="sex" checked/>女
    </p>

<!--
增强鼠标可用性（以前只能点框选中，现在想点旁边的文字也能选中框）
<p>增强鼠标的可用性
<label for="123">你点我文字可以选中框</label>
<input type="text" id="1234">
</p>
id要与之对应
-->    
    <p><!--增强鼠标的可用性-->
        <label for="123">你点我文字可以选中框</label>
        <input type="text" id="1234">
    </p>

<!--正则表达式pattern
<input type="text" name="qqmail" pattern="\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
百度搜常用正则表达式（https://www.jb51.net/tools/regex.htm）
-->
    <p>自定义邮箱：
        <input type="text" name="qqmail" pattern="\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
    </p>

    <p>
        <input type="submit">提交的
        <input type="reset" value="清空表单" disabled>重置的
    </p>

    <input type="text">
</form>
</body>

readonly：只读

hidden：隐藏

value 默认值

disabled：禁用

required 表示不能为空 非空框

placeholder 表示框内的提示信息

posted @ 2022-03-08 14:44  intelliyu  阅读(123)  评论(0)  编辑  收藏  举报