HTML表单元素详解-优快云博客

本文链接：https://blog.youkuaiyun.com/xiaobai_learning/article/details/126913791

今日预计学习内容p31---p44；今日实际学习内容p31---p44

评价：劳逸结合，任务不多，及时复习。

p31:表单-应用场景

-->登录,注册,搜索

p32-33:表单-input

input占位符：placeholder

<!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>输入</title>
</head>
<body>
    账号:<input type="text" placeholder="请输入卡号">
    <br><br>
    密码:<input type="password" placeholder="请输入密码">
    <br><br>
    单选框:<input type="radio">
    <br><br>
    多选框:<input type="checkbox"><input type="checkbox"><input type="checkbox">
    <br><br>
    上传文件:<input type="file">
    <br><br>
    提交按钮:<input type="submit">
    <br><br>
    重置按钮:<input type="reset">
    <br><br>
    按钮:<input type="button">
</body>
</html>

p34:表单-单选功能和默认选中

处理单选相关功能（无法单选）：

<!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>单选与默认选中</title>
</head>
<body>
    <!-- name做分组使用，checked做默认选中使用 -->
    性别:<input type="radio" name="gender" value="man" checked>男
        <input type="radio" name="gender" value="woman">女
    <br><br>
    <input type="checkbox" name="" id="" checked>协议1<br>
    <input type="checkbox" name="" id="" checked>协议2<br>
    <input type="checkbox" name="" id="" checked>协议3<br>
</body>
</html>

p35:表单-上传多个文件
<input type="file" multiple>

p36:表单-按钮

<!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>
    <form action="">

    昵称：<input type="text" placeholder="请输入用户名">
    <br>
    密码：<input type="password" placeholder="请输入密码">

    <br><br>
    性别：<input type="radio" name="gender" checked>男
    <input type="radio" name="gender">女

    <br><br>
    爱好：<input type="checkbox">敲代码<input type="checkbox">熬夜<input type="checkbox">掉头发

    <br><br>
    <input type="file" multiple>

    <br><br>
    <input type="submit" value="注册"><input type="reset"><input type="button" value="普通按钮">


    </form>
</body>
</html>

p37:表单-按钮botton

理解：使用button更专业（之前用的是input type="button"）
<body>
    
    <button type="submit">我是提交按钮</button>
    <button type="reset">我是重置按钮</button>
    <button type="button">我是普通按钮</button>

</body>

p38:表单-下拉菜单
    <select>
        <option selected>北京</option>
        <option>上海</option>
        <option>广州</option>
        <option>深圳</option>
    </select>
selected是默认选中

！！！单选和多选的默认选中是checked

p39:表单-文本域

文本域：qq发动态的打字方块区域（自动换行）

（宽高通过css调节，其中拖拽功能要禁用）
    
    <textarea name="" id="" cols="30" rows="10"></textarea>

p40:表单-label标签

(提升选项范围，用户体验更好)

    性别：
    <input type="radio" name="gender" id="man"><label for="man">男</label>
    <input type="radio" name="gender" id="women"><label for="women">女</label>
    <br><hr>

    年龄：
    <label><input type="radio" name="gender">未成年</label>
    <label><input type="radio" name="gender">已成年</label>

方法一:（把label放后面）

方法而:（把label放前面）

p41:语义化标签

无语义标签

无任何特殊效果，通过css使用

div独占一行，span不独行

有语义标签

手机端网页使用
    <header>网页头部</header>
    <nav>网页导航</nav>
    <footer>网页底部</footer>
    <aside>侧边栏</aside>
    <section>网页区块</section>
    <article>文章</article>

p42:字符实体

    <!-- 网页只认识一个空格，需使用字符实体标签 &nbsp; -->
    今日学习内容&nbsp;&nbsp;&nbsp;充实！

p43-p44 案例练习

不足：合并单元格关键词记混淆;表格结构记不清

协议用多选;下拉菜单是select、option（selected默认）;无序排列ul,li（有序ol，li）

<!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>

    昵称：
    <input type="text" placeholder="请输入昵称">

    <br><br>

    性别：  
    <label><input type="radio" name="gender">男</label>
    <label><input type="radio" name="gender">女</label>

    <br><br>

    所在城市：
    <select>
        <option>北京</option>
        <option>上海</option>
        <option selected>南京</option>
    </select>      

    <br><br>

    婚姻状况：
    <label><input type="checkbox">未婚</label>
    <label><input type="checkbox">已婚</label>
    <label><input type="checkbox">保密</label>

    <br><br>

    喜欢的类型：
    <label><input type="checkbox">可爱</label>
    <label><input type="checkbox">感性</label>
    <label><input type="checkbox">御姐</label>
    <label><input type="checkbox">萝莉</label>
    <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <label><input type="checkbox">萌妹</label>
    <label><input type="checkbox">夹子</label>
    <label><input type="checkbox">原披</label>

    <br><br>

    个人介绍：
    <br><br>
    <textarea name="" id="" cols="50" rows="10"></textarea>

    <br><br>

    <h2>我承诺</h2>
    <ul>
        <li>不玩原神</li>
        <li>只玩羊</li>
        <li>不是二次元</li>
    </ul>

    <br>

    <input type="checkbox" name="" id="" checked>协议协议协议协议<br>

    <br><br>

    <button type="submit">注册</button>
    <button type="reset">重写</button>

    
</body>
</html>