HTML的select元素
6245字,阅读需时21分钟
来自专栏
课程/专栏

select元素创建一个列表框,用户可以在列表框中选择列表项。列表框可以把一类性质相同的数据项以组的方式展现给用户,用户在列表框中可以单选或多选列表框列出的数据项,每条数据项称为列表项。

一方面列表框为用户输入数据提供了一种便捷方式,只要把已知的数据项列举出来,用户在列表框中选择列表项就可以;另一方面可以把需要搜集的数据规范化,防止因用户输入数据的随意性而造成后端处理数据的混乱。例如,在搜集用户个人信息时,可能需要用户输入职业信息,后端程序需要按照职业信息对用户进行职业分类。在这种情况下,采用列表框元素就是比较好的获取用户数据的方式,可以预先规划好职业信息,把规划好的职业信息以列表框方式展现给用户,用户只需要选择列表项就可以了,无需让用户输入职业信息。

select元素使用select标签,select标签有两个比较重要的属性。一个属性是multiple,multiple属性用于设置select列表项是否允许用户多选,multiple属性值为true时,用户可以选择多个列表项,multiple属性值为false时,用户只能选择一个列表项,;另外一个属性是size,size属性用于设置select列表框可显示的列表项数目,当列表项数目超过size时,select列表框会自动创建纵向滚动条。

select列表框的列表项使用option标签,option标签放置在select标签的起始标签和结束标签内,每个option标签就是一个列表项。option标签的常用属性有value和selected。value属性存储该项的值,后端程序通过value属性获取该项的值;selected是个特殊属性,只有属性名没有值,option标签添加该属性后,该项被默认选择。

下面的HTML文档展示了select元素的使用方法。

<html>
<head>
      <title>列表框的使用</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
       <h5>这是单选列表框</h5>
       <select name="job_single" size="6">
           <option value="软硬件开发" selected>信息技术</option>
           <option value="互联网运营" >互联网运营</option>
           <option value="生产制造" >生产制造</option>
           <option value="科学研究" >科学研究</option>
           <option value="项目管理" >项目管理</option>
          <option value="公务员" >公务员</option>
          <option value="医疗" >医疗</option>
       </select>
 <h5>这是多选列表框</h5>
  <select name="job_multiple" size="6" multiple="true">
           <option value="软硬件开发" selected>信息技术</option>
           <option value="互联网运营" >互联网运营</option>
           <option value="生产制造" >生产制造</option>
           <option value="科学研究" >科学研究</option>
           <option value="项目管理">项目管理</option>
          <option value="公务员" >公务员</option>
          <option value="医疗" >医疗</option>
       </select>
 </boyd>
<html>

下图是浏览器的显示效果。从浏览器的显示效果可以看出,当select属性multiple设置为true时,用户可以选择多个列表项。选择多个列表项的方法因操作系统不同而有所差别,对于Windows系统按住 Ctrl 按钮来选择多个列表项,对于Mac系统按住 command 按钮来选择多个选项。当需要用户进行多选操作时,需要告知用户多选选择的操作方式。

  image.png

例1:设计一个用户信息登记网页,用户信息包括用户姓名、年龄、性别、邮箱、爱好(可多选)、职业、个人简介。

<html>
<head>
      <title>信息登记</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
       <h3>用户信息登记表</h3>
       <hr>
      <form action="/login.jsp">
          <p> 姓名:<input type="text" name="username" maxlength="20" value="请输入您的姓名"/></p>
          <p> 年龄:<input type="text" name="age" maxlength="3" value="请输入您的年龄"/></p>
          <p>性别:<input type="radio" name="sex" value="男" />男<input type="radio" name="sex" value="女" />女</p>
          <p>爱好:</p>
                <input type="checkbox" name="fav"  value="旅游" checked />旅游
                <input type="checkbox" name="fav" value="体育"  checked />体育
                <input type="checkbox" name="fav" value="文学" />文学
                <input type="checkbox" name="fav" value="娱乐" />娱乐
                <input type="checkbox" name="fav" value="学习" />学习
                <input type="checkbox" name="fav" value="军事" />军事
          <p>职业:</p>
               <select name="job_single" size="6">
                    <option value="软硬件开发" selected>信息技术</option>
                    <option value="互联网运营" >互联网运营</option>
                    <option value="生产制造" >生产制造</option>
                    <option value="科学研究" >科学研究</option>
                    <option value="项目管理" >项目管理</option>
                    <option value="公务员" >公务员</option>
                    <option value="医疗" >医疗</option>
              </select>
          <p>个人简介:</p>
          <textarea cols="50" rows="10">请输入个人简介</textarea>
          <p><input type="submit" value="提交"/></p>
     </form>    
</boyd>
<html>

浏览器显示效果如下图所示。在上面的网页代码中,当select标签没有设置multiple属性时,默认是单选。在实际应用中,如果需要用户多选,建议使用检查框元素。

image.png

我要评论
全部评论
郎宏林
授课老师
授课老师简介
项目经理,系统分析和架构师,从事多年中文信息处理技术。熟悉项目管理、擅长项目需求分析和设计、精通Java、C#、Python等编程语言。
下载APP

手机、电脑同步学

用微信或手机浏览器扫描二维码,即可下载APP。

  • 备案号:鲁ICP备15001146号
  • @1997-2018 潍坊米粒花网络技术有限公司版权所有