HTML笔记（6）

y191024

发布于 2022-09-20 19:15:01

32100

代码可运行

文章被收录于专栏：睡不着所以学编程睡不着所以学编程

运行总次数：0

代码可运行

HTML笔记(6)

昨天一直在学习python的自动登录，教务系统已经可以成功登录了，但是12306还不行。今天继续学习HTML。

<label>标签

<label>标签为input元素定义标注（标签）。

<label>标签用于绑定一个表单元素，当点击label标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择相应的表单元素上，用于增加用户体验。简单来说，就是我们帮助我们更简单的点击我们想要的内容。就比如下图，用户只要将鼠标移到文字上，就可以选择到相对应的单选框。

(配图有点阴间了...)

基本格式：

<input>type=" radio " name="gender" id=" xxx "</input>

for里面的值必须和id相匹配。

实例代码：

    <label for="username">用户名：</label></label><input type="text" id="username"/> <br>
    <input type="radio" name="gender" id="female" ><label for="female">女</label>
    <input type="radio" name="gender" id="male"> <label for="male">男</label>

效果不好展示，因为我的鼠标会自动隐藏，所以就不做展示。

input表单元素基本上就学到这里，下面要学习select下拉表单元素了。

<select>下拉表单元素

使用场景：在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用<select>标签控件定义下拉列表.

基本语法格式:

如果想要默认选中某一选项,写法如下:

. . .

</select>

效果:

select表单元素的内容比较少,接下来就学习文本域表单元素.

<textarea>表单元素

使用场景: 当用户输入内容较多的情况下,我们就不能使用文本框表单了,此时我们可以使用<textarea>标签.

在表单元素中,<textarea>标签是用于定义

多行文本输入的控件.

使用多行文本输入控件,可以输入更多的文字,该控件常见于留言板,评论.

基本语法:

文本内容

</textarea>

cols="每行的字符数", row="显示的行数"

注意: 实际开发中不会使用这两个属性,多用CSS完成

综合案例:

现在要将学习的知识做一个综合的案例,要求的样式为

现在我要去做了,等待结果吧.

成果展示:

做的没有老师的那么美观,因为不是很会对齐,现在贴一下完整的代码:

<!DOCTYPE html>
<html lang="zh-cn">
<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>
    <form action="">
        性别 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="radio" name="gender" id="male" checked>
        <label for="male" >男</label>
        <input type="radio" name="gender" id="female">
        <label for="female">女</label>
        <br>
        生日 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <select name="" id="" >

            <option>--请选择年份--</option>
        </select>
        <select name="" id="" >
            <option>--请选择月--</option>
        </select>
         <select name="" id="" >
            <option>--请选择日--</option>
        </select><br>
        所在地区&nbsp;&nbsp;&nbsp;
        <input type="text"><br>
    
        婚姻状况&nbsp;&nbsp;&nbsp;
        <input type="radio" name="marriage" id="no" checked>
        <label for="no">未婚</label>
        <input type="radio" name="marriage" id="yes">
        <label for="yes">已婚</label>
        <input type="radio" name="marriage" id="devorce">
        <label for="devorce">离婚</label><br>

        学历&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="text"><br>
        喜欢的类型
        <input type="checkbox" name="type" id="sexy">
        <label for="sexy">妩媚的</label>
        <input type="checkbox" name="type" id="cute">
        <label for="cute">可爱的</label>
        <input type="checkbox" name="type" id="young">
        <label for="young">年轻的</label>
        <input type="checkbox" name="type" id="mature">
        <label for="mature">成熟的</label><br>
        
        自我介绍&nbsp;&nbsp;&nbsp;&nbsp;
        <textarea name="" id="" cols="20" rows="2" >
        自我介绍</textarea><br>
        <input type="button" value="免费注册" >
        <input type="radio" checked name="agree"> 我同意注册条款和会员加入标准  <br>
        <a href="#" target="_blank">我是会员,立刻登录</a>
        <h4>
        我承诺</h4>
        <ul>
        <li>年满18、单身</li>
        <li>抱着严肃的态度</li>
        <li>真诚的寻找另一半</li></ul>

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

学了一个下午,现在要休息一下准备运动了 : )

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2021-05-18，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法