跳到主要内容

其他控件

button 标签​

作用​

  • 添加一个按钮；
<li class="button">
  <button type="submit">Send your message</button>
</li>

button 和 input 的等效替换​

  • 两者使用相同属性，行为无任何差异；
  • 但 button 标签可嵌套其他标签；
  • input 标签为空标签，只能通过 value 属性值接受普通文本；
  • 建议使用 button，css 支持较好；
<!-- submit -->
<button type="submit">This is a <strong>submit button</strong></button>
<input type="submit" value="This is a submit button" />
<!-- reset -->
<button type="reset">This is a <strong>reset button</strong></button>
<input type="reset" value="This is a reset button" />
<!-- anonymous -->
<button type="button">This is an <strong>anonymous button</strong></button>
<input type="button" value="This is an anonymous button" />

下拉控件​

select 标签​

示意图​

  • 创建下拉列表控件；
  • 与 option 标签连用；

属性​

multiple​
  • 布尔属性；
  • 表示可同时选中多个选项；
  • 通常与 size 属性连用；
size​
  • 正整数；
  • 表示一次性显示的选项数量；

datalist 标签​

  • 自动完成框控件；
  • 自动为 input 标签填充可选择的预定内容；
  • 与 input 标签连用；
    • datalist 标签必须使用 id 属性；
    • input 标签必须使用 list 属性；
      • 其属性值为 datalist 标签 id 属性值；
  • 与 option 标签连用；

option 标签​

作用​

  • 设置 select 和 datalist 标签中的可选项；
  • 嵌套于 select 和 datalist 标签中；
<select name="pets" id="pet-select">
  <option value="">--Please choose an option--</option>
  <option value="dog">Dog</option>
  <option value="cat">Cat</option>
  <option value="hamster">Hamster</option>
</select>

属性​

value​
  • 作为 option 标签选中时；
  • 发送到服务器的值；
  • 若未指定属性值；
  • 默认值为 option 包裹的文本；
selected​
  • 布尔属性；
  • 默认选中选项；

optgroup 标签​

作用​

  • 组合相同类型的 option 标签；
<select id="groups" name="groups">
  <optgroup label="fruits">
    <option>Banana</option>
    <option selected>Cherry</option>
    <option>Lemon</option>
  </optgroup>
  <optgroup label="vegetables">
    <option>Carrot</option>
    <option>Eggplant</option>
    <option>Potato</option>
  </optgroup>
</select>

属性​

label​
  • 设置说明文字；

progress 标签​

示意图​

  • 进度条控件；

属性​

max​
  • 进度条最大值；
  • 大于 0 的浮点型；
  • 默认值为 1；
value​
  • 进度条起始值；
  • 0 - max 之间的浮点数；
  • 若不设置 value；
  • 进度条乱蹦；

meter 标签​

示意图​
  • 仪表条控件；

at 50/100

机制​
  • optimum 所在区间显示绿色；
  • 根据距离 optimum 所在区间的区间数；
  • 依次显示为黄色，红色；

属性值​

value​
  • 当前默认值，默认为 0；
  • 若超出范围，为最近的 min/max；
min​
  • 最小值，默认为 0；
max​
  • 最大值，默认为 1；
low​
  • low 区间分隔符；
high​
  • high 区间分隔符；
optimum​
  • 表示理想数值所在区间；
    • min-low；
    • low-high；
    • high-max；