青春不常在，抓紧谈恋爱小案例,表格标签、列表标签、表单标签 的综合练习
青春不常在，抓紧谈恋爱小案例里面要用到的知识点：
<select>下拉列表。
<ul>无序列表。
表格标签
<table> </table>是用于定义表格的标签。<tr> </tr>标签用于定义表格中的行，必须嵌套在<table> </table>标签中。<td> </td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
input 表单元素
input 是输入的意思，而在表单元素中 标签用于收集用户信息。 在 标签中，包含一个 type 属性，根据不同的 type 属性值，输入字段拥有很多种形式。
type属性的属性值：
| 属性值 | 描述 |
|---|---|
| radio | 定义单选按钮 |
| checkbox | 定义复选框 |
| text | 定义行的输入字段，用户可在其中输入文本。默认长度为20字符 |
| submit | 定义提交按钮。提交按钮会把表单数据发送到服务器。 |
<input>的其他属性
| 属性 | 属性值 | 描述 |
|---|---|---|
| name | 由用户自定义 | 定义input 元素的名称 |
| value | 由用户自定义 | 规定 input 元素的值 |
| checked | checked | 规定 input 元素首次加载时应当被选中。 |
- name 和value 是每个表单元素都有的属性值,主要给后台人员使用.
- name 表单元素的名字, 要求 单选按钮和复选框都要有相同的name值.
- checked属性主要针对于单选按钮和复选框, 主要作用一打开页面,就要可以默认选中某个表单元素。
label 标签
<label>标签为 input 元素定义标注（标签）。
<label> 标签用于绑定一个表单元素, 当点击<label> 标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验.
语法：
<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />
核心： <label> 标签的 for 属性应当与相关元素的 id 属性相同。
奶盖记忆：
table 用来定义表格标签，tr 行， td 单元格。
注意的：radio按钮都必须要有name属性，并name里面的值要一样,不然单选按钮会所有选项都能选上。
看中哪个，默认选中第一眼就要用checked=“checked”。
<input type="radio" name="marry"checked="checked">未婚<input type="radio" name="marry">已婚<input type="radio" name="marry" id="lihun">离婚<input type="checkbox" name="love" checked="checked">奶奶的<input type="checkbox" name="love">可爱的<input type="checkbox" name="love">帅帅的<input type="checkbox" name="love">痞痞的<input type="checkbox" name="love">都喜欢
想要不点框框也能选中项，那就要用到<lable>,但是注意点，<lable>标签里面的for属性值和<input的 id属性值要一样才起到作用哦。
<input type="radio" name="sex" id="nan"> <label for="nan"><img src="data:images/man.jpg"> 男</label>
<input type="radio" name="sex" id="nv"> <label for="nv"><img src="data:images/women.jpg"> 女</label
text文本框，submit提交按钮，submit可以通过修改 value里面的值，改变里面的文字。
<input type="submit" >//在页面按钮显示 提交
<input type="submit" value="免费注册">//在页面按钮显示 免费注册
好啦，直接上代码
<h4>青春不常在，抓紧谈恋爱</h4><!--第一行--><table width="600"><tr><td>性别：</td><td><!--radio单选按钮，--><input type="radio" name="sex" id="nan"> <label for="nan"><img src="data:images/man.jpg"> 男</label><input type="radio" name="sex" id="nv"> <label for="nv"><img src="data:images/women.jpg"> 女</label></td></tr><!--第二行--><tr><td>生日：</td><td><select><option>--请选择年份--</option><option>1999</option><option>2000</option><option>2001</option></select><select><option>--请选择月份--</option><option>1</option><option>2</option><option>3</option></select><select><option>--请选择日--</option><option>1</option><option>2</option><option>3</option></select></td></tr><tr><td>所在地区</td><td><input type="text" value="北京"></td></tr><!--第四行--><tr><td>婚姻状况：</td><td><input type="radio" name="marry" id="weihun" checked="checked"><label for="weihun">未婚</label><input type="radio" name="marry" id="yihun"><label for="yihun">已婚</label><input type="radio" name="marry" id="lihun"><label for="lihun">离婚</label></td></tr><!--第五行--><tr><td>学历：</td><td><input type="text" value="幼儿园"></td></tr><!--第六行--><tr><td>喜欢的类型：</td><td><input type="checkbox" name="love" checked="checked">奶奶的<input type="checkbox" name="love">可爱的<input type="checkbox" name="love">帅帅的<input type="checkbox" name="love">痞痞的<input type="checkbox" name="love">都喜欢</td></tr><!--第七行--><tr><td>个人介绍</td><td><textarea>个人简介</textarea></td></tr><!--第八行--><tr><td></td><td><input type="submit" value="免费注册"></td></tr><!--第九行--><tr><td></td><td><input type="checkbox" checked="checked">我同意注册条款和会员加入标准</td></tr><!--第十行 --><tr><td></td><td><a href="#">我是会员，立即登录</a></td></tr><!--第十一行 --><tr><td></td><td><h5>我承诺</h5><ul><li>年满18岁、单身</li><li>抱着严肃的态度</li><li>真诚寻找另一半</li></ul></td></tr></table>
展示图
青春不常在，抓紧谈恋爱小案例,表格标签、列表标签、表单标签 的综合练习相关推荐
- 表格标签，今日小说排行榜案例，合并单元格，无序列表，有序列表，自定义列表，表单标签，注册页面综合案例
表格标签 表格主要用于展示数据 <table><tr><td>单元格内的文字</td>...</tr>... </table> ...
- 青春不常在，抓紧谈恋爱——html代码
一个简单的相亲html代码 效果如下: 代码如下: <!DOCTYPE html> <html><head><meta charset="utf-8 ...
- HTML 表格标签、列表标签、表单标签（案例： 注册页面）
1. 表格标签 表格是实际开发中非常常用的标签: 1. 表格的主要作用 2. 表格的基本语法 1.1 表格的主要作用 表格主要用于显示.展示数据,因为它可以让数据显示的非常的规整,可读性非常好.特别是 ...
- JavaScript学习笔记07【6个经典案例——电灯开关、轮播图、自动跳转首页、动态表格、表格全选、表单验证】
Java后端 学习路线 笔记汇总表[黑马程序员] w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符. ...
- 小程序提交表单mysql_GitHub - kun19911227/minipro: 微信小程序提交带图片的表单
minipro 微信小程序提交带图片的表单 目录说明 upload_images ├── pages │ ├── upload_info 提交表单 │ └── display_info 信息展示 ├─ ...
- CSS基础知识(表单标签、事件、CSS介绍、选择器、伪类选择器案例、样式、盒子模型、定位)...
一. 表单标签 <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
- java注册登录小程序,详解小程序之简单登录注册表单验证
这段时间在做员工管理的小程序,前期在登录注册上花了不少功夫,今天就给大家分享下. 效果图,wxss的内容较简单,自己编写即可. ##主要内容 一.首先我是在util.js中引入表单正则验证规则,给予l ...
- 【JavaWeb】表单标签案例CSS（24）
引言 距离开学还有32天: 心旷神怡: Form表单标签 Form 标签用于为用户输入创建 HTML 表单. 我们以下面的静态注册页面中所需要的标签展开来介绍: 解析
- 安装系统、驱动相关软件下载地址
- JS设置select下拉框默认选中
- python培训课程-python培训课程
- 商务智能基本概念大总结
- 元宇宙行业也有冬天！Meta将裁员数千人 小扎狠过马斯克
- 自己整理的英语一最终作文模板
- PlatoFarm几大创新经济模型，给予当下元宇宙市场的启发
- SpringBoot后台java下载文件及注意的地方
- 再一次被入侵之潜伏的挖矿病毒
- Vue v-for循环中 key 属性的使用