จัดสไตล์ช่องกรอกฟอร์ม (Input Fields) ด้วย CSS

เพื่อจัดสไตล์ช่องกรอกของฟอร์ม ให้ใช้ CSS selector สำหรับ <input>

ตัวอย่างโค้ด

<!DOCTYPE html>
<html>
<head>
  <style>
    input {
      width: 100%;
    }
  </style>
</head>
<body>
  <p>กรอกฟอร์มด้านล่าง:</p>
  <form>
    <label for="subject">Subject</label>
    <input type="text" id="subject" name="sub">
    <label for="student">Student</label>
    <input type="text" id="student" name="stu">
  </form>
</body>
</html>

คำอธิบาย: ตัวอย่างนี้แสดงการจัดสไตล์พื้นฐานคือ width: 100% ทำให้ช่องกรอกกว้างเต็ม container ในการใช้งานจริงควรเพิ่ม padding, margin, border, box-sizing: border-box เพื่อให้ใช้งานง่ายและสวยงาม