ทำการเพิ่ม form ลงใน html

        <form class="my-form">
                <div class="form-group">
                        <label>Name: </label>
                        <input type="text" name="name">
                    </div>
                    <div class="form-group">
                        <label>Email: </label>
                        <input type="text" name="email">
                    </div>
                    <div class="form-group">
                        <label>Message: </label>
                        <textarea name="message"></textarea>
                    </div>
                    <input class="button" type="submit" value="submit" name="">
        </form>

ทำการกำหนด style ให้กับ class my-form

.my-form {
    padding: 20px;
}

กำหนดระยะห่างระหว่าง form-group แต่ละอัน

.my-form .form-group {
    padding-bottom:15px;
}

label และ input เรียงกันอยู่ในแนวนอน ไม่เหมาะกับการแสดงผลในจอเล็กๆ ดังนั้นควรเปลี่ยนเป็นแนวตั้งแทน

.my-form label {
    display: block;
}

ยืด input แต่ละตัวให้เต็มพื้นที่

.my-form input {
    padding: 8px;
    width: 100%;
}

จะพบว่า input ทุกตัวถูกยืดหมด ยกเว้น text area ( เนื่องจากมันไม่ใช่ tag input ) ถ้าต้องการระบุเฉพาะเจาะจง input ประเภทที่ต้อง สามารถใส่ attribute ให้กับ selector ได้

.my-form input[type="text"] {
    padding: 8px;
    width: 100%;
}

และยังสามารถกำหนดให้ selector หลายๆตัวใช้ style ร่วมกันได้ด้วย โดยการใช้เครื่องหมาย ',' คั่น

.my-form input[type="text"], .my-form textarea {
    padding: 8px;
    width: 100%;
}

แต่วิธีการนี้ไม่นิยมใช้ เนื่องจากอ่านยาก ไม่สื่อความหมาย ควรสร้างเป็น class มากกว่า

ต่อมากำหนด Style ให้กับปุ่ม submit

.my-form input[type="submit"] {
    background-color: #333;
    color:#fff;
    padding: 10px, 15px;
    border: none;
    font-size: 1em;
}