HTML CSS (8) - 表格及表單

• Table

<table>
    <tr>
     <th>2017/12/01</th>
    <th>クリスマス＆大みそか原作スペシャル」で 1996年送の人気エピソードをリメイク!</th>
    </tr>
    <tr>
     <td>2017/11/22</td>
     <td>公式YouTube「ちびまる子ちゃんねる」開設記念！【ちびまる子ちゃん×まる</td>
    </tr>
    <tr>
     <td>2017/11/22</td>
     <td>相鉄ローゼンの年賀状印刷にて「ちびまる子ちゃん」デザインが注文できます！</td>
    </tr>
</table>

結果如下

• tr是row
• td是column
• th有標題效果

• Table CSS效果
• 將table加入class="list"
• 至css內新增border

.list th, .list td {
 border: solid 1px black;
}

結果：

• 為避免格子中間有間隔，可以使用css reset語法border-collapse: collapse;border-spacing: 0;將其去除

• 其他還可以針對裡面的td, th做設計

.list th, .list td {
 border-top: solid 1px black; // 只留上下線條
 border-bottom: solid 1px black;
}
.list th{
 padding:10px; // th 表格內間距10px
 background: pink; // 背景粉紅
 color: white; // 字體顏色白色
}
.list td{
 padding: 10px; // td 表格內間距10px
}

• 注意，table內可加入class名稱以便修改裡面的th/td
• 可加入css reset清除預設樣式

• 表單！！！
• 表單三劍客
1. Form
2. 填寫欄位
3. submit

HTML

<form action="index.html"> // form傳送後的位置
    <input type="text" name="email"> // input
    <input type="text" name="person">
    <input type="submit" value="next"> // submit
</form>

• 增加提示訊息及Label
• 在label內 for有foucus哪個元件的效果，記住裡面必須輸入該元件的id
• 可在text欄位內輸入placeholder新增提示訊息

<form action="index.html">
    <label for="mail">email:</label>
    <input id="mail" type="text" placeholder="Please input email" name="email">
    <label for="tel">phone:</label>
    <input id="tel" type="text" placeholder="Please input phone" name="person">
    <input type="submit" value="next">
</form>

• Radio check box
• 單選使用<input type="radio"，一組的需要注意name要一致
• 多選使用<input type="checkbox"，一組的需要注意name要一致
• 可以注意submit後的結果

   <form action="index.html">
     <h2>性別</h2>
     <input type="radio" name="sex" value="male">男性
     <input type="radio" name="sex" value="female">女性
     <h2>興趣</h2>
     <input type="checkbox" name="habbit" value="movie">movie
     <input type="checkbox" name="habbit" value="shopping">shopping
     <input type="checkbox" name="habbit" value="game">xBox

                <input type="submit">
   </form>

• 下拉式選單及textarea
• 下拉式選單需新增選項<option value="，注意value為傳到後端的值
• textarea內的cols, rows可以把它想成長寬

    <form method="POST" action="index.html"> // POST可以讓送出的值隱藏
        <label for="birth">出生年</label>
        <select name="birth" id="birth">
            <option value="1900">1900</option>
            <option value="1989">1989</option>
            <option value="1997">1997</option>
        </select>
        <h2>內容：</h2>
        <textarea name="content" id="" cols="30" rows="10"></textarea>

        <br> // 空行
        <input type="submit">
    </form>

• CSS3語法
• css3圓弧效果
• border-radius: 上下左右
• 漸層效果
• linear-gradient:上->下
• 陰影
• box-shadow: 10px 10px 10px pink;(x軸，y軸，柔焦，顏色)
• 可使用瀏覽器市佔率

完成作品

• 總共分四塊
• 使用tr td
• 使用pure.css Colored buttons with rounded corners
• 參考網頁

https://codepen.io/chuchu1313/pen/KZwwGY