聯絡表單

在這個範例中要練習聯絡表單的切版

整理幾個小重點如下方：

1.將section設為滿版，添加背景色#f3c1c5
2.添加一個container，做為固定欄寬1200px的區塊，添加text-align: center文字水平置中
3.font-size調整文字大小，font-weight調整文字厚度，line-height調整行高，letter-spacing調整文字間距
4. 欄位預設會顯示黑色的邊框，將它消除需要添加border-width:0 ;
5. 點擊欄位也會跑出黑色的外框，使用outline: none;清除預設的黑框

常見的表單元素

1.文字輸入欄位

例如會員登入的帳號密碼或是線上報名表單的姓名、電話、地址、個人網站之類的資訊

        <div>
            <label for="user_name">帳號：</label>
            <input type="text" id="user_name">
        </div>
        <div>
            <label for="user_name">電話：</label>
            <input type="tel" id="user_name">
        </div>
        <div>
            <label for="user_name">信箱：</label>
            <input type="email" id="user_name">
        </div>
        <div>
            <label for="user_name">個人網站：</label>
            <input type="url" id="user_name">
        </div>

2.密碼輸入欄位

和 text 的差別是，密碼欄位自動隱藏輸入內容，使用者輸入的內容不會顯示在螢幕畫面中

        <div>
            <label for="user_name">密碼：</label>
            <input type="password" id="user_name">
        </div>

3.文字輸入欄位

可輸入多行文字，例如意見反映、想說的話等等

        <div>
            <textarea rows="可以設定輸入欄位的高度或列數"
                      cols="可以設定輸入欄位的寬度或行數">
              輸入欄位中的預設文字內容
            </textarea>
        </div>

4.下拉式選單

下拉式選單，例如生日、年齡或是尺寸大小等等

        <div>
            <label for="user_name">生日：</label>
            <input type="date" id="user_name">
        </div>
        <div>
            <label for="user_name">時間：</label>
            <input type="time" id="user_name">
        </div>
        <div>
            <label for="user_name">年齡：</label>
            <input type="number" id="user_name">
        </div>
        <div>
            <select>
                <option>請選擇衣服尺寸</option>
                <option>尺吋S</option>
                <option>尺吋M</option>
                <option>尺吋L</option>
            </select>
        </div>   

5.單選按鈕

讓使用者可以點選單個選項，通常會搭配多個<input type="radio">並將name 設置相同，這樣form就會自動判斷為一整組

        <div>
            <label for="user_sex">性別：</label>

            <label>
                <input type="radio" name="sex" id="user_sex">
                男
            </label>
            <label>
                <input type="radio" name="sex" id="user_sex">
                女
            </label>
        </div>      

6.核取方塊

製作多個選項表單，讓使用者可以複選，每個選項有各自的name名稱與value值，，例如喜好等等

        <div>
            <label>喜歡吃的東西：</label>
            <label>
                <input type="checkbox" id="food1">
                蔬菜
            </label>
            <label>
                <input type="checkbox" id="food2">
                水果
            </label>
            <label>
                <input type="checkbox" id="food3">
                點心
            </label>
        </div>

想直接看效果可以點擊連結>>>https://codepen.io/ocqyfixe/pen/ExLgvQe

HTML

<section>
    <div class="container">
        <div class="item">
            <span>聯絡我們</span>
            <h2>私訊小白人</h2>
            <form class="label">
                <input class="label_list" type="text" id="name" name="name" value="姓名 Name*">
                <input class="label_list" type="email" id="mail" name="mail" value="電子信箱 E-mail*">
                <textarea name="message" rows="3" cols="50">想說的話</textarea>
                <a href="#"><input class="btn" type="submit" value="SEND MESSAGE"></a>
            </d>
            </form>
        </div>
    </div>
</section>

CSS

section{
    width: 100%;
    background-color: #f3c1c5;
    margin: auto;
}
.container{
    width: 1200px;
    padding: 80px 0;
    margin: auto;
    text-align: center;
}
.container .item span{
    color: #666666;
    font-size: 12px;
}
.container .item h2{
    color: #444444;
    font-size: 32px;
    padding: 10px 0;
}
.label{
  margin: 0 320px;
}
.label .label_list , textarea{
    font-size: 14px;
    width: 550px;
    display: block;
    border-width:0 ;
    color: #f3c1c5;
    padding: 5px 0 30px 5px;
    margin: 20px 0;
    outline: none;
}
.label .btn{
    width: 200px;
    height: 50px;
    background-color: #e6b1b8;
    border-radius: 50px;
    display: block;
    color:#fff;
    border: none;
    outline: none;
    font-size: 14px;
}
.label a{
    text-decoration: none;
}
.label a:hover .btn{
    background-color: #ffffff;
    color:#f3c1c5;
}