Skip to content

Latest commit

 

History

History
241 lines (200 loc) · 5.65 KB

12.md

File metadata and controls

241 lines (200 loc) · 5.65 KB
Raw

第12节 表单进阶

❤️💕💕HTML和CSS高级教程。更多的文章请移步博客Myblog:http://nsddd.top

[TOC]

单选框

🚀在前面我们知道了单选框和复选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
    <div>你的性别:</div>
    <div>
     <input type = "redio", name = "bbb", id = "man" checked = "checked">
     <label for="man">男</label><br>
     <input type = "redio", name = "bbb", id = "woman">
     <label for="woman">女</label>
    </div></div>
</body>
</html>

label标签就是说明

checked = "checked" 默认选中

name 确定一组的选择

复选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
    <div>你的性别:</div>
    <div>
     <input type = "checkbox", name = "bbb", id = "man" checked = "checked">
     <label for="man">张三</label>
     <input type = "checkbox", name = "bbb", id = "woman">
     <label for="woman">李四</label>
     <input type = "checkbox", name = "bbb", id = "woman">
     <label for="woman">王五</label>
     <input type = "checkbox", name = "bbb", id = "woman">
     <label for="woman">老六</label>
    </div>
   </div>
</body>
</html>

🚀 checked默认进去是勾选的，一般用于男、女性别

上传文件和隐藏字段

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>图片按钮 --- 上传图片</h2>
    <div>
        <input type="file" name = "" id = "" >

    </div>
    <div>
        <!-- 上传图片 类型是图片-->
        <input type="image" src = "../img/logo.png">
    </div>
    <div></div>
    <div>

    </div>
</body>
</html>

🚀 编译结果如下：

image-20220928210731467

下拉按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=h1, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>表单进阶  -- 下拉</h1>
    <div>
        <div>你的收货地址</div>
        <select size = "5" name="shouhuo" id="001">
            <!-- value是提供给后端需要用到的value值 -->
            <!-- select是默认选中的值 -->
            <option value="1">湖北</option>
            <option value="2">河南</option>
            <option value="3">北京</option>
            <option value="4">东京</option>
            <option value="5" selected>台湾省</option>
            <option value="1">湖北</option>
            <option value="2">河南</option>
            <option value="3">北京</option>
            <option value="4">东京</option>
            <option value="5">台湾省</option>
        </select>

        <div></div>
    </div>
    <div></div>
    <div></div>
</body>
</html>

🚀 编译结果如下：

image-20220928212206884

多行文本输入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=h1, initial-scale=1.0">
    <title>Document</title>
    <style>
        textarea{
            width: 400px;
            height: 200px;
        }
    </style>
</head>
<body>
    <h1>多行文本输入</h1>
    <div>
        <!-- cols、rows是指的是宽和高，一般使用的是css方式 -->
        <!-- <textarea name="duohang" id="" cols="30" rows="10"></textarea> -->
        <textarea name="duohang" id="duohang" placeholder="请输入你的意见">
         提前设置好的value--默认文字，可以继续写或者删除掉</textarea>
    </div>
</body>
</html>

image-20220928213258422

字段集

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        legend {
            width: 5%;
        }
        fieldset{
            /* 外面框框的大小 */
            /* 上面缺口的宽度 
            设置蓝色:
            border:1px solid bulid;
            */
            width: 50%;
        }
        
    </style>
</head>
<body>
    <h1>表单进阶 --- 字段集</h1>
    <fieldset>
        <legend>性别</legend>
        <input type="radio" name="aa" id="aa">男
        <br>
        <input type="radio" name="aa" id="bb">女
    </fieldset>
</body>
</html>

🚀 编译结果如下：

image-20220928214132027

END 链接