day9 表單和表格的補充

1. 表單的補充

(1) 單選框

<input type='radio'> 單選內容

• type爲radio, 表明單選框
• 當name屬性值同樣時， 能夠互斥
• 綁定信息 lable標籤， 點擊字的時候, 也能選擇到圈

<label for="woman"> for屬性指向id名
    <input type="radio" name="sex" id="woman">女 
</label>

• 默認選擇： checked (至關於 checked='checked')
• 禁止選擇： disabled

(2) 多選框

<input type='checkbox'> 多選內容

• type爲checkbox, 表明多選框

(3) 下拉列表

<select>
    <option>下拉內容</option>
</select>

• 默認選擇： selected

(4) 多行文本域

<textarea></textarea>

• 禁止縮放

  textarea{
      resize:none;
  }

(5) 文件上傳

<input type='file'>

(6) 表單字段集

<fieldset>
    <legend>字段集標題</legend>
    表單元素
</fieldset>

2. 表格的補充

(1) 表格標題 caption

(2) 表格列標題 th

(3) 表格行分組 thead tbody tfoot

<thead></thead> 表頭  通常只有一組

<tbody></tbody> 表體 能夠有多組

<tfoot></tfoot> 表尾 通常只有一組

(4) 加在table身上的屬性

• border-spacing: 數值+px

  • 邊框之間的間距

• border-collapse: collapse

  • 合併邊框線，變成細線邊框

• table-layout: auto(自動)/fixed(固定)

  • 設置固定後，不讓表格根據內容去撐大寬度，因此有利於瀏覽器加快運行速度