html基础元素案例笔记（1）

这是代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS FlexBox test</title><link rel="stylesheet" type="text/css" href="./css/index.css"></head><body><h4>青春不常在，抓紧谈恋爱</h4><table><form><!-- 注意表单放置的位置 --><tr><td>性别</td><td><input type="radio" name="sex" value="man" id="nan"/><!-- 注意label标签的应用 --><label for="nan"><img src="./img/man.png" width="7%" height="7%"/> 男</label><input type="radio" name="sex" value="woman" id="nv"/><label for="nv"><img src="./img/man.png" width="7%" height="7%"/> 女</label></td></tr><tr><td>生日</td><td><select><option>请选择年份</option><option>2021</option><option>2020</option><option>2019</option><option>2018</option></select><select><option>请选择月份</option><option>1</option><option>2</option><option>3</option><option>4</option></select><select><option>请选择日期</option><option>11</option><option>12</option><option>13</option><option>14</option></select>   </td></tr><tr><td>所在地区</td><td><!-- value显示默认值 --><input type="text" name="location" value="北京海淀"/></td></tr> <tr><td>婚姻状况</td><td><!-- 注意label的for和id的对应 --><!-- 默认选择 checked --><input type="radio" name="merry" id="state1" checked="checked"/><label for="state1">未婚</label><input type="radio" name="merry" id="state2"/><label for="state2">已婚</label><input type="radio" name="merry" id="state3"/><label for="state3">离婚</label></td></tr><tr><td>学历</td><td><input type="text" value="博士"/></td></tr> <tr><td>喜欢的类型</td><td><input type="checkbox" name="like-type" id="type-name1"/><label for="type-name1">妩媚的</label><input type="checkbox" name="like-type" id="type-name2"/><label for="type-name2">可爱的</label><input type="checkbox" name="like-type" id="type-name3"/><label for="type-name3">小鲜肉</label><input type="checkbox" name="like-type" id="type-name4"/><label for="type-name4">老腊肉</label><input type="checkbox" name="like-type" id="type-name5" checked="checked"/><label for="type-name5">都喜欢</label></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" name="provision" id="agree" checked="checked"/><label for="agree">我同意隐私条款和会员加入标准</label></td></tr></form><tr><td></td><td><a href="https://www.baidu.com" target="_blank">我是会员，立即登录</a></td></tr><tr><td></td><td><h3>我承诺</h3><ul><li>年满18</li><li>严肃认真</li><li>态度真诚</li></ul></td></tr></table>
</body></html>

里面有几个值得注意的点，关注一下：

区域内点击均可选中，使用了label标签及其for属性，和input标签的id属性对应起来。

注意，for和id的属性是一对一绑定的，所以不要在表单范围内重名。

使用checked属性，固定默认选择，例如单选、复选框等。（在下拉菜单，是option属性selected）
对于text输入标签，其value属性能够设置默认显示内容，例如北京海淀。
注意表单的提交，需要在表单内使用input等，然后使用submit提交。
对于单选框和复选框，需要使用相同的name，才能实现多个中选择一个。

html基础元素案例笔记（1）相关推荐

Java基础重温_06：Debug模式（打断点、下一步），基础练习案例（减肥计划if，switch版本、逢七跳过、不死神兔、百钱白鸡、数组元素（求和，索引位置，反转）、判断数组是否相同、评委打分）
1.IDEA,Debug模式是供程序员使用的程序调试工具,它可以用于查看程序的执行流程,也可以用于追踪程序执行过程来调试程序. 基础练习案例 1.减肥计划if版本案例需求输入星期数,显示今天 ...
Python基础语法学习笔记
Python基础语法学习笔记想淘宝省钱看我简介,博客www.liangxin.name (一) 一.Print()函数 1.数字可以直接输出,无需加引号只能理解数字,却读不懂文字.因为数字和数学运 ...
大数据第二阶段Python基础编程学习笔记（待完善）
大数据第二阶段Python基础编程学习笔记(待完善) 第一章 Python基础语法 3.8 1-1Python概述 python基础部分: ●Python基础语法: 标识符,关键字,变量,判断循环.. ...
【恢复】慕课网《网页布局基础》学习笔记
好久之前,最初入坑前端时的学习笔记.那时候「慕课网」的几个路径还是免费的,也有好几个跟网页布局有关的课程,其中有一个叫<网页布局基础>讲得很棒,那时候刚好喜欢上 markdown 写作,于 ...
UE4_Niagara基础2_学习笔记_枪火制作
教程地址:https://www.bilibili.com/video/BV1fE411b7at 一套基础入门且案例非常完整的教程,能够比较快的走一遍制作流程讲师:贾越(Epic Fornite T ...
Python精讲Numpy基础，大牛笔记详细解释
https://www.toutiao.com/a6664936105076326920/ 总认为Numpy是渣渣,直到深入接触以后才知道功能这么强大.堪比Matlab啊.果然是人生苦短,我用Pyth ...
python异常处理_Python基础语法案例（Fibonacci）：选择结构、循环结构、异常处理结构、代码优化...
推荐图书: <Python程序设计基础(第2版)>,ISBN:9787302490562,董付国,清华大学出版社,第16次印刷,清华大学出版社2019年度畅销图书图书购买链接(京东):配 ...
matlab imcrop 对应python函数_Python精讲Numpy基础，大牛笔记详细解释
总认为Numpy是渣渣,直到深入接触以后才知道功能这么强大.堪比Matlab啊.果然是人生苦短,我用Python.所以本文作为一个记录&笔记,文章内容大多数取自网络以&官网快速入门等, ...
Python 基础知识学习笔记——NumPy
Python基础知识学习笔记--NumPy 与 matlab 优秀的矩阵运算类似,python 提供了 numpy 库,这对熟悉 matlab 的用户来说非常友好.向量.矩阵和多维数组是数值计算中必不 ...

html基础元素案例笔记（1）

html基础元素案例笔记（1）相关推荐

最新文章

热门文章