การปรับแต่ง Form ด้วย CSS

การปรับแต่ง Form ด้วย CSS

ในบทความนี้ เราจะมาเรียนรู้วิธีการใช้ CSS เพื่อปรับแต่งฟอร์ม (Form) ใน HTML ให้สวยงามและใช้งานง่าย ฟอร์มเป็นส่วนประกอบสำคัญของเว็บไซต์ที่ใช้สำหรับการรับข้อมูลจากผู้ใช้ ดังนั้นการออกแบบฟอร์มให้ดึงดูดและใช้งานง่ายจึงเป็นสิ่งสำคัญ

พื้นฐานเกี่ยวกับ Form ใน HTML

ก่อนที่เราจะไปดูเรื่องการปรับแต่งด้วย CSS เรามาทบทวนพื้นฐานเกี่ยวกับ Form ใน HTML กันก่อน ฟอร์มประกอบไปด้วยแท็ก <form> ซึ่งเป็นคอนเทนเนอร์สำหรับส่วนประกอบต่างๆ ของฟอร์ม เช่น ช่องป้อนข้อมูล (<input>), ป้ายกำกับ (<label>), ปุ่ม (<button>) และอื่นๆ

ตัวอย่างโครงสร้าง HTML ของฟอร์ม:

<form>
  <label for="name">ชื่อ:</label><br>
  <input type="text" id="name" name="name"><br><br>

  <label for="email">อีเมล:</label><br>
  <input type="email" id="email" name="email"><br><br>

  <button type="submit">ส่งข้อมูล</button>
</form>

การจัดวาง Label และ Input

การจัดวาง Label และ Input ให้สวยงามและเป็นระเบียบเป็นสิ่งสำคัญในการออกแบบฟอร์ม เราสามารถใช้ CSS เพื่อควบคุมการจัดวางได้หลายวิธี

1. การจัดวางแบบ Inline

การจัดวางแบบ Inline คือการวาง Label และ Input ไว้ในบรรทัดเดียวกัน โดยปกติแล้ว Input จะเป็น Inline element อยู่แล้ว แต่ Label อาจจะไม่เป็น (ขึ้นอยู่กับ Browser) เราสามารถกำหนดให้ Label เป็น Inline element ได้ด้วย display: inline-block;

ตัวอย่าง CSS:

label {
  display: inline-block;
  width: 80px; /* กำหนดความกว้างของ Label */
  text-align: right; /* จัดข้อความใน Label ให้ชิดขวา */
  margin-right: 10px; /* เพิ่มระยะห่างระหว่าง Label และ Input */
}

ตัวอย่าง HTML (ใช้ร่วมกับ CSS ด้านบน):

<form>
  <label for="name">ชื่อ:</label>
  <input type="text" id="name" name="name"><br><br>

  <label for="email">อีเมล:</label>
  <input type="email" id="email" name="email"><br><br>

  <button type="submit">ส่งข้อมูล</button>
</form>

2. การจัดวางแบบ Block

การจัดวางแบบ Block คือการวาง Label และ Input ไว้คนละบรรทัด โดย Input จะอยู่ใต้ Label วิธีนี้เป็นที่นิยมเพราะอ่านง่ายและจัดวางได้ง่ายกว่า

ตัวอย่าง CSS:

label {
  display: block; /* ทำให้ Label เป็น Block element */
  margin-bottom: 5px; /* เพิ่มระยะห่างระหว่าง Label และ Input */
}

input[type="text"],
input[type="email"] {
  width: 200px; /* กำหนดความกว้างของ Input */
  padding: 5px; /* เพิ่มพื้นที่ภายใน Input */
  border: 1px solid #ccc; /* กำหนดเส้นขอบ */
  border-radius: 4px; /* ทำให้มุมมน */
}

ตัวอย่าง HTML (ใช้ร่วมกับ CSS ด้านบน):

<form>
  <label for="name">ชื่อ:</label>
  <input type="text" id="name" name="name"><br><br>

  <label for="email">อีเมล:</label>
  <input type="email" id="email" name="email"><br><br>

  <button type="submit">ส่งข้อมูล</button>
</form>

การปรับแต่ง Button

ปุ่ม (Button) เป็นส่วนสำคัญของฟอร์ม เราสามารถใช้ CSS เพื่อปรับแต่งรูปลักษณ์ของปุ่มให้สวยงามและสอดคล้องกับธีมของเว็บไซต์

ตัวอย่าง CSS:

button[type="submit"] {
  background-color: #4CAF50; /* สีพื้นหลัง */
  color: white; /* สีตัวอักษร */
  padding: 10px 20px; /* ขนาดของปุ่ม */
  border: none; /* ลบเส้นขอบ */
  border-radius: 4px; /* ทำให้มุมมน */
  cursor: pointer; /* เปลี่ยน Cursor เมื่อ Mouse Over */
}

button[type="submit"]:hover {
  background-color: #3e8e41; /* เปลี่ยนสีพื้นหลังเมื่อ Mouse Over */
}

ตัวอย่าง HTML (ใช้ร่วมกับ CSS ด้านบน):

<form>
  <label for="name">ชื่อ:</label>
  <input type="text" id="name" name="name"><br><br>

  <label for="email">อีเมล:</label>
  <input type="email" id="email" name="email"><br><br>

  <button type="submit">ส่งข้อมูล</button>
</form>

การใช้ Pseudo-classes กับ Form Elements

Pseudo-classes คือตัวเลือก CSS ที่ใช้เลือกองค์ประกอบตามสถานะ (state) ขององค์ประกอบนั้นๆ เราสามารถใช้ Pseudo-classes กับ Form Elements เพื่อปรับแต่งรูปลักษณ์ของฟอร์มตามสถานะต่างๆ เช่น เมื่อ Input ได้รับ Focus หรือ เมื่อ Input ถูก Check

1. :focus

:focus ใช้เลือกองค์ประกอบเมื่อองค์ประกอบนั้นได้รับ Focus (เช่น เมื่อผู้ใช้คลิกที่ Input)

ตัวอย่าง CSS:

input[type="text"]:focus,
input[type="email"]:focus {
  border: 2px solid #555; /* เปลี่ยนสีเส้นขอบเมื่อ Focus */
  outline: none; /* ลบเส้นขอบ Outline ที่ Browser สร้างขึ้น */
}

2. :hover

:hover ใช้เลือกองค์ประกอบเมื่อ Mouse Over องค์ประกอบนั้น

ตัวอย่าง CSS (เราได้ใช้ไปแล้วในส่วนของการปรับแต่ง Button):

button[type="submit"]:hover {
  background-color: #3e8e41; /* เปลี่ยนสีพื้นหลังเมื่อ Mouse Over */
}

3. :checked

:checked ใช้เลือก Input ที่มี type เป็น Checkbox หรือ Radio Button ที่ถูกเลือก

ตัวอย่าง HTML:

<form>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">ชาย</label><br>

  <input type="radio" id="female" name="gender" value="female">
  <label for="female">หญิง</label><br>
</form>

ตัวอย่าง CSS:

input[type="radio"]:checked + label {
  font-weight: bold; /* ทำให้ Label ของ Radio Button ที่ถูกเลือกเป็นตัวหนา */
}

ในตัวอย่างนี้ เราใช้ + (Adjacent sibling combinator) เพื่อเลือก Label ที่อยู่ติดกับ Radio Button ที่ถูกเลือก

สรุป

ในบทความนี้ เราได้เรียนรู้วิธีการใช้ CSS เพื่อปรับแต่ง Form ใน HTML ให้สวยงามและใช้งานง่าย เราได้เรียนรู้เกี่ยวกับการจัดวาง Label และ Input, การปรับแต่ง Button และการใช้ Pseudo-classes กับ Form Elements การปรับแต่งฟอร์มให้สวยงามและใช้งานง่ายเป็นสิ่งสำคัญในการสร้างประสบการณ์ที่ดีให้กับผู้ใช้บนเว็บไซต์ของคุณ

ในบทความถัดไป เราจะมาเรียนรู้วิธีการสร้าง Tooltip ด้วย CSS