表单标签学习

最新推荐文章于 2024-07-26 08:00:00 发布

认真学习的宋小姐

最新推荐文章于 2024-07-26 08:00:00 发布

阅读量49

点赞数

分类专栏：笔记文章标签： html5 html css

本文链接：https://blog.csdn.net/qq_51946936/article/details/120442367

版权

笔记专栏收录该内容

30 篇文章 2 订阅

订阅专栏

表单标签

目标：能够使用表单相关标签和属性，实现网页中表单类网业结构搭建

input系列标签
button按钮标签
select下拉菜单标签
textarea文本域标签
label标签

input 标签

input标签可以通过type值属性的不同、展示不同的效果
在这里插入图片描述

  昵称；<input type="text" placeholder="请输入你的昵称"><br>

在这里插入图片描述

<!-- 单选框 radio -->
    性别：<input type="radio" name="sex" checked>男
         <input type="radio" name="sex">女<br>

在这里插入图片描述

爱好；
    <input type="checkbox" checked>敲代码
    <input type="checkbox" checked>学习
    <input type="checkbox" >生活<br>

在这里插入图片描述

 <input type="file" multiple>多文件选择

在这里插入图片描述

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

代码全图

<body>
    <form >
        昵称；<input type="text" placeholder="请输入你的昵称"><br>
        密码：<input type="password"  placeholder="请输入你的密码"><br>
        <!-- 单选框 radio -->
        性别：<input type="radio" name="sex" checked>男
            <input type="radio" name="sex">女<br>
        爱好；
        <input type="checkbox" checked>敲代码
        <input type="checkbox" checked>学习
        <input type="checkbox" >生活<br>
        <input type="file" multiple>

        <br>
        <input type="submit">
        <input type="reset">
        <input type="button" value="普通按钮">
    </form>
</body>

效果图：
在这里插入图片描述

 生日：<input type="date">

效果图：
在这里插入图片描述

button按钮标签

在这里插入图片描述

<form action="">
        昵称；<input type="text" placeholder="请输入你的昵称"><br>
        <button type="submit">buttont提交按钮</button>
        <button type="reset">buttont重置按钮</button>
        <button type="button">buttont普通按钮</button>

    </form>

效果图：
在这里插入图片描述

所在城市:<select>
                <option>王俊凯</option>
                <option>王源</option>
                <option selected>易烊千玺</option>
            </select>

效果图：
在这里插入图片描述

在这里插入图片描述

 <!-- 文本域 可输入多行文本，多用于网业评论区域等 -->
 <textarea name="" id="" cols="60" rows="10"></textarea>

在这里插入图片描述

<!-- 第一种方法 -->
    <input type="checkbox" checked id="one"><label for="one">敲代码</label>

    <!-- 第二种方法 -->
   <label >
    <input type="checkbox" checked>搞学习
   </label>

点汉字就可选中对勾
在这里插入图片描述

语义化标签

目标：能够认识开发中常用的没有语义布局标签（ div、span ）和有语义的布局标签
在这里插入图片描述

    <div>我是努力学习的人</div>
    <div>我是努力学习的人</div>
    <div>我是努力学习的人</div>
    <span>我是人</span>
    <span>我是人</span>
    <span>我是人</span>

效果图：
在这里插入图片描述

常见有语义的布局标签有哪些？
• header：网页头部
• nav：网页导航
• footer：网页底部
• aside：网页侧边栏
• section：网页区块
• article：网页文章

字符实体

目标：能通过字符实体在网页中显示特殊符号
学习路径：

HTML中的空格合并现象
场景：如果在html代码中同时并列出现多个空格、换行、缩进等，最终浏览器只会解析出一个空格
常见字符实体

<!-- html空格合并现象 -->
    我是好人&nbsp;&nbsp;&nbsp;不，你不是
<!-- HTML会解析标签 大于号、小于号-->
   p标签长这样: &lt;p&gt;&lt;/p&gt;

效果图：在这里插入图片描述

认真学习的宋小姐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表单标签学习

表单标签目标：能够使用表单相关标签和属性，实现网页中表单类网业结构搭建input系列标签button按钮标签select下拉菜单标签textarea文本域标签label标签input 标签input标签可以通过type值属性的不同、展示不同的效果昵称；<input type="text" placeholder="请输入你的昵称"><br> 性别：<input type="radio"
复制链接

扫一扫