山地人

课12.表单进阶

山地人
山地人
2021-05-13

课12.表单进阶

项目下载地址:前往GitHub

课12.表单进阶——大纲

还记得我们在课09.认识表单一节课中学习的表单吗,如果有点遗忘,也没关系,我在开头会带你一起回顾下知识,温故而知新。

这节课我们继续来讲表单的一些进阶话题。先来复习一下之前用过的一些标签。

复习巩固

单行文本框

单选框

注意,如果你要让几个单选按钮能够只选中一个,你需要为需要分在一组里的单选按钮,定义相同的name。这样你在点击另外一个相同名称的单选按钮时,其他的单选按钮就会自动变成取消选中的状态了。

value这个属性是最后表单提交到服务器上,服务器会受到的你选择的这项的值。这里你先简单了解一下,等以后我们开设了后端课程,会在专门的专题里来讲这块内容。

复选框

和单选框一样,如果你希望一组复选框,最后提交到服务器上时,能够分在一组里。你需要给他们定义相同的name名称。其他使用方式上,基本和上面的单选按钮是一样的。

下拉框

<select>是下拉框的标签,而下来框里的每一项,我们需要使用<option>标签来定义。

<option></option>标签之间的部分会显示出来。

多行文本框

<textarea>是多行文本框标签。

提交按钮

表单样式美化

美化表单

form {
border:dashed 3px blueviolet;
border-radius: 5px;
margin:20px;
padding:20px;
}

这个样式,我们简单分析一下:

  • 行2:定义表单边框类型为dashed虚线框类型,粗细为3px(3像素),边框颜色为blueviolet紫色。
  • 行3:边框圆角半径为5像素
  • 行4:表单外边距20像素,也就是边框外面有20像素的留白。
  • 行5:表单内边距20像素,也就是边框往内部产生上下左右20像素的留白。

在下面的编辑器中为form添加上述美化样式

美化标题

.title{
width:150px;
text-align: right;
display: inline-block;
}

分析一下样式:

  • 行2:指定元素为固定150像素宽度
  • 行3:文字水平居右显示
  • 行4:元素以行内块元素的方式显示。(这一条,在这里主要是为了让width生效,目前对这个有个大致了解即可)

在编辑器中为添加.title类样式

美化输入框

input[type=text]{
width:200px;
border:solid 1px blueviolet;
border-radius: 5px;
line-height: 30px;
}

这里重点要关注下input[type=text]这种写法我们之前没有见过,这里做下讲解:

input[type=text]这个选择器叫,属性选择器。在这里是对input元素并且这个inputtype属性的值是text的这种元素进行选择。

至于,这个属性选择器内部的那些CSS规则,我相信你自己已经能够分析了,这里不再赘述。

在编辑器中为text类型的input标签添加上述美化样式

完整演示

本课小结

这节课,我们重点是复习巩固之前学过的表单中的控件,并对这次的案例进行一些补充。

  • 下拉框
  • 下拉框内部选项
  • CSS新学了一个属性选择器
  • 新学了一些CSS样式规则

课后练习

运用今天和之前课程学习过的知识,做一个小练习:

制作一份美观的调查问卷。

学完本篇互动教程,如果你觉得体验不错,可以把网页链接发送给你的小伙伴,让他/她也来感受一下。当然,你也可以继续看看网站上其他的的互动教程,希望`idev365`能够给你带来收获。

学习教程的过程中碰到了问题,或者对idev365有什么改进意见和想法,欢迎加入idev365微信内测群,和山地人交流你的想法。