一起自学前端开发!

表单的选择框---前端入门教程

来源:原创    更新时间:2017-08-10 11:22:56    编辑:前端网    浏览:1733

   在网上填写信息的时候,不单会碰到需要输入的信息,还会碰到需要选择的信息。

在上一章节中,我们介绍了表单的输入框,在本章节中我们将介绍表单的选择框。

选择框可以分成三种,单选框、复选框和选择列表。


一、单选框

当要对某些选项进行单项选择的时候使用单选框。

单选框是通过设置<input>标签的type值为radio来实现的。

格式:

<input type="radio" name="ex" value="" checked>
<input type="radio" name="ex" value="">
<input type="radio" name="ex" value="">


说明:

要实现单选效果,需要将几个选项的name属性值设置成一样。

如果要设置某个值是默认选中,可以设置checked属性。如果设置多个,将默认选中最后一个。

举例:性别选择

代码如下:

<form action="#" method="post" target="_blank">
<div>
<input type="radio" name="sex1" value="male">男
<input type="radio" name="sex1" value="female">女
<input type="radio" name="sex1" value="no">不公开
</div>
<div>
<input type="radio" name="sex2"  value="male" checked>男
<input type="radio" name="sex2" value="female">女
<input type="radio" name="sex2" value="no">不公开
</div></form>


效果1.png


二、复选框

当需要对多个选项进行多项选择时使用复选框。

复选框和单选框一样是通过改变<input>标签的type属性来实现。

将type值设置为checkbox来定义复选框。

格式:

<input type="checkbox" name="ex" value="" checked>
<input type="checkbox" name="ex" value="">
<input type="checkbox" name="ex" value="">


说明:

和单选框一样,需要将几个选项的name属性值设置成一样。

如果要设置某个值是默认选中,可以设置checked属性,可以设置多个。


举例:选择喜欢的运动

代码如下:

<form action="#" method="post" target="_blank"> 
 <input type="checkbox"  name="sport" value="0"  />篮球
   <input type="checkbox"  name="sport" value="1"  checked/>游泳
    <input type="checkbox"  name="sport" value="2"  />足球
     <input type="checkbox"  name="sport" value="2" checked />轮滑</form>


效果


2.png

3.png


三、选择列表

选择列表不是通过<input>标签来实现,需要通过另外的标签来实现。

通过 <select> 元素用来创建下拉列表,通过<option>标签来创建选项。

格式:

  <select name=""> 
<option value=""></option>  
<option value="" selected></option>  
<option value=""></option>
 </select>


说明:

通过设置selected属性来选择默认的选项。

默认情况下的选择列表是单选的。

默认情况下选择列表只显示一项。

举例:一个单项选择的选择列表

代码如下:

<select name="city" > 
 <option value="0">福州</option>
<option value="1" >厦门</option>
 <option value="2" >宁波</option>
 <option value="3" >杭州</option>
<option value="4" selected>泉州</option> </select>


效果:


4.png5.png



想要将选择列表变为多选列表需要设置multiple属性。

设置了multiple属性后,选择列表将完全展开,可以通过设置size属性来改变显示的数量。

在windows系统下按住 Ctrl 按钮来选择多个选项

举例:将选择列表变成多选列表

代码如下:

<select name="city1" multiple> 
<option value="0">福州</option> 
 <option value="1">厦门</option> 
<option value="2" selected>宁波</option>
 </select> 
 <select name="city2" size="1" multiple>
  <option value="0">福州</option> 
<option value="1">厦门</option>
<option value="2" selected>宁波</option> 
</select>


效果:6.png7.png






评论区

表情

共0条评论
  • 这篇文章还没有收到评论,赶紧来抢沙发吧~

相关内容

点击排行

随机新闻

评论排行榜