下拉框 文本域 文件域 邮箱 URL数字 滑块 搜索框、隐藏域 只读 禁用、表单初级验证 2022-1-20

下拉框: selected表示默认选中

<!--下拉框、列表框
    selected表示默认选中-->
    <p>国家:
        <select name="列表名称">
            <option value="china">中国</option>
            <option value="us">美国</option>
            <option value="eth" selected>加拿大</option>
            <option value="yingdu">英国</option>

        </select>
    </p>

文本域

    <!--文本域
    cols="50" rows="10"
    -->
    <p>反馈：
        <textarea name="textarea" cols="50" rows="10">文本内容</textarea>
    </p>

文件域

    <!--文件域：
    input type="file" name="files"
    -->
    <p>
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>

邮件验证

    <!--邮件验证-->
    <p>邮箱：
        <input type="email" name="email">

    </p>

URL、数字

    <!--URL-->
    <p>url：
        <input type="url" name="url">
    </p>
    <!--数字-->
    <p>数字：
        <input type="number" name="num" max="100" min="0" step="10">
    </p>

滑块

<!--滑块
    input type="range"
    -->
    <p>音量:
        <input type="range" name="voice" max="100" min="0" step="2">
    </p>

搜索框

	<!--搜索框-->
    <p>搜索：
        <input type="search" name="serach">
    </p>

只读： 改为只读模式：readonly，内容不可修改

<p>名字：<input type="text" name="username" value="admin" readonly></p>

禁用：disabled禁用，只能选择没有禁用的那个

<input type="radio" value="boy" name="sex" checked disabled>男

隐藏：hidden

用隐藏的方法可以设置密码的初始值，并且不显示

<p>密码：<input type="password" name="psd" hidden value="123456"></p>

增强鼠标可用性

测试方法一

    <p>
        <!--增强鼠标可用性-->
        <label for="mark">点我</label>
        <input type="text" id="mark">
    </p>

测试方法二(id="mark"的位置 以及通过mark的跳转)

<!--搜索框-->
    <p>搜索：
        <input type="search" name="serach" id="mark">
    </p>

    <p>
        <!--增强鼠标可用性-->
        <label for="mark">点我</label>
        <input type="text" >
    </p>

表单初级验证

常用方式：

• placeholder：提示信息
• required：元素非空
• pattern：正则表达式

placeholder：提示信息

<p>名字：<input type="text" name="username" placeholder="请输入用户名"></p>

required:表示元素不能为空

    <p>名字：<input type="text" name="username" placeholder="请输入用户名" required></p>

正则表达式的查找网址：https://www.jb51.net/tools/regexsc.htm

pattern：正则表达式

    <p>自定义邮箱：
        <input type="text" name="diymail"pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/或\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
    </p>