ประเภทอินพุต HTML
บทนี้อธิบายประเภทต่างๆ สำหรับ<input>องค์ประกอบ HTML
ประเภทอินพุต HTML
ต่อไปนี้คือประเภทอินพุตต่างๆ ที่คุณสามารถใช้ได้ใน HTML:
<input type="button"><input type="checkbox"><input type="color"><input type="date"><input type="datetime-local"><input type="email"><input type="file"><input type="hidden"><input type="image"><input type="month"><input type="number"><input type="password"><input type="radio"><input type="range"><input type="reset"><input type="search"><input type="submit"><input type="tel"><input type="text"><input type="time"><input type="url"><input type="week">
เคล็ดลับ:ค่าเริ่มต้นของtypeแอตทริบิวต์คือ "ข้อความ"
ป้อนข้อมูลประเภทข้อความ
<input type="text">กำหนด
ช่องป้อนข้อความบรรทัดเดียว :
ตัวอย่าง
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname"><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname">
</form>
นี่คือลักษณะที่โค้ด HTML ด้านบนจะแสดงในเบราว์เซอร์:
ชื่อจริง:นามสกุล:
ใส่ประเภทรหัสผ่าน
<input type="password">กำหนดฟิลด์รหัสผ่าน :
ตัวอย่าง
<form>
<label for="username">Username:</label><br>
<input type="text"
id="username" name="username"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd">
</form>
นี่คือลักษณะที่โค้ด HTML ด้านบนจะแสดงในเบราว์เซอร์:
ชื่อผู้ใช้:รหัสผ่าน:
อักขระในช่องรหัสผ่านถูกปิดบัง (แสดงเป็นเครื่องหมายดอกจันหรือวงกลม)
ประเภทอินพุต ส่ง
<input type="submit">กำหนดปุ่มสำหรับ
ส่งข้อมูลแบบฟอร์มไปยังตัวจัดการแบบฟอร์ม
ตัวจัดการแบบฟอร์มมักจะเป็นหน้าเซิร์ฟเวอร์ที่มีสคริปต์สำหรับการประมวลผลข้อมูลที่ป้อนเข้า
ตัวจัดการแบบฟอร์มถูกระบุในaction
แอตทริบิวต์ของแบบฟอร์ม:
ตัวอย่าง
<form action="/action_page.php">
<label for="fname">First
name:</label><br>
<input type="text" id="fname" name="fname"
value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
นี่คือลักษณะที่โค้ด HTML ด้านบนจะแสดงในเบราว์เซอร์:
หากคุณละเว้นแอตทริบิวต์ค่าของปุ่มส่ง ปุ่มจะได้รับข้อความเริ่มต้น:
ตัวอย่าง
<form action="/action_page.php">
<label for="fname">First
name:</label><br>
<input type="text" id="fname" name="fname"
value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit">
</form>
ประเภทอินพุต รีเซ็ต
<input type="reset">กำหนดปุ่มรีเซ็ต
ที่จะรีเซ็ตค่าแบบฟอร์มทั้งหมดเป็นค่าเริ่มต้น:
ตัวอย่าง
<form action="/action_page.php">
<label for="fname">First
name:</label><br>
<input type="text" id="fname" name="fname"
value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
<input type="reset">
</form>
นี่คือลักษณะที่โค้ด HTML ด้านบนจะแสดงในเบราว์เซอร์:
หากคุณเปลี่ยนค่าอินพุตแล้วคลิกปุ่ม "รีเซ็ต" ข้อมูลแบบฟอร์มจะถูกรีเซ็ตเป็นค่าเริ่มต้น
ประเภทอินพุต วิทยุ
<input type="radio">กำหนดปุ่มตัวเลือก
ปุ่มตัวเลือกให้ผู้ใช้เลือกได้เพียงตัวเลือกเดียวเท่านั้น:
ตัวอย่าง
<p>Choose your favorite Web language:</p>
<form>
<input type="radio" id="html" name="fav_language"
value="HTML">
<label for="html">HTML</label><br>
<input
type="radio" id="css" name="fav_language" value="CSS">
<label
for="css">CSS</label><br>
<input type="radio" id="javascript"
name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
นี่คือลักษณะที่โค้ด HTML ด้านบนจะแสดงในเบราว์เซอร์:
ช่องทำเครื่องหมายประเภทอินพุต
<input type="checkbox">กำหนด ช่อง ทำเครื่องหมาย
ช่องทำเครื่องหมายให้ผู้ใช้เลือกตัวเลือก ZERO หรือ MORE จากตัวเลือกจำนวนจำกัด
ตัวอย่าง
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input
type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2">
I have a car</label><br>
<input type="checkbox"
id="vehicle3" name="vehicle3"
value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
นี่คือลักษณะที่โค้ด HTML ด้านบนจะแสดงในเบราว์เซอร์:
ปุ่มประเภทอินพุต
<input type="button">กำหนดปุ่ม :
ตัวอย่าง
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
นี่คือลักษณะที่โค้ด HTML ด้านบนจะแสดงในเบราว์เซอร์:
ประเภทอินพุต สี
ใช้<input type="color">สำหรับช่องป้อนข้อมูลที่ควรมีสี
ตัวเลือกสีสามารถปรากฏขึ้นในช่องป้อนข้อมูล ทั้งนี้ขึ้นอยู่กับการรองรับเบราว์เซอร์
ตัวอย่าง
<form>
<label for="favcolor">Select your favorite
color:</label>
<input type="color" id="favcolor" name="favcolor">
</form>
ประเภทอินพุต วันที่
ใช้<input type="date">สำหรับช่องใส่ข้อมูลที่ควรมีวันที่
ตัวเลือกวันที่สามารถปรากฏขึ้นในช่องป้อนข้อมูลทั้งนี้ขึ้นอยู่กับการรองรับเบราว์เซอร์
ตัวอย่าง
<form>
<label for="birthday">Birthday:</label>
<input
type="date" id="birthday" name="birthday">
</form>
คุณยังสามารถใช้ แอตทริบิวต์ minและmaxเพื่อเพิ่มการจำกัดวันที่:
ตัวอย่าง
<form>
<label for="datemax">Enter a date before
1980-01-01:</label>
<input type="date" id="datemax" name="datemax"
max="1979-12-31"><br><br>
<label for="datemin">Enter a date after
2000-01-01:</label>
<input type="date" id="datemin" name="datemin"
min="2000-01-02">
</form>
ประเภทอินพุต Datetime-local
ระบุ ช่อง<input type="datetime-local">ป้อนวันที่และเวลาโดยไม่มีเขตเวลา
ตัวเลือกวันที่สามารถปรากฏขึ้นในช่องป้อนข้อมูลทั้งนี้ขึ้นอยู่กับการรองรับเบราว์เซอร์
ตัวอย่าง
<form>
<label for="birthdaytime">Birthday (date and
time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>
ประเภทการป้อนข้อมูล อีเมล
ใช้<input type="email">สำหรับช่องป้อนข้อมูลที่ควรมีที่อยู่อีเมล
ขึ้นอยู่กับการสนับสนุนเบราว์เซอร์ ที่อยู่อีเมลสามารถตรวจสอบได้โดยอัตโนมัติเมื่อส่ง
สมาร์ทโฟนบางรุ่นรู้จักประเภทอีเมล และเพิ่ม ".com" ลงในแป้นพิมพ์เพื่อให้ตรงกับอินพุตอีเมล
ตัวอย่าง
<form>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
</form>
ไฟล์ประเภทอินพุต
กำหนด ช่อง<input type="file">
เลือกไฟล์และปุ่ม "เรียกดู" สำหรับการอัปโหลดไฟล์
ตัวอย่าง
<form>
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">
</form>
ประเภทอินพุต ซ่อน
กำหนด ช่อง<input type="hidden">
ป้อนข้อมูลที่ซ่อนอยู่ (ไม่ปรากฏให้ผู้ใช้เห็น)
ฟิลด์ที่ซ่อนอยู่ช่วยให้นักพัฒนาเว็บรวมข้อมูลที่ผู้ใช้ไม่สามารถมองเห็นหรือแก้ไขเมื่อส่งแบบฟอร์ม
ฟิลด์ที่ซ่อนอยู่มักจะเก็บบันทึกฐานข้อมูลที่จำเป็นต้องปรับปรุงเมื่อส่งแบบฟอร์ม
หมายเหตุ:แม้ว่าค่าจะไม่แสดงต่อผู้ใช้ในเนื้อหาของหน้า แต่ก็สามารถมองเห็นได้ (และสามารถแก้ไขได้) โดยใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของเบราว์เซอร์หรือฟังก์ชัน "View Source" อย่าใช้อินพุตที่ซ่อนอยู่เป็นรูปแบบของการรักษาความปลอดภัย!
ตัวอย่าง
<form>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input
type="hidden" id="custId" name="custId" value="3487">
<input
type="submit" value="Submit">
</form>
ประเภทอินพุต เดือน
ให้ ผู้<input type="month">ใช้เลือกเดือนและปีได้
ตัวเลือกวันที่สามารถปรากฏขึ้นในช่องป้อนข้อมูลทั้งนี้ขึ้นอยู่กับการรองรับเบราว์เซอร์
ตัวอย่าง
<form>
<label for="bdaymonth">Birthday (month and
year):</label>
<input type="month" id="bdaymonth" name="bdaymonth">
</form>
อินพุตประเภทจำนวน
<input type="number">กำหนดช่องป้อน
ตัวเลข
You can also set restrictions on what numbers are accepted.
The following example displays a numeric input field, where you can enter a value from 1 to 5:
Example
<form>
<label for="quantity">Quantity (between 1 and
5):</label>
<input type="number" id="quantity" name="quantity"
min="1" max="5">
</form>
Input Restrictions
Here is a list of some common input restrictions:
| Attribute | Description |
|---|---|
| checked | Specifies that an input field should be pre-selected when the page loads (for type="checkbox" or type="radio") |
| disabled | Specifies that an input field should be disabled |
| max | Specifies the maximum value for an input field |
| maxlength | Specifies the maximum number of character for an input field |
| min | Specifies the minimum value for an input field |
| pattern | Specifies a regular expression to check the input value against |
| readonly | Specifies that an input field is read only (cannot be changed) |
| required | Specifies that an input field is required (must be filled out) |
| size | Specifies the width (in characters) of an input field |
| step | Specifies the legal number intervals for an input field |
| value | Specifies the default value for an input field |
You will learn more about input restrictions in the next chapter.
The following example displays a numeric input field, where you can enter a value from 0 to 100, in steps of 10. The default value is 30:
Example
<form>
<label for="quantity">Quantity:</label>
<input
type="number" id="quantity" name="quantity" min="0" max="100" step="10"
value="30">
</form>
Input Type Range
The <input type="range"> defines a control for entering a number whose exact value is not important (like a slider control). Default
range is 0 to 100. However, you can set restrictions on what
numbers are accepted with the min, max, and step attributes:
Example
<form>
<label for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
</form>
Input Type Search
The <input type="search"> is used for search fields (a search field behaves like a regular text field).
Example
<form>
<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch">
</form>
Input Type Tel
The <input type="tel"> is used for input fields that should contain a telephone number.
Example
<form>
<label for="phone">Enter your phone number:</label>
<input type="tel" id="phone" name="phone"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
Input Type Time
The <input type="time"> allows the user to select a time (no time zone).
Depending on browser support, a time picker can show up in the input field.
Example
<form>
<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt">
</form>
Input Type Url
The <input type="url"> is used for input fields that should contain a URL address.
Depending on browser support, the url field can be automatically validated when submitted.
Some smartphones recognize the url type, and adds ".com" to the keyboard to match url input.
Example
<form>
<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage">
</form>
Input Type Week
The <input type="week"> allows the user to select a week and year.
Depending on browser support, a date picker can show up in the input field.
Example
<form>
<label for="week">Select a week:</label>
<input type="week" id="week" name="week">
</form>
HTML Exercises
HTML Input Type Attribute
| Tag | Description |
|---|---|
| <input type=""> | Specifies the input type to display |