前端学习笔记二---表单标签

最新推荐文章于 2024-08-04 21:23:42 发布
最新推荐文章于 2024-08-04 21:23:42 发布
阅读量142 收藏
点赞数
分类专栏： 前端学习 HTML学习 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dream2017seek/article/details/116594844
版权

表单标签

常用手册网站

案例代码

案例展示

<!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>
    <!-- 写页面先分析页面结构框架，如使用的标题元素，表格元素，表格内的骨架 -->
    <h1>龙之领主页面</h1>
    <!-- 用table而不用form的原因是什么呢？，form是一个表单，而这个格式的排版是表格类型的 -->
    <table width="500">
        <!-- 表格第一行 --> 
        <tr>
            <!-- tr按行分成表格元素，td按列拆分表格 -->
            <td>性别</td>
            <td>
                <!-- 为了保证单选的效果，需要用name属性来限定这一个类 -->
                <!-- 增强用户点击的体验，使用label标签来扩大点击的范围，将label里的点击传入到for里的id -->
                <input type="radio" name="sex" id="nan"> <label for="nan"><img src="images/man.jpg">男</label>
                <input type="radio"name="sex" id="nv"> <label for="nv"><img src="images/women.jpg">女</label>
            </td>
        </tr>
        <!-- 表格第二行 -->
        <tr>
            <!-- <th> 元素中的文本通常呈现为粗体并且居中。 -->
            <td>左对齐</td>
            <th>加粗居中</th>
        </tr>
        <!-- 表格第三行 -->
        <tr>
            <!-- <td> 元素中的文本通常是普通的左对齐文本。 -->
            <td>生日</td>
            <td>
                <!-- 如何处理生日的选择逻辑？ -->
                <select>
                    <option selected="selected">--请选择年--</option>
                    <option>1994</option>
                    <option>1996</option>
                    <option>1998</option>
                    <option>2000</option>
                </select>
                <select>
                    <option selected="selected">--请选择月--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                </select>
                <select>
                    <option selected="selected">--请选择日--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                </select>
            </td>
        </tr>
        <!-- 表格第四行 -->
        <tr>
            <td>地址信息</td>
            <!-- 用了value之后不能直接自己选中，如何操作呢？ -->
            <td><input type="text" value="请输入地址信息"></td>
        </tr>
        <!-- 表格第五行 -->
        <tr>
            <td>喜欢的类型</td>
            <td>
                <!-- checkbox复选框 -->
                <input type="checkbox" id="i1" name="profession"> <label for="i1">双手剑士</label>
                <input type="checkbox" id="i2" name="profession"> <label for="i2">剑盾</label>
                <input type="checkbox" id="i3" name="profession"> <label for="i3">全能法师</label>
                <input type="checkbox" id="i4" name="profession"> <label for="i4">钳工</label>
            </td>
        </tr>
        <!-- 表格第六行 -->
        <tr>
            <td></td>
            <td>
                <input type="submit" value="注册成为龙裔">
            </td>
        </tr>
        <!-- 表格第7行 -->
        <tr>
            <td></td>
            <td>
                <input type="checkbox" checked="checked">我同意注册条款和加入帝国
            </td>
        </tr>
        <!-- 表格第8行 -->
        <tr>
            <td></td>
            <td>
                <a href="https://www.bilibili.com/">我是梭莫立即登录</a>
            </td>
        </tr>
        <!-- 表格第9行 -->
        <tr>
            <td></td>
            <td>
                <h5>我承诺：</h5>
                <!-- ul无序列表，li是配套的元素 -->
                <ul>
                    <li>诺德人血统</li>
                    <li>侍奉女王</li>
                </ul>

            </td>
        </tr>
    </table>
</body>
</html>
code-dream
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
大前端学习笔记--持续随缘更新
JackieDYH的博客
02-10 1171
目录 0210--前端知识&HTML常用标签 0210--前端知识&HTML常用标签 1、浏览器及内核介绍： chrome谷歌： 特点——简洁、快速、安全 内核——webkit,Blink 费用——收费 Firefox火狐——Mozilla公司： 特点——非盈利、Gecko项目开源 内核——Gecko Safari苹果——苹果...
前端学习笔记 - HTML+CSS
fengxm0309的博客
10-07 4666
基础认知 网页 什么是网页 网站是指在因特网上根据一定的规则，使用 HTML 等制作的用于展示特定内容相关的网页集合。 网页是网站中的一“页”，通常是 HTML 格式的文件，它要通过浏览器来阅读。 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。 什么是 HTML HTML 指的是超文本标记语言 (Hyper Text Markup Lang
2021-07-22
weixin_50286102的博客
07-22 66
页面需求点击不同的类型 显示不同的组件,正确的选项 在from中的option,istrue选项为1 1:点击单选 是单选按钮 +input框 2:点击多选切换成多选框 <el-form-item label="选项 :" v-show="form.questionType !== '3'"> <div class="option_item"> <!-- 单选状态 --> <template
前端学习笔记--注册表单
xiaomiguoba7的博客
05-18 352
表单在网页中主要负责数据采集功能html中使用form标签完成。表单标签其实是一组标签的组合，不是一个标签。表单元素是允许用户在表单中（比如：输入框、文本域、下拉列表、单选框、复选框等等）输入信息的元素。 在html中使用来定义表单： 注册表单就是通过input的各种属性实现用户输入 以下是代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <...
前端基础学习笔记-HTML常用标签
qq_51325797的博客
01-11 409
selected=”selected“默认选择。绝对路径符号与相对路径不同 是 \。属性部分前后 键值形式。一行可以多个span。
前端学习--uniapp部分
AGW.的博客
03-10 796
主要介绍uniapp中的重点知识。本文是根据咸虾米老师的uniapp零基础入门到项目打包课程，如果有不理解的地方请移步到B站查找并观看相应课程。
前端知识学习笔记-一（HTML）
strugglegirl的博客
04-03 948
meta标签用来描述一个HTML网页文档的属性，关键词等，例如:charset="u-8” 是说当前使用的是ut-8 编码格式，在开发中我们经常会看到 u-8 ，或是gbk ，这些都是编码格式，通常使用un-8。文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。他是网页必备的组成部分，避免浏览器的怪异模式。定义HTML 文档，这个元素我们浏览器看到后就明白这是个HTML文档了，所以你的其它元素要包裹在它里面，标签限定了文档的开始点和结束点。
前端学习笔记一一HTML表单标签（form）
2401_84433570的博客
04-27 724
今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。所以看完之后，还是多多行动起来吧！可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。
前端学习-----HTML
wode39的博客
07-26 426
。。。。。。。
前端学习笔记-Vue2-基础
qq_43128157的博客
01-26 1047
Vue2-基础VUE基础VUE核心1. 简介2. 官网3. 特点4. 使用容器与实例绑定方式el的两种写法data的两种写法模板语法插值语法指令语法数据绑定MVVM模型数据代理Vue中的数据代理事件处理1. 基本使用2. 事件修饰符3. 键盘事件计算属性与监视计算属性监视深度监视计算属性与监视之间的区别class与style绑定class样式style样式条件渲染v-ifv-show列表渲染v-forkey值作用key值的选取使用index作为key值指定唯一标识作为key值列表过滤Vue监视数据原理收集表
h5前端学习笔记
03-21
【标题】"h5前端学习笔记"所涵盖的知识点主要集中在HTML5技术及其在前端开发中的应用。HTML5是超文本标记语言的最新版本，它引入了许多新的元素、API和特性，极大地增强了网页的交互性、可访问性和可用性。 【描述...
Tracking-robot-前端开发笔记
05-28
【标签】"c"虽然通常与后端编程语言C有关，但在前端开发笔记中出现，可能是指C风格的编程思想，或者是与C相关的库或框架在前端的应用，例如用C++编写的WebAssembly模块，或者某种基于C的API接口。 【压缩包子文件】...
jx-ocr前端开发笔记
05-31
【标题】"jx-ocr前端开发笔记"指的是一个关于jx_ocr项目的前端开发学习资料，这通常涉及到使用JavaScript、HTML、CSS等技术在Web环境中实现OCR（Optical Character Recognition，光学字符识别）功能。OCR是将图像中...
斑码教育大前端笔记-HTML第二天
10-09
在“斑码教育大前端笔记-HTML第二天”的学习资源中，我们主要聚焦于HTML这一核心前端技术。HTML，全称为HyperText Markup Language，是构建网页的基础语言，它定义了网页的结构和内容。HTML5是其最新版本，带来了...
百度前端研发笔试卷-教程与笔记习题
05-18
**前端研发基础** 在前端开发领域，掌握扎实的基础知识是至关重要的。这包括HTML、CSS和JavaScript这...从基础语法到框架使用，再到性能优化和跨平台开发，都需要不断学习和实践，以应对不断变化的前端开发挑战。
HTML-08.表单标签
程小白的博客
08-04 69
【代码】HTML-08.表单标签。
Web开发-html篇-下
最新发布
Broken_x的博客
08-04 457
html中的大部分标签就已经写完了，这样的写出来的网页没有颜色，过于单调，过于简陋，这就要用到我们接下来要学的CSS和Javascript了，我会接着持续更新……
HTML-05新浪新闻-正文-排版
程小白的博客
08-03 144
【代码】【无标题】
HTML 段落
wjs2024的博客
08-04 233
HTML（超文本标记语言）是构建网页的标准语言，而段落是构成网页内容的基本单元。在HTML中，段落是通过<p>标签来定义的。本文将详细介绍HTML段落的相关知识，包括段落的基本结构、样式设置、以及在实际网页设计中的应用。
Java Web前端学习笔记：HTML到AJAX基础
"这篇文档包含了作者在学习Java Web前端时的笔记，主要涵盖了前端开发的基础知识，包括HTML、CSS、JavaScript、DOM编程、jQuery框架以及AJAX基础。" 本文档详细介绍了Java Web前端开发中的核心技术和元素，首先从...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值