关于一个表单创建的基础工程分析（基础综合版）

最新推荐文章于 2022-10-09 14:08:09 发布

DJ懒

最新推荐文章于 2022-10-09 14:08:09 发布

阅读量359

点赞数 1

分类专栏：前端文章标签： html5

本文链接：https://blog.csdn.net/weixin_52377956/article/details/118768617

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

关于一个表单创建的基础工程分析（基础综合版）

最近做到了一道知识点较密集的前端基础综合题，觉得蛮好，拿来分享一波，一起看看吧

流程预览

关于一个表单创建的基础工程分析（基础综合版）

题目

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

其他要求如下：

用户名：添加类.common；

昵称： 添加类.common；

性别： name属性的值为sex，禁用保密；

男：<label>标签的for属性的值为male；

女：<label>标签的for属性的值为female；

保密：<label>标签的for属性的值为other；

教育程度： 添加类.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>标签包裹文本。

效果如下：

代码

<!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>
        <input type="radio" id="male" name="sex"/>
        <label for="male">男</label>
        <input type="radio" id="female" name="sex"/>
        <label for="female">女</label>
        <input type="radio" id="other" name="sex" disabled="disabled"/>
        <label for="other">保密</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>
        <input type="radio" id="single" name="state" checked="checked"/>
        <label for="single">未婚</label>
        <input type="radio" id="married" name="state"/>
        <label for="married">已婚</label>
        <input type="radio" id="secret" name="state"/>
        <label for="secret">保密</label>
    </div>
    <div>
        <span> 兴趣爱好：</span>
        <input type="checkbox" id="football" name="hobby"/>
        <label for="football">踢足球</label>
        <input type="checkbox" id="basketball" name="hobby"/>
        <label for="basketball">打篮球</label>
        <input type="checkbox" id="film" name="hobby" checked="checked"/>
        <label for="film">看电影</label>
    </div>
    <div>
        <span>描述自己的特点 ：</span>
        <textarea class="common" maxLength="20"></textarea>
    </div>
    <div>
        <span></span>
        <input type="submit" class="common" value="提交" />
    </div>
<!-- ********* End ********* -->
</form>
</body>
</html>

按类型分析

首先提纲挈领地指出要不忘初心，该有的表单排面还得有，必须先先先写好 form标签，要不都白扯
再者欣慰的一点，我们不需要专门研究样式的大小，题目中已经给出具体尺寸。废话不多说，上硬货：

第一个模块：用户名和昵称

通过观察不难看出，用户名和昵称均为文本框型，格式完全一致，我们只需更改它的文本内容即可。
为什么这里要用div标签和span标签？
答：①div标签默认独占一行，作用于br相似，通过div标签可以很好地区分板块，更条理。
②span标签灵活度很高，它用来封装数据的长度，用它可以截取任何一段文章甚至是某一部分，通过这样的方法可以实现对选中内容的操作，比如添加颜色或者添加样式，这样更方便。

所以用户名和昵称模块也就分为这样几步：
一.用div标签圈住整体操作的一个模块
二.用span标签对里面的内容进行修饰
三.设置文本框的属性和样式

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

第二个模块：性别和婚姻状况

性别这个东西，做为一个天然人一般都只有一种性别，而且题目设置为圆圈圈，于是乎我们设置单选框：（读懂题意，不要放过关键点）
禁用保密是什么？
答：就是需要在性别的那个单选标签里添加disabled属性，表示该选项不能选，就是给你看着玩的。
格式：disabled=“disabled”

举个栗子（小声哔哔，这里没有用div标签用了br，其实是一样的道理哈）

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

结果就是影视鉴赏不能选，其他都能选

label标签咋用？
答：label标签是一个表单控件，常见的用法就是用它把框框（文本框，密码框，单选复选框等等）前面的文字单独拎出来罩住，下面再进行属性的具体设定。
span标签卡的是大名字；label标签卡的是小名字（使用前提是这个模块内容是必选类而不是可选类）
大名字就是写在最前面反映这个模块属性的名词，比如题中的用户名，昵称，性别这些
小名字就是里面具体的一些选项，比如具体的性别，婚姻状况等等

表单元素input标签遵循的顺序为type-id-name
格式：<label for=" "> </label>
注意 input标签的id要和label标签的for属性值一致

这样就会实现当点击<label>元素内的文本时，焦点会自动定位到与<label>标签绑定的表单元素上（就是当你点label标签内的文字时，光标会在后面对应的框框内显示，不使用label标签则达不到这个效果）

普通选项框（单选复选框）如何设置默认选项？
答：在表单元素相应标签后添加checked=“checked"即可。

搭好框架，加细节，完成

	<div>
        <span>性别：</span>
        <input type="radio" id="male" name="sex"/>
        <label for="male">男</label>
        <input type="radio" id="female" name="sex"/>
        <label for="female">女</label>
        <input type="radio" id="other" name="sex" disabled="disabled"/>
        <label for="other">保密</label>
 	</div>

	<div>
        <span>婚姻状况：</span>
        <input type="radio" id="single" name="state" checked="checked"/>
        <label for="single">未婚</label>
        <input type="radio" id="married" name="state"/>
        <label for="married">已婚</label>
        <input type="radio" id="secret" name="state"/>
        <label for="secret">保密</label>
	</div>

第二点五个模块：兴趣爱好

和前面的单选框有异曲同工之妙，换汤不换药，只是把单选框radio改为多选框checkbox

搭框架，加细节，完成

	<div>
        <span> 兴趣爱好：</span>
        <input type="checkbox" id="football" name="hobby"/>
        <label for="football">踢足球</label>
        <input type="checkbox" id="basketball" name="hobby"/>
        <label for="basketball">打篮球</label>
        <input type="checkbox" id="film" name="hobby" checked="checked"/>
        <label for="film">看电影</label>
	</div>

第三个模块：教育程度

该模块为下拉列表，需要使用<select>标签用来创建下拉列表，<option>标签定义列表中的可用选项
下拉列表如何设置默认选项？
答：在option后添加内容selected=“selected”即可。

还是先搭好框架，再加细节，完成

	<div>
        <span>教育程度：</span>
        <select class="common">
        <option>高中</option>
        <option>中专</option>
        <option>大专</option>
        <option selected="selected">本科</option>
        <option>硕士</option>
        <option>博士</option>
        <option>其他</option>
        </select>
	</div>

第四个模块：描述特点

这里涉及到文本域和允许设置最大字符的问题，回顾一下

<textarea>标签可以定义多行的文本输入框。用宽（width）和高（height）来定义输入框的大小，用maxlength来定义文本区域最大能输入的字符数
其中具体宽高值题目已经给出，此处不做考虑

搭框架，加细节，完成

 	<div>
        <span>描述自己的特点 ：</span>
        <textarea class="common" maxLength="20"></textarea>
    </div>

第五个模块：提交按钮

题目要求span标签用来占位，我们原模原样放好标签就行，不加内容
一个提交按钮的基本格式

<input type=submit value="submit"/>

搭框架，加细节，完成

 	<div>
        <span></span>
        <input type="submit" class="common" value="提交" />
    </div>

总结

label标签和input标签搭配使用时，注意观察题目中所给先后位置（即框框在前小名字在后，还是小名字在前框框在后，这根据具体情况而定）本题中均采用框框在前名字在后的格式，所以input标签在前，label标签在后
完成前端的基础思维：抓共同点，减少重复操作
基本操作：先搭框架-再加细节

这个题目到这里就算写完了，如有问题，欢迎下方留言指教哈~

DJ懒

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
关于一个表单创建的基础工程分析（基础综合版）

关于一个表单创建的基本工程分析题目属性的先后顺序为： type – id – class – name – value ，其他需要添加的属性最后写。其他要求如下：用户名：添加类.common；昵称：添加类.common；性别： name属性的值为sex，禁用保密；男：<label>标签的for属性的值为male；女：<label>标签的for属性的值为female；保密：<label>标签的for属性的值为other；*教育程度：添加类.comm
复制链接

扫一扫

专栏目录