表单基本控件

最新推荐文章于 2021-07-01 19:14:31 发布

LiuszZZ

最新推荐文章于 2021-07-01 19:14:31 发布

阅读量246

点赞数

分类专栏： Java Web

本文链接：https://blog.csdn.net/qq_39720594/article/details/106954475

版权

Java Web 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

本文总结自，B站-遇见狂神说

在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="../water.html" method="GET">
        <!-- 文本输入框 【只读：readonly】
            value: 默认初始值
            maxlength: 最长能写多少字符
            size: 文本框的长度        
        -->
        <p>名字；<input type="text" name="usewrname" readonly value="小明"></p>
        <!-- 密码输入框
        【非空判断：required】
        -->
        <p>密码；<input type="password" name="usewrname" required></p>
        <!-- 隐藏域：hidden -->
        <p><input type="password" name="id" hidden value="123"></p>
        <!-- 单选框 
            radio
            value: 单选框的值
            name: 表示组    
        -->
        <p>性别：
            <input type="radio" value="boy" name="gender" checked>男
            <input type="radio" value="girl" name="gender">女
        </p>
        <!-- 多选框 -->
        <p>爱好；
            <input type="checkbox" value="boy" name="hobby" checked>游泳
            <input type="checkbox" value="boy" name="hobby">健身
            <input type="checkbox" value="boy" name="hobby">跑步
            <input type="checkbox" value="boy" name="hobby">骑车
        </p>

        <!-- 按钮
            button  普通按钮
            image   图像按钮
            submit  提交按钮
            reset   重置
        -->
        <p>
            <input type="button" name="btn1" value="普通按钮">
            <input type="submit" name="btn2" value="提交按钮">
            <input type="button" name="btn3" value="重置">
        </p>

        <!-- 下拉表，列表框 -->
        <p>国家
            <select name="列表内容">
                <option value="China">中国</option>
                <option value="America">漂亮国</option>
                <option value="Idian" selected>印度</option>
            </select>
        </p>

        <!-- 文本域
            cols 列数
            rows 行数
            【提示信息：placeholder】
        -->
        <p>
            <textarea name="btn3" cols="50" rows="10" placeholder="文本内容"></textarea>
        </p>

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

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

        <!-- url验证 -->
        <p>网址：
            <input type="url" name="url">
        </p>

        <!-- 数字验证 -->
        <p>商品数量：
            <input type="number" name="num" max="100" min="0" step="10" value="10">
        </p>

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

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

        <!-- label标签 -->
        <p>
            <label for="mark">点我一下</label>
            <input type="text" id="mark">

        </p>


        <!-- 自定义邮箱 
            正则表达式验证：pattern
        -->
        <p>自定义邮箱；
            <input type="text" name="diymail"
                pattern="/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,})$/">
        </p>

        <!-- 提交、重置按钮 -->
        <p>
            <!-- 禁用 -->
            <input type="submit" disabled>
            <input type="reset" value="清空表单">
        </p>
    </form>
</body>
</html>

效果如图：

在这里插入图片描述

LiuszZZ

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
表单基本控件

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <form ac
复制链接

扫一扫

专栏目录