# ความรู้เบื้องต้นเกี่ยวกับ Attributes ใน HTML Input Form
HTML Input Form เป็นส่วนสำคัญในการเก็บข้อมูลจากผู้ใช้งานบนเว็บไซต์ โดยสามารถใช้ Attributes ต่างๆ เพื่อควบคุมพฤติกรรมและการแสดงผลของ Input Form ให้เหมาะสมกับความต้องการของเรา ในบทความนี้เราจะมาทำความรู้จักกับ Attributes ที่สำคัญ ๆ ของ HTML Input Form กัน
## 1. type
Attribute `type` ใช้กำหนดประเภทของ Input เช่น `text`, `password`, `email`, `number`, เป็นต้น ซึ่งแต่ละประเภทจะมีลักษณะการแสดงผลที่แตกต่างกัน เช่น
```html
<input type="text" name="username" placeholder="Username">
<input type="password" name="password" placeholder="Password">
<input type="email" name="email" placeholder="Email">
```
## 2. name
Attribute `name` ใช้ระบุชื่อของ Input ซึ่งเป็นสิ่งสำคัญเมื่อเราเก็บข้อมูลจากฟอร์ม เพราะข้อมูลทั้งหมดจะถูกส่งไปยังเซิร์ฟเวอร์ตามชื่อที่กำหนด
```html
<input type="text" name="fullname" placeholder="Full Name">
```
## 3. value
Attribute `value` ใช้กำหนดค่าที่จะถูกส่งออกไปทางเซิร์ฟเวอร์เมื่อฟอร์มถูกส่ง หรือใช้กำหนดค่าที่แสดงอยู่ใน Input
```html
<input type="text" name="username" value="JohnDoe">
```
## 4. placeholder
Attribute `placeholder` เป็นข้อความที่แสดงใน Input เมื่อไม่มีข้อมูลอยู่ ซึ่งใช้เพื่อแนะนำผู้ใช้เกี่ยวกับข้อมูลที่ควรกรอก
```html
<input type="text" name="search" placeholder="Search...">
```
## 5. required
Attribute `required` ใช้กำหนดว่า Input นั้นต้องกรอกก่อนส่งฟอร์ม ซึ่งทำให้การตรวจสอบข้อมูลทำได้ง่ายขึ้น
```html
<input type="text" name="email" placeholder="Email" required>
```
## 6. maxlength
Attribute `maxlength` ใช้กำหนดความยาวสูงสุดของข้อมูลที่ผู้ใช้สามารถกรอกได้
```html
<input type="text" name="username" maxlength="15" placeholder="Username (Max 15 chars)">
```
## 7. pattern
Attribute `pattern` ใช้กำหนดรูปแบบของข้อมูลที่ผู้ใช้ต้องกรอก โดยใช้ Regular Expression
```html
<input type="text" name="zipcode" pattern="\d{5}" placeholder="ZIP Code (5 digits)">
```
## 8. autocomplete
Attribute `autocomplete` ใช้เพื่อกำหนดว่าฟิลด์นั้นควรจะใช้ฟังก์ชันเติมข้อมูลอัตโนมัติหรือไม่
```html
<input type="text" name="email" autocomplete="on">
```
## 9. disabled
Attribute `disabled` ใช้เพื่อทำให้ Input ไม่สามารถทำงานได้ในขณะนั้น ซึ่งหมายความว่าผู้ใช้ไม่สามารถกรอกข้อมูลในฟิลด์นั้นได้
```html
<input type="text" name="temporary" value="Not editable" disabled>
```
## สรุป
Attributes ใน HTML Input Form ช่วยให้เราสามารถปรับแต่งและควบคุม Input Forms ได้อย่างมีประสิทธิภาพ โดยการเลือกใช้ Attributes ที่เหมาะสม จะช่วยปรับปรุงประสบการณ์การใช้งานและลดข้อผิดพลาดในการกรอกข้อมูลจากผู้ใช้ได้มากขึ้น การรู้จักและเข้าใจแต่ละ Attribute จะทำให้เราสามารถสร้างฟอร์มที่ดีและมีประสิทธิภาพสำหรับผู้ใช้งานได้อย่างง่ายดาย