表格表單

一、表格

1、基本結構

<table>
    <caption></caption>
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td></td>
        </tr>
    </tfoot>
</table>

2、常用屬性

table
-- border: <integer>：表格外框及單元格外框
-- cellpadding: <integer>：單元格的內邊距
-- cellspacing: <integer>：單元格之間的間距，最小為0
-- rules：rows、cols、groups、all：邊框規則

td
-- rowspan: <integer>：行合併(該單元格占多行)
-- colspan: <integer>：列合併(該單元格占多列)
-- width: : <integer>%：列寬占比

caption
-- align: left | right | top | bottom：標題方位

3、垂直水平居中

.sup {
    width: 200px;
    height: 200px;
    display: table-cell;
    vertical-align: middle;
}
.sub {
    width: 100px;
    height: 100px;
    margin: 0 auto;
}

二、表單

1、基本結構

<form>
    <label>輸入框</label><input type="text" /> 
    <button type="submit">提交</button>
</form>

2、input常用類型

text、password、hidden、radio、checkbox、reset、submit

3、常用類型標簽

• 文本框

<input type="text" name="username" placeholder="請輸入用戶名" size="10" maxlength="15">

• 密文框

<input type="password" name="pwd" placeholder="請輸入密碼" maxlength="12">

• 單選框

<input type="radio" name="sex" value="male" checked>男
<input type="radio" name="sex" value="female">女

• 覆選框

<input type="checkbox" name="hobby" value="basketball"> 籃球
<input type="checkbox" name="hobby" value="football"> 足球
<input type="checkbox" name="hobby" value="ping-pong" checked> 乒乓球 
<input type="checkbox" name="hobby" value="baseball"> 棒球

• 下拉選項

<select name="major">
    <option value="computer">電腦</option>
    <option value="archaeology">考古學</option>
    <option value="medicine" selected>醫學</option>
    <option value="Architecture">建築學</option>
    <option value="Biology">生物學</option>
</select>

<!--多選-->
<select name="major" multiple>
    <option value="computer">電腦</option>
    <option value="archaeology">考古學</option>
    <option value="medicine">醫學</option>
    <option value="Architecture">建築學</option>
    <option value="Biology">生物學</option>
</select>

• 多行文本輸入

<textarea name="content"></textarea>
<textarea name="content" cols="30" rows="10"></textarea>

• 按鈕

<!--提交按鈕-->
<input type="submit" value="提交">
<button>提交</button>
<button type="submit">提交</button>

<!--重置按鈕-->
<input type="reset" value="重置">
<button type="reset">重置</button>

<!--普通按鈕-->
<input type="button" value="按鈕">
<button type="button">按鈕</button>

4、全局屬性

• required：必填項
• pattern：正則

5、偽類

• focus：獲得焦點