用户交互元素

前面,我们学习的 HTML 元素都是用来 展示信息 的。

但是现在的Web网页不仅仅是展示信息的网页,同时还可以是一个交互式的应用程序。

那必须有能够和 用户交互 的 HTML元素,比如可以让用户 输入信息的

本章就讲解一些常用的让 用户交互 HTML 元素。


用户交互元素 是和 js语言紧密相关的,这里我们先了解这些元素的界面呈现特性

后面在学习 js Web应用这个阶段时,会了解到如何代码操作这些元素,比如获取输入的值,设置输入内容等。

input 概述

input 元素是最常见的交互元素之一

比如 单行文本输入框


<input type="text" id="name" value="白月黑羽">



input元素,根据其属性 type 的不同取值,可以界面呈现出不同类型的输入元素,

比如

  • type="text"

输入单行字符串



  • type="email"

输入email,非email格式,提交表单前,会有错误提示



  • type="number"

输入数字,不能输入非数字字符,可以输入负数或者小数点



  • type="password"

输入密码,缺省不回显在界面上



  • type="checkbox"

复选框



  • type="radio"

单选按钮



  • type="color"

选择颜色值



  • type="range"

选择范围值



  • type="date"

日期选择框



  • type="time"

时间选择框



  • type="datetime-local"

日期时间选择框



  • type="week"

选择第几周



  • type="submit"

提交按钮,点击提交所属表单(form)信息



  • type="reset"

重置按钮,点击重置所属form输入元素

表单 form

通常,对应某个交互功能的一组用户输入元素,比如输入注册信息,

会放到一个 表单元素 form 中。

如下

<head>
  <style>
    form {
      border : 1px solid gray;
      margin : 5rem auto;
      width  : 400px;
      height : 200px;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;
    }
  </style>
</head>

<body>
<form action="/register" method="post">
  <div>
    <input type="text" name="user_name" placeholder="用户名">
  </div>

  <div>
    <input type="email" name="user_email" placeholder="email" >
  </div>
   
  <div>
    <input type="submit">
    <input type="reset">
  </div>
</form>
</body>

上面的form,填入合适的用户名、email地址后,

按F12, 打开开发者工具栏,选择 network 页

然后点击提交按钮,可以发现,有http请求消息,携带用户填入的数据信息,提交到网站服务端了

关于http协议和消息格式,后面讲js语言的时候会有详细讲解。

这里只要知道这是一种网络传输数据的协议就可以了。


这个 http 消息里面

  • 请求 method 是 form 的 method 属性定义的

  • 请求 url 是 form 的 action 属性定义的

  • 消息体数据格式 是 application/x-www-form-urlencoded

    消息体数据格式由参数 enctype 指定。

    本例中没有填写,缺省值就是 application/x-www-form-urlencoded

    上例中,如果填写的

    user_name=asef
    user_email=1750696907@qq.com
    

    对应 urlencoded格式的 消息体内容就是

    user_name=asef&user_email=1750696907%40qq.com
    

    字段之间用 & 隔开,每个字段是 字段名=字段值 的格式

    字段名就是输入元素的 name 属性的值


    消息体格式参数 enctype 的值 还可以是:

    • multipart/form-data

      这个值通常用在 form 中有 input 类型是file, 上传文件数据的时候

    • text/plain

    纯文本格式,上例中,对应消息体内容就是

    user_name=asef
    user_email=1750696907@qq.com
    

    如果你希望更灵活的数据格式,比如 json, 就得自己写 js 代码来实现了,后面js教程中有讲解。



注意:其实使用js代码,也可以直接获取各个输入元素里面的用户输入内容,并不一定需要把这些元素放在form中。

但是使用form 会带来额外的好处,比如语义的清晰性,字段的自动检查(比如email格式等) 输入框按回车键自动提交等等。

所以还是推荐尽量使用form



form提交后,就是发送了一个 POST HTTP请求,当前浏览器的访问的网址就变成了 属性 action 指定的url地址

如果你只是想发送异步Ajax请求,并不想更新网址,怎么办?


一种方法是,上面说的,不用form了,直接使用js代码获取用户输入内容,使用js发送Ajax请求。


另外一种方法,仍然使用form,因为我们想利用form的自动检查等等好处

额外通过js代码,指定form提交事件处理函数,进行处理,如下

<!DOCTYPE html>
<html>

<head>
  <style>
    form {
      border : 1px solid gray;
      margin : 30% auto;
      width  : 400px;
    } 
  </style>
  
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
  
  <script>
    window.onload = e => {
    // 指定form提交事件处理函数
    $("#form_reg").submit(function(e) {
      // 阻止后续缺省的form提交行为
      e.preventDefault(); 

      // 获取表单数据,使用js代码发送Ajax请求
      var form = $(this);
      var actionUrl = form.attr('action');

      $.ajax({
          type: "POST",
          url: actionUrl,
          data: form.serialize(), // form数据序列化
          success: function(data){
            alert(data); // 响应数据
          }
      });

      })
    }
  </script>
</head>

<body>
<form action="/register" method="post" id="form_reg">
  <div>
    <input type="text" name="user_name" placeholder="用户名">
  </div>

  <div>
    <input type="email" name="user_email" placeholder="email" >
  </div>
   
  <div>
    <input type="submit">
    <input type="reset">
  </div>
</form>
</body>
</html>

input - text、email、password

最常见的 input 类型 就是 type="text" , text 也是 默认 的type属性

text 表示 这个input 元素 单行文本框 ,是用来输入单行字符串的。

其它的type,比如 email、password 也是单行文本输入


当input 是text、email、password类型时,还有一些其它常用属性,比如:

  • value

    指定了输入框初始文字内容,用户可以输入改变其内容,也可以通过 js 代码修改和获取

    比如


      <input type="text" value="白月黑羽" />
    

  • maxlength

    输入框 最多 可输入字符数。

  • minlength

    输入框 最少 可输入字符数。

    在表单中,提交时,如果数量少于minlength,会有错误提示

  • placeholder

    输入框为空时显示的一个示例值。

  • readonly

    只要有该属性,表示输入框中的内容为只读。

  • size

    一个数字,指示输入框有多少个字符宽度。

比如


<!DOCTYPE html>
<html>
  <head>
    <style>
      form {
        border : 1px solid gray;
        margin : 5% auto;
        width  : 400px;
        height: 200px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
      }
    </style>
  </head>
  
  <body>
  <form action="/register" method="post">
    <div>
      <input type="text" name="user_name" 
      minlength="4"
      maxlength="20" 
      size="20"
      placeholder="用户名">
    </div>

    <div>
      <input type="password" name="user_name" 
      minlength="4"
      maxlength="10" 
      size="10"
      placeholder="密码">
    </div>
  
    <div>
      <input type="email" name="user_email" 
      minlength="8" 
      maxlength="20" 
      size="20"
      placeholder="x@x.com" >
    </div>

    <div>
      <input type="text" name="for_test" 
      readonly
      value="只读测试">
    </div>

    <div>
      <input type="submit">
      <input type="reset">
    </div>
  </form>
  </body>
</html>  

input - number

input 类型为 number ,表示输入的是数字

数字输入框在获取输入焦点或者鼠标移到上方时,会有上下增减数值箭头按钮出现,可以点击 或者 按上下方向键 进行数字的增减


number类型的input,常用属性有:

  • value

    指明输入框的初始值

    比如


      <input type="number" value="100" />
    


  • placeholder

    输入框为空时显示的一个示例值

    比如


      <input type="number" placeholder="请输入年龄" />
    


  • max

    输入框 可输入数字最大值,超过该值时会有错误提示,

    点击增加箭头,不会超过该数值

    比如


      <input type="number" max="10" />
    


  • min

    输入框 可输入数字最小值,小于该值时会有错误提示,

    点击减少箭头,不会小于该数值

    比如


      <input type="number" max="10" min="5"/>
    


  • readonly

    只要有该属性,表示输入框中的内容为只读。


  • step

    一个数字,表示输入框数字的增减单位,

    指示输入框点击上下箭头时,会按这个step为粒度增减。

    当输入的数字不是该值的倍数时,会有错误提示

    比如


      <input type="number" step="2"/>
    

标签 label

我们往往需要给输入元素加上 标签说明,可以使用 label

如下


<div>      
  <label for="name">用户名:</label>
  <input type="text" id="name" 
        name="user_name" placeholder="用户名">
</div>

<br>
<div>
  <label for="email">email :</label>
  <input type="email" id='email' 
        name="user_email" placeholder="email" >
</div>



label的for属性的值和哪个输入元素的id值一致,就是关联哪个元素。

点击label,关联的输入元素就会处于输入焦点状态。

多行文本框 textarea

textarea 是多行文本输入框


<label for="desc">个人信息:</label>

<textarea id="desc" name="desc" rows="5" cols="30">我是...</textarea>



和单行输入框不一样,初始内容是放在元素开、闭标签之间的,而不是作为value属性的值

常用的属性有:

  • rows/cols

rowscols 属性 分别指定 输入框的行数和列数

  • placeholder

placeholder 属性可以指定输入框的提示语


另外 textarea 有 wrap属性,取值为

  • off

    一行文字超过文本框宽度时,不换行, textarea元素出现水平滚动条

    比如


      <textarea rows="5" cols="30" wrap="off"
      >111111111111111111111111222222222222222222</textarea>
    

  • soft

    一行文字超过文本框宽度时,剩余内容 折到下一行显示,但是实际内容并没有换行符,这是缺省值

  • hard

    设置该值时,必须同时指定 cols 属性

    这样,一行文字超过文本框宽度时,浏览器自动插入换行符 (CR+LF),剩余内容 折到下一行显示

    soft 和 hard 的区别,主要是出现在 form 表单中,提交请求时, hard里面会有换行符,而soft并没有换行符

看下面例子

  <form action="/register" method="post">
   
    <textarea name="desc-hard"  rows="6" cols="20" wrap="hard"
    >11111111111111111111111111111111</textarea>

    
    <textarea name="desc-soft"  rows="6" cols="20" wrap="soft"
    >11111111111111111111111111111111</textarea>
     
    <div>
      <input type="submit">
    </div>
  </form>

按钮 button

前面我们已经学过 input 元素 的type属性为 submit 或者 reset 显示为一个按钮

但是那个按钮文字内容都是固定的,中文语言环境下,显示为 提交重置

如果我们要定制按钮上显示的文字该怎么办呢?

可以使用 button 元素

比如,上面的内容可以改为:


<div>
  <button>注册</button>
  <input type="reset">
</div>


button元素有type属性,取值可以是

  • submit

    这是缺省值,所以点击上面的按钮,一样可以提交表单数据到服务端

  • reset

    就像 <input type="reset"> 一样可以重置from里面的其它控件值

  • button

    没有缺省行为,通常点击动作是配合js代码进行处理

单选 input - radio

如果你要让用户在一批选项中只能选择其中一个,适合使用 单选按钮 <input type="radio">

比如


<div>您的性别是
  <div>
    <input type="radio" id="female" name="gender" value="a">
    <label for="female">女</label>
  </div>
  <div>
    <input type="radio" id="male" name="gender" value="b" checked>
    <label for="male">男</label>
  </div>
</div>

注意:一组 radio 的 name 属性必须一致,这样,浏览器才知道哪些 radio是一组的,其中只能选中一个


checked 属性出现,代表该选项初始状态为选中。


label 标签的 for 属性值 关联的是 相同id值 的 radio 元素。


上例中,所属表单提交时,消息体中数据如下

gender=b

就是 : name属性的值=选中的value属性的值

复选 input - checkbox

如果你要让用户在一批选项中可以选择多个,可以使用 复选元素 <input type="checkbox">

比如


<div>选择你要学习的语言
  <div>
    <input type="checkbox" id="Python" name="Python" value='1'>
    <label for="Python">Python</label>
  </div>
  <div>
    <input type="checkbox" id="JavaScript" name="JavaScript" value='2'>
    <label for="JavaScript">JavaScript</label>
  </div>
  <div>
    <input type="checkbox" id="C" name="C" value='3'>
    <label for="C">C</label>
  </div>
  <div>
    <input type="checkbox" id="Java" name="java" value='4' checked>
    <label for="Java">Java</label>
  </div>
</div>

注意:和 radio 不一样, 每个选项 name 属性必须不一致


checked 属性出现,代表该选项初始状态为选中。


label 标签的 for 属性值 关联的是 相同id值 的 radio 元素。


上例中,勾选Python、C、Java 这3项, 提交表单时,消息体中数据如下

Python=1&C=1&java=on

就是 : name属性的值=选中的value属性的值

如果没有value属性,等号右边的值为 on

没有勾选的选项不会出现在消息数据中

选择框 select

选择选项,还可以用专门的选择框元素 select

比如


<div>选择学科
  <select name="subjects" multiple size="10">
    <optgroup label="编程语言">
      <option value="C">C</option>
      <option value="Java" selected>Java</option>
      <option value="Javascript">Javascript</option>
    </optgroup>
    <optgroup label="应用方向">
      <option value="autotest" selected>自动化测试</option>
      <option value="gui">图形界面</option>
      <option value="webdev" disabled>web开发</option>
    </optgroup>
  </select>
</div>


select 元素的 size 属性指定选项框的行数


select 元素的 multiple 属性出现,代表该选择框是多选,所有选项直接呈现在界面上。按Ctrl键点击元素可以多选

如果没有 multiple 属性, 代表该选择框是单选

如果没有 multiple 属性, 也没有 size 属性,点击选择框,所有选项以下拉列表方式呈现,点击选项选中, 选中选项呈现在选择框里,如下所示


<div>选择学科
  <select name="subjects" >
    <optgroup label="编程语言">
      <option value="C">C</option>
      <option value="Java" selected>Java</option>
      <option value="Javascript">Javascript</option>
    </optgroup>
    <optgroup label="应用方向">
      <option value="autotest" selected>自动化测试</option>
      <option value="gui">图形界面</option>
      <option value="webdev" disabled>web开发</option>
    </optgroup>
  </select>
</div>


optgroup 元素作为 select 的子元素,可以把选项分为几个组。

该元素不是必须的。


option 对应一个个的选项

option 元素的 selected 属性出现,表示该项一开始默认是选中状态

option 元素的 disable 属性出现,表示该项当前不可选择


上例中,勾选C、Java、自动化测试、图形界面 这4项, 提交表单时,消息体中数据如下

subjects=C&subjects=Java&subjects=autotest&subjects=gui

就是 : select元素name属性的值=选中的option元素value属性的值

没有选择的选项不会出现在消息数据中