0
点赞
收藏
分享

微信扫一扫

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

cnlinkchina 2022-01-21 阅读 29
html前端

下拉框: 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>

在这里插入图片描述

举报

相关推荐

0 条评论