跳到主要内容

其他控件

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 标签连用;

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>

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>

progress 标签​

  • 进度条控件;

meter 标签​

  • 仪表条控件;
  • optimum 所在区间显示绿色;
  • 根据距离 optimum 所在区间的区间数;
  • 依次显示为黄色, 红色;

at 50/100