整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML+CSS:常用表单控件之单选框、多选框、下拉框的介绍

一篇文章我们说了单行文本框和多行文本框,今天呢我们继续看一下表单的其它控件:单选框、复选框、下拉框。

(1)单选框和复选框

在我们表单页面中,经常会有选择性别或者选择爱好这类的内容,使用选择框是一个好主意,html中有两种选择框,即单选框和复选框,两者的区别是单选框中的选项用户只能选择一项,而复选框中用户可以任意选择多项,甚至全选。

使用语法:

单选框:<input type="radio" value="值" name="名称" checked="checked"/>

复选框:<input type="checkbox" value="值" name="名称" checked="checked"/>

详细讲解:

1、type: 当 type="radio" 时,控件为单选框;当 type="checkbox" 时,控件为复选框

2、value:提交数据到服务器的值(后台程序使用)

3、name:为控件命名,这里要注意同一组的单选按钮,name 取值一定要一致(具体可见下边的参考练习)。

4、checked:当设置 checked="checked"(也可以直接简写成checked) 时,该选项被默认选中

使用练习:

我们创建一个表单,表单里边包含姓别(男、女)选择的单选框,默认选中男以及爱好(唱歌、打游戏、绘画、旅游)选择的多选框,默认选中唱歌。具体的代码如下图所示:

在网页中的显示效果就如下图所示:

(2)下拉框

下拉框也是我们常用的一个表单控件,多用于选择城市地区等。

使用语法:

<select>

<option value="向服务器提交的内容" selected="selected">网页显示的内容</option>

</select>

详细讲解:

1、option:option为select下拉子元素,可以有一个或多个,写法类似ul和li,其中的value内容为提交数据到服务器的值(后台程序使用)

2、selected:当设置 selected="selected"(也可以直接简写成selected) 时,该选项被默认选中

使用练习:

我们创建一个表单,表单里边包含一个城市的下拉框,下拉框中有北京、上海、天津这三个城市,其中默认选中天津。具体的代码如下图所示:

在网页中的显示效果就如下图所示:

好了,本篇文章就先给大家介绍这几个表单控件的语法以及使用,下篇文章我们将介绍按钮的语法及使用以及完整的表单练习演示,记得平时要多加练习才是王道。

每日金句:做人要像竹子一样每前进一步,都要做一次小结。喜欢我的文章的小伙伴记得关注一下哦,每天将为你更新最新知识。

们在上网的时候,经常有一些登录界面进行输入账号和密码,以及我们在网上填一些信息,这些功能的实现都是通过表单来完成的,今天我们就来讲讲表单。

表单不是指一个标签,而是指一类标签。

我们表单里所有的内容都要写在<form></form>标签中 form的action属性是将表单所填的内容发送到想要发送的后台,而method属性有两个值,分别是get和post。get和post的主要区别是get表单所传的内容会在地址栏里显示出来,并且有长度限制,而post表单所传的内容不会在地址栏显示出来,并且可以视为没有长度限制。一般系统默认get。当然get和post的细区别还是有的,在这里我就不赘述了。

其中最重要的是<input>标签,input标签也是单标签。input标签的type属性值不同,其产生的作用也不同:如:<input type="text">产生的是文本框,一般都是我们登录时输入的账号那样的文本框。<input type="password">,产生的是密码框,一般都是我们登录时输入密码的那个框框。<input type="submit">产生的是提交框,一般是我们登录的那个按钮。这些标签都有value属性,但只有提交框用最合适用,因为文本框和密码框虽然也会展示出来,但效果却差强人意,我们一般都用placeholder属性替代它。

不知大家有没有在网上做过选择题,作者是做过的。网页中的选择题也是用的input。

input的type属性值还有radio,是单选框,有几个选项就写几个input,但要注意每一个input里都要写相同的name属性和属性值,这样的话浏览器才会知道这些是同一道题。

既然有单选题那一定也有多选题了,type的checked属性是多选框,其和单选的用法一样,也都要注意name一样的为一道题,还有一个属性是checked=“checked”,这个可以设定默认选择的选项。

我们也一定遇到过选择文字就能勾选而不用非得去点选框的情况,其实input选择框只有被点击的时候才能选中,但有的时候太小不容易点击甚至有的根本没有显示出来,这样的话用户体验就会非常的差,所以我们引进了一个标签:<label></label>标签,这个标签可以实现点击文字就进行选择的功能,用法就是将input标签和文字写在同一个label标签中,注意每一个选项写一起。

我们来看一下代码和结果:

作者已经尽量去说清楚了,欢迎大家批评指教,希望多多关注[送心]

素的边框 (border) 是围绕元素内容和内边距的一条或多条线。

CSS border 属性允许你规定元素边框的样式、宽度和颜色。

边框样式

border-style属性用来定义边框的样式。

border-style的值:



(1)编辑代码

打开记事本,编写其代码,并保存为HTML格式文件。代码如下。


(2)在浏览器中浏览效果

在浏览器中浏览效果如图所示。