表单

5.表单元素——checked属性

任务描述

本关任务：创建一组单选框，name属性值为marry，默认选中未婚。

要求：对每一个选项使用<p>标签进行换行。

效果如下：

婚姻状况：
在这里插入图片描述

相关知识

checked属性

在填写兴趣爱好时，男生基本都喜欢篮球，这时就可以在多选框里默认选择篮球，方便信息的填写，不喜欢的可以不选。

这里在需要添加默认选中的多选框里添加checked属性即可，其默认值为checked。

例子如下：

<input type="checkbox" name="hobby" />足球  <br>
<input type="checkbox" name="hobby" checked="checked"/>篮球   <br>
<input type="checkbox" name="hobby"/>乒乓球

效果如下：
在这里插入图片描述
需要注意的是：

只要有checked属性就会被默认选中，不管它的值是什么；

不想被默认选中，不添加checked属性就可以了。

下面这三种情况都会被选中。

<input type="checkbox" name="hobby" checked="checked"/>足球  <br>
<input type="checkbox" name="hobby" checked="false"/>篮球   <br>
<input type="checkbox" name="hobby" checked/>乒乓球

效果如下：
在这里插入图片描述
为了规范书写，一般添加checked="checked"就可以了。

checked 属性 与 <input type="checkbox"/> 或 <input type="radio"/> 一起配合使用。

代码文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    婚姻状况:<br>
    <!-- ********* Begin ********* -->
    <p>
        <input type="radio" name="marry" checked="checked"/>未婚<br>
    </p>
    <p>
        <input type="radio" name="marry" />已婚
    </p>


    <!-- ********* End ********* -->
</body>
</html>

6.表单元素——disabled 属性

任务描述

本关任务：创建一组单选框，type属性值为radio，name属性值为degree，禁用难度系数为困难的选项。

要求：对每一个选项使用

标签进行换行。

效果如下：

难度系数：
在这里插入图片描述

相关知识

disabled属性

在选择选修课时，热门课程很快就会被选完，后面选课的同学就不能选这门课了。这个该怎么实现呢？

这里在多选框里添加disabled属性即可，它会禁用该input元素，其默认值为disabled。

例子如下：

<input type="checkbox" name="course" disabled="disabled">影视鉴赏  <br>
<input type="checkbox" name="course">中国语言文学<br>
<input type="checkbox" name="course">心理学

效果如下：
在这里插入图片描述
需要注意的是：

只要有disabled属性就会被禁用，不管它的值是什么；

不想被禁用，不添加disabled属性就可以了。

为了规范书写，一般添加disabled="disabled"就可以了。
由于测试需要，请在标准格式下加上/，如下：

<input type="checkbox" name="course" disabled="disabled"/>影视鉴赏  <br>

注意：本地环境下，两种格式都能正确显示。本关是为了方便测评同学们的代码，所以要求写成带/的模式。

代码文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    难度系数:<br>
    <!-- ********* Begin ********* -->
    <p>
        <input type="radio" name="degree"/>简单<br>
    </p>
    <p>
        <input type="radio" name="degree"/>中等<br>
    </p>
    <p>
        <input type="radio" name="degree" disabled="disabled"/>困难
    </p>

        
    <!-- ********* End ********* -->
</body>
</html>

7.表单元素——label 标签

任务描述

本关任务：实现当点击<label>元素内的文本时，焦点会自动定位到与<label>标签绑定的表单元素上，要求如下：

  1. <label>标签的for属性值为user，创建一个文本框，name属性的值为user；
  2. <label>标签的for属性值为pwd，创建一个密码框，name属性的值为password。
  3. input标签的id注意要和label标签的for属性值一致哦。

注： 属性的先后顺序为：type -- id -- name 。

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

相关知识

<label>标签的作用主要是提高用户体验性。当点击<label>元素内的文本时，焦点会自动定位到与<label>标签绑定的表单元素上。通俗地说，就是点击文本也能选择表单元素。

需要注意的是：<label>标签的for属性的值要和相应表单元素的id的值相同。这样才能把<label>标签和表单元素绑定到一起。

例子如下：

QQ空间状态：
<label for="secret">保密：</label>    
<input type="radio" id="secret" name="state"  /> <br>
<label for="open">公开：</label>
<input type="radio" id="open" name="state"  />

代码文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <!-- ********* Begin ********* -->
    <p>
        <label for="user">用户：</label>
        <input type="text" id="user" name="user"/><br>
    </p>
    <p>
        <label for="pwd">密码：</label>
        <input type="password" id="pwd" name="password"/>
    </p>

        
    <!-- ********* End ********* -->
</body>
</html>

8.表单元素——下拉列表

任务描述

本关任务：创建一个下拉列表，默认选中客户端测试，没有value值 。

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

相关知识

你可以使用<select>标签用来创建下拉列表，<option>标签定义列表中的可用选项。

例子如下：

<select>
    <option value="apple">苹果</option>
    <option value="banana">香蕉</option>
    <option value="pear">梨</option>
    <option value="apple">菠萝</option>
</select>

效果如下：
在这里插入图片描述
可以发现： 显示的是第一个<option>标签里面的内容。如果想默认显示第三个<option>里的内容呢？

在要默认显示的<option>里添加selected属性就可以了。

例子如下：

<select>
    <option value="apple">苹果</option>
    <option value="banana">香蕉</option>
    <option value="pear" selected="selected">梨</option>
    <option value="apple">菠萝</option>
</select>

效果如下：
在这里插入图片描述
selected属性的用法和前面介绍的checked属性一样。

为了规范书写，一般添加selected="selected"就可以了

代码文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    选择版块：
    <!-- ********* Begin ********* -->
    <select>
        
        <option >问答</option>
        <option >分享</option>
        <option >招聘</option>
        <option selected="selected">客户端测试</option>
    
    </select>
     
	<!-- ********* End ********* -->
</body>
</html>

9.表单元素——文本域

任务描述

本关任务：创建一个文本域，最多能输入的字符数为15。
在<style></style>标签里设置宽度为200px，高度为120px。

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

相关知识

<textarea>标签可以定义多行的文本输入框。用宽（width）和高（height）来定义输入框的大小，用maxlength来定义文本区域最大能输入的字符数。

例子如下：

个人描述：<textarea maxlength="10"></textarea>

效果如下：
在这里插入图片描述
如何添加宽、高呢？用<style></style>标签包裹，里面填写样式即可。

例子如下：

<style>
textarea{
  width:160px; 
  height:100px;
}
</style>
个人描述：<textarea maxlength="10"></textarea>

代码文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- ********* Begin ********* -->
    <style>
        textarea {
            width:200px;
            height:120px;


        }
    </style>
</head>
<body>

    用一句话描述自己的特点：<textarea maxlength="15"></textarea>
    <!-- ********* End ********* -->
</body>
</html>

10.表单元素——提交按钮

任务描述

本关任务：创建一个提交按钮，其value值为submit。

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

相关知识

你可以使用<input type="submit"/>来创建一个提交按钮，用于向服务器端发送数据。

例子如下：

<input type="submit" value="提交按钮"/>

效果如下：
在这里插入图片描述
因为这里没有提交数据，所以这里没有效果，这里先简单的创建一下提交按钮。

代码文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>

    <label for="user">用户：</label><input type="text" id="user" name="user"/><br>
    <label for="pwd">密码：</label><input type="password" id="pwd" name="password" style="margin-bottom: 10px;"/><br>

    <!-- ********* Begin ********* -->
    
        <input type="submit" value="submit">
   



    <!-- ********* End ********* -->
</body>
</html>

11.表单元素的综合案例

任务描述

本关任务：完成一个表单的创建任务。

这里标签要按照规定格式来写，因为有<div>标签，会自动换行，就不用<br>标签了。

属性的先后顺序为： type -- id -- class -- name -- value ，其他需要添加的属性最后写。

其他要求如下：

  • 用户名：添加类.common；
  • 昵称：添加类.common；
  • 性别：name属性的值为sex，禁用保密；
  • 男：<label>标签的for属性的值为male；
  • 女：<label>标签的for属性的值为female；
  • 保密：
  • 教育程度：添加类.common，默认选中本科；
  • 选项有：高中，中专，大专，本科，硕士，博士，其他；
  • 婚姻状况：name属性的值为state，默认选中未婚；
  • 未婚：<label>标签的for属性的值为single；
  • 已婚：<label>标签的for属性的值为married；
  • 保密：<label>标签的for属性的值为secret；
  • 兴趣爱好：name属性的值为hobby，默认选中看电影；
  • 踢足球：<label>标签的for属性的值为football；
  • 打篮球：<label>标签的for属性的值为basketball；
  • 看电影：<label>标签的for属性的值为film；
  • 描述自己的特点：添加类.common，字符最大长度为20；
  • 提交：添加空<span></span>，用来占位，添加类.common，value值为提交。
  • 要求：像“用户名、昵称”这些采用<span>标签包裹文本，而‘男、女’这些单选框和多相框采用<label>标签包裹文本。

效果如下：
在这里插入图片描述
下拉框：
在这里插入图片描述

相关知识

本关是一个综合案例，是对前面所学知识的总结和拓展。

前面学的都是表单元素，这些表单元素都是属于表单的， 用<form></form>标签包裹。

这里需要添加一些简单的样式，让界面更美观、大方。

因为表单有多个表单元素，所以每个元素都要有间距。这里先小小的做个规定：

  • 每个表单元素都用<div></div> 标签包裹；
  • 表单元素里的文本都用<span></span>标签包裹，对于有<label>标签包裹文本的，就不用<span>标签了；
  • input元素需要改变宽和高的添加类.com。

例子如下：

<style>
div{
    margin-bottom: 10px;
}
.com{
    width: 200px;
    height: 30px;
}
</style>
<div>
    <span>用户名：</span>
    <input type="text" class="com"/>
</div>
<div>
    <span>密码：</span>
    <input type="password" class="com"/>
</div>

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

代码文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>

    .container{
        width: 40%;
        margin: 20px auto;
    }
    .common{
        width:230px;
        height: 30px;
    }
    span{
        display:inline-block;
        width: 150px;

        text-align: right;
    }
    div{
        margin-bottom: 10px;
    }
    </style>
</head>
<body>

    <form class="container">
    <!-- ********* Begin ********* -->
    <div>
        <span>用户名：</span>
        
            
            <input type="text" class="common"/>

        
        
    </div>

     <div>
        <span>昵称：</span>
        
            <input type="text" class="common"/>
        
        
    </div>

    <div>
        <span>性别：</span>
        <label for="male" name="sex">
            <input type="radio" id="male"/>男
        </label>
        <label for="female" name="sex">
            <input type="radio" id="female"/>女
        </label>
        <label for="other" name="sex">
            <input type="radio" id="other" disabled="disabled"/>保密
        </label>
    </div>
    <div>
        <span>教育程度：</span>
        <select class="common"/>
            
            <option>高中</option>
            <option>中专</option>
            <option>大专</option>
            <option selected="selected">本科</option>
            <option>硕士</option>
            <option>博士</option>
            <option>其他</option>
        </select>
    </div>
    <div>
        <span>婚姻状况：</span>
        <label for="single" name="state">
            <input type="radio" checked="checked" id="single"/>未婚
        </label>
        <label for="married" name="state">
            <input type="radio" id="married"/>已婚
        </label>
        <label for="secret" name="state">
            <input type="radio" id="secret"/>保密
        </label>
    </div>
    <div>
        <span>兴趣爱好：</span>
        <label for="football" name="hobby">
            <input type="checkbox" id="football"/>踢足球
        </label>
        <label for="basketball" name="hobby">
            <input type="checkbox" id="basketball"/>打篮球
        </label>
        <label for="film" name="hobby">
            <input type="checkbox" id="film" checked="checked"/>看电影
        </label>
    </div>
    <div>
        <span>描述自己的特点： </span> 
        <textarea maxlength="20" class="common"></textarea>
    </div>
    <div >
    <span></span>
    <input type="submit" value="提交" class="common"/>
    </div>
<!-- ********* End ********* -->
</form>
</body>
</html>
# html
Logo
开放原子开发者工作坊

开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！

更多推荐

openEuler系累计装机量突破1000万，树立操作系统产业新里程碑

11月15日，以“以智能，致世界”为主题的操作系统大会2024在北京中关村国际创新中心召开。

avatar 开放原子开发者工作坊

多模态大模型&科学计算双管齐下，百度飞桨两大赛项报名倒计时！

第二届开放原子大赛是由开放原子开源基金会组织举办的开源技术领域专业赛事，聚焦解决真问题，重点覆盖基础软件、工业软件、人工智能大模型等领域

avatar 开放原子开发者工作坊

以智能 致世界 | 操作系统大会2024议程全览

avatar 开放原子开发者工作坊