ในบทนี้จะพูดถึงชนิดของ HTML Input ที่ใน Form ซึ่ง Element <input> นั้นมีมากมายหลากหลายแบบให้เลือกใช้
ชนิดของ HTML Input
Element <input> นั้นมีให้เลือกใช้เยอะแยะมากมาย เรามาดูกันว่ามีอะไรบ้าง
- <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”>
Tip: ค่าเริ่มต้น type ของ Input คือ “text”
Input Type Text
<input type=”text”> ใช้เพื่อกำหนดการป้อนข้อความบรรทัดเดียว (Single-line Text Input Field)
<!DOCTYPE html>
<html>
<body>
<h2>Text field</h2>
<p><strong>input type="text"</strong> กำหนดการป้อนข้อความบรรทัดเดียว</p>
<form action="action_page.php">
<label for="fname">ชื่อ:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">นามสกุล:</label><br>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
<p>หมายเหตุ: จำนวนตัวอักษรที่ใส่ สามารถใส่ได้ไม่เกิน 20 ตัวอักษร</p>
</body>
</html>Input Type Password
<input type=”password”> ใช้เพื่อใส่ข้อมูลที่เป็นรหัสผ่าน (Password Field)
<!DOCTYPE html>
<html>
<body>
<h2>Password field</h2>
<p><strong>input type="password"</strong> ใช้เพื่อใส่ข้อมูลที่เป็นรหัสผ่าน</p>
<form action="action_page.php">
<label for="username">ชื่อผู้ใช้:</label><br>
<input type="text" id="username" name="username"><br>
<label for="pwd">รหัสผ่าน:</label><br>
<input type="password" id="pwd" name="pwd"><br><br>
<input type="submit" value="Submit">
</form>
<p>ตัวอักษรที่ใส่ในช่องรหัสผ่านจะถูกทำให้มองไม่เห็นข้อความหรือตัวอักษรที่กรอกลงไป</p>
<p>โดยข้อความจะถูกแสดงเป็นวงกลม</p>
</body>
</html>Input Type Submit
<input type=”submit”> เป็นปุ่มเพื่อใช้ยืนยันการส่งข้อมูลของแบบฟอร์ม (Form-handler)
Form-handler เป็นหน้าเพจของ Server ที่มีสคริปต์สำหรับประมวลผลข้อมูลที่นำเข้า (Input Data)
Form-handler จะถูกระบุไว้ใน Attribute การดำเนินการของฟอร์ม
<!DOCTYPE html>
<html>
<body>
<h2>Submit Button</h2>
<p><strong>input type="submit"</strong> เป็นปุ่มเพื่อใช้ยืนยันการส่งข้อมูลของแบบฟอร์ม (form-handler)</p>
<form action="action_page.php">
<label for="fname">ชื่อ:</label><br>
<input type="text" id="fname" name="fname" value="เด่น"><br>
<label for="lname">นามสกุล:</label><br>
<input type="text" id="lname" name="lname" value="ดี"><br><br>
<input type="submit" value="Submit">
</form>
<p>เมื่อคลิกที่ปุ่ม "Submit"</p>
<p>ข้อมูลของแบบฟอร์จะถูกส่งไปที่ "action_page.php"</p>
</body>
</html>แต่ถ้าในกรณีที่ไม่ใส่ค่า Value ของปุ่ม Submit ข้อความที่แสดงบนปุ่มจะเป็นคำว่า “Submit”
<!DOCTYPE html>
<html>
<body>
<form action="action_page.php">
<label for="fname">ชื่อ:</label><br>
<input type="text" id="fname" name="fname" value="เด่น"><br>
<label for="lname">นามสกุล:</label><br>
<input type="text" id="lname" name="lname" value="ดี"><br><br>
<input type="submit">
</form>
</body>
</html>Input Type Reset
<input type=”reset”> เป็นปุ่มรีเซ็ตข้อมูลที่กรอกลงในฟอร์มให้กลับไปเป็นค่าเริ่มต้นที่กำหนดไว้
จากตัวอย่างด้านล่างนี้ ค่าเริ่มต้นของชื่อและนามสกุลในโค้ด HTML คือ ชื่อ: John นามสกุล: Doe
เมื่อเรากรอกข้อมูล ชื่อ: Mary นามสกุล: Jane ลงไป ดังภาพ
<!DOCTYPE html>
<html>
<body>
<h2>Reset Button</h2>
<p><strong>input type="reset"</strong> เป็นปุ่มรีเซ็ตข้อมูลที่กรอกลงในฟอร์มให้กลับไปเป็นค่าเริ่มต้นที่กำหนดไว้</p>
<form action="action_page.php">
<label for="fname">ชื่อ:</label><br>
<input type="text" id="fname" name="fname" value="เด่น"><br>
<label for="lname">นามสกุล:</label><br>
<input type="text" id="lname" name="lname" value="ดี"><br><br>
<input type="submit" value="Submit">
<input type="reset">
</form>
<p>ถ้าคลิกที่ปุ่ม Reset ค่าที่กรอกไปไว้จะกลับไปเป็นค่าเริ่มต้นตามที่ตั้งไว้</p>
</body>
</html>Input Type Radio
<input type=”radio”> ใช้ในกรณีที่ต้องการสร้างแบบฟอร์มแบบตัวเลือก (Radio Button) ซึ่งจะเลือกได้เพียงอันเดียวหรือข้อเดียวเท่านั้น
<!DOCTYPE html>
<html>
<body>
<h2>Radio Buttons</h2>
<p><strong>input type="radio"</strong> ใช้ในกรณีที่ต้องการสร้างแบบฟอร์มแบบตัวเลือก (Radio Button)</p>
<p>เลือกภาษาที่ใช้พัฒนาเว็บที่ชอบที่สุด:</p>
<form action="action_page.php">
<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><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>Input Type Checkbox
<input type=”checkbox”> ใช้ในกรณีที่มีตัวเลือกที่สามารถเลือกได้มากกว่า 1 (Checkbox)
<!DOCTYPE html>
<html>
<body>
<h2>Checkboxes</h2>
<p>The <strong>input type="checkbox"</strong> ใช้ในกรณีที่มีตัวเลือกที่สามารถเลือกได้มากกว่า 1 (Checkbox)</p>
<form action="action_page.php">
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> ฉันมีจักรยาน</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> ฉันมีรถ</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> ฉันมีเรือ</label><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>Input Type Button
<input type=”button”> ใช้กับปุ่ม
<!DOCTYPE html>
<html>
<body>
<h2>Input Button</h2>
<input type="button" onclick="alert('สวัสดี!')" value="คลิกที่นี่!">
</body>
</html>เมื่อคลิกที่ปุ่ม “คลิกที่นี่” ระบบจะแสดงข้อความขึ้นมา ดังภาพ
Input Type Color
<input type=”color”> ใช้ในกรณีที่ต้องการให้ข้อมูลที่ใส่ลงไปมีสี
แต่ทั้งนี้ก็ขึ้นอยู่กับเบราว์เซอร์ว่าจะรองรับการแสดงสีในช่องป้อนข้อมูลได้หรือไม่
<!DOCTYPE html>
<html>
<body>
<h2>แสดงสีที่เลือก</h2>
<p><strong>input type="color"</strong> ใช้ในกรณีที่ต้องการให้ข้อมูลที่ใส่ลงไปมีสี</p>
<form action="action_page.php">
<label for="favcolor">เลือกสีที่ชอบ:</label>
<input type="color" id="favcolor" name="favcolor" value="#ff0000">
<input type="submit" value="Submit">
</form>
<p><b>หมายเหตุ:</b> type="color" ไม่รองรับการใช้งานบน Internet Explorer 11 หรือ Safari 9.1 ลงไป</p>
</body>
</html>เมื่อคลิกที่ปุ่มสี จะสามารถเลือกสีได้ ดังภาพ
แต่ทั้งนี้ก็ขึ้นอยู่กับเบราว์เซอร์ว่าจะรองรับการแสดงสีในช่องป้อนข้อมูลได้หรือไม่
Input Type Date
<input type=”date”> ใช้ใส่ข้อมูลที่เป็นวันที่
แต่ทั้งนี้ก็ขึ้นอยู่กับเบราว์เซอร์ว่าจะรองรับการแสดงสีในช่องป้อนข้อมูลได้หรือไม่
<!DOCTYPE html>
<html>
<body>
<h2>ข้อมูลประเภทวันที่</h2>
<p><strong>input type="date"</strong> ใช้ใส่ข้อมูลประเภทวันที่</p>
<form action="action_page.php">
<label for="birthday">วันเกิดของคุณคือ:</label>
<input type="date" id="birthday" name="birthday">
<input type="submit" value="Submit">
</form>
<p><strong>หมายเหตุ:</strong> type="date" ไม่รองรับการใช้งานบน Internet Explorer 11 หรือ Safari 14.1 ลงไป</p>
</body>
</html>โดยให้กรอกวันที่ใส่ลงไป ดังตัวอย่าง
ในกรณีที่ต้องการกำหนดวันเริ่มต้นและวันสูงสุด สามารถใช้ Attribute min และ max ได้
<!DOCTYPE html>
<html>
<body>
<h2>กำหนดวันใน Date Field</h2>
<p>ใช้ Attribute min และ max เพื่อกำหนดวัน</p>
<form action="action_page.php">
<label for="datemin">ใส่วันหลังจากวันที่ 2000-01-01 เป็นต้นไป:</label>
<input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>
<label for="datemax">ใส่วันที่ก่อนวัน 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
<input type="submit" value="Submit">
</form>
<p><strong>หมายเหตุ:</strong> type="date" ไม่รองรับการใช้งานบน Internet Explorer 11 หรือ Safari 14.1 ลงไป</p>
</body>
</html>Input Type Datetime-local
<input type=”datetime-local”> ใช้ระบุวันและเวลา โดยไม่ใช้เขตเวลา
แต่ทั้งนี้ก็ขึ้นอยู่กับเบราว์เซอร์ว่าจะรองรับการแสดงสีในช่องป้อนข้อมูลได้หรือไม่
<!DOCTYPE html>
<html>
<body>
<h2>Local Date Field</h2>
<p><strong>input type="datetime-local"</strong> ใช้ระบุวันและเวลา โดยไม่ใช้เขตเวลา</p>
<form action="action_page.php">
<label for="birthdaytime">วันเกิด (วันและเวลา):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
<input type="submit" value="Submit">
</form>
<p><strong>หมายเหตุ:</strong> type="datetime-local" ไม่รองรับการใช้งานบน Internet Explorer 11 หรือ Safari 14.1 ลงไป</p>
</body>
</body>
</html>เมื่อคลิกที่ช่องกรอกวันที่ จะมีให้กรอกวันที่ และเวลา ดังภาพ
Input Type Email
<input type=”email”> ใช้สำหรับกรอกข้อมูลที่เป็นอีเมล
แต่ทั้งนี้ก็ขึ้นอยู่กับเบราว์เซอร์ว่าจะรองรับการแสดงสีในช่องป้อนข้อมูลได้หรือไม่
มือถือบางรุ่นจะรู้ว่าข้อมูลที่กรอกเป็นอีเมล โดยจะมีการเพิ่ม “.com” ลงบนแป้นพิมพ์
<!DOCTYPE html>
<html>
<body>
<h2>Email Field</h2>
<p><strong>input type="email"</strong> ใช้สำหรับกรอกข้อมูลที่เป็นอีเมล</p>
<form action="action_page.php">
<label for="email">ใส่อีเมลของคุณ:</label>
<input type="email" id="email" name="email">
<input type="submit" value="Submit">
</form>
</body>
</html>Input Type Image
<input type=”image”> ใช้สำหรับสร้างปุ่มที่เป็นรูปภาพ
โดยมีการระบุลิงค์ปลายทางใน Attribute src
<!DOCTYPE html>
<html>
<body>
<h2>ทำให้ปุ่มกดเป็นรูปภาพ</h2>
<form action="action_page.php">
<label for="fname">ชื่อ: </label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">นามสกุล: </label>
<input type="text" id="lname" name="lname"><br><br>
<input type="image" src="images/img_submit.png" alt="Submit" width="48" height="48">
</form>
<p><b>หมายเหตุ:</b> input type="image" จะต้องส่งพิกัดพื้นที่ที่จะคลิก X กับ Y ของปุ่มที่เป็นรูปภาพ</p>
</body>
</html>Input Type File
<input type=”file”> ใช้ในสร้างปุ่มเพื่อต้องการใช้อัปโหลดไฟล์
<!DOCTYPE html>
<html>
<body>
<h1>File upload</h1>
<p>สร้างปุ่มเพื่อต้องการใช้อัปโหลดไฟล์</p>
<form action="action_page.php">
<label for="myfile">เลือกไฟล์ที่ต้องการ:</label>
<input type="file" id="myfile" name="myfile"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>เมื่อคลิกที่ปุ่ม Choose File ระบบจะแสดงกล่องข้อความขึ้นมาเพื่อให้เลือกไฟล์ที่จะอัปโหลด
Input Type Hidden
<input type=”hidden”> จะเป็นกำหนดให้มองไม่เห็นข้อความ (ผู้ใช้จะไม่สามารถมองเห็นข้อความได้)
ฟิลด์หรือข้อความที่ซ่อนไว้จะมีไว้สำหรับผู้พัฒนาในการเก็บรวบรวมข้อมูล ซึ่งผู้ใช้หรือผู้กรอกข้อมูลจะมองไม่เห็นหรือแก้ไขได้เมื่อกดส่งแบบฟอร์มไปแล้ว ซึ่งฟิลด์ที่ซ่อนมักจะเก็บฐานข้อมูลที่จำเป็นต้องอัปเดตเมือมีการส่งแบบฟอร์ม
หมายเหตุ: แม้ว่าข้อมูลนั้นจะไม่แสดงให้เห็นต่อหน้าผู้ใช้ แต่นักพัฒนาจะสามารถมองเห็นและแก้ไขได้ผ่านเครื่องมือของเบราว์เซอร์ หรือฟังก์ชัน “View Source” และอย่าใช้ Hidden Inputs กับการรักษาความปลอดภัยของฟอร์ม
<!DOCTYPE html>
<html>
<body>
<h1>Hidden Field (ดูตัวอย่างในโค้ด)</h1>
<form action="action_page.php">
<label for="fname">ชื่อ:</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>
<p><strong>หมายเหตุ:</strong> ฟิลด์ที่ซ่อนไว้ หรือ hidden field ผู้ใช้จะมองไม่เห็นแต่ข้อมูลจะถูกส่งไปเมื่อมีการกดปุ่ม "Submit"</p>
</body>
</html>Input Type Month
<input type=”month”> ใช้สำหรับใส่ข้อมูลประเภทเดือนและปี
แต่การจะใช้ก็ขึ้นอยู่กับว่าเบราว์เซอร์ที่ใช้งานอยู่นั้นจะรองรับหรือไม่ โดยจะแสดงปฏิทินให้เลือก
<!DOCTYPE html>
<html>
<body>
<h2>Month Field</h2>
<p><strong>input type="month"</strong> ใช้สำหรับใส่ข้อมูลประเภทเดือนและปี</p>
<form action="action_page.php">
<label for="bdaymonth">วันเกิด (เลือกเดือนและปี):</label>
<input type="month" id="bdaymonth" name="bdaymonth">
<input type="submit" value="Submit">
</form>
<p><strong>หมายเหตุ:</strong> type="month" จะไม่สามารถใช้งานได้บน Firefox, Safari, และ Internet Explorer 11</p>
</body>
</html>เมื่อคลิกที่ 
จะแสดงปฏิทินให้เลือก ดังภาพ
Input Type Number
<input type=”number”> ใช้สำหรับใส่ข้อมูลประเภทตัวเลข
สามารถกำหนดจำนวนตัวเลขที่ใส่ได้ โดยจากตัวอย่างด้านล่างนี้ จะสามารถใส่ค่าตัวเลขได้ตั้งแต่ 1 ถึง 5
<!DOCTYPE html>
<html>
<body>
<h2>Number Field</h2>
<p><strong>input type="number"</strong> ใช้สำหรับใส่ข้อมูลประเภทตัวเลข</p>
<p>คุณสามารถสามารถกำหนดขั้นต่ำ หรือสูงสุดของจำนวนตัวเลขที่ใส่ได้</p>
<form action="action_page.php">
<label for="quantity">ใส่จำนวนตัวเลข (ใส่ได้ตั้งแต่ 1 ถึง 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
<input type="submit" value="Submit">
</form>
</body>
</html>ในกรณีที่ใส่ตัวเลขเกินหรือน้อยกว่าที่กำหนดไว้ เมื่อกดปุ่ม Submit ระบบจะแสดงข้อความแจ้งเตือน ดังภาพ
ข้อจำกัดของข้อมูล Input
| Attribute | คำอธิบาย |
|---|---|
| checked | ระบุ Input Field ไว้ก่อนที่จะมีการโหลดหน้าเว็บ (สำหรับ type=”checkbox” หรือ type=”radio”) |
| disabled | ระบุว่าควรปิดใช้งานช่องป้อนข้อมูล |
| max | ระบุค่าสูงสุดสำหรับ Input Field |
| maxlength | ระบุจำนวนอักขระสูงสุดสำหรับ Input Field |
| min | ระบุค่าต่ำสุดสำหรับ Input Field |
| pattern | ระบุนิพจน์ทั่วไปเพื่อตรวจสอบค่า Input |
| readonly | ระบุว่า Input Field เป็นแบบอ่านอย่างเดียว (ไม่สามารถเปลี่ยนแปลงได้) |
| required | ระบุว่าจำเป็นต้องกรอกช่องใส่ข้อมูล (ต้องกรอก) |
| size | ระบุความกว้าง (เป็นอักขระ) ของช่องใส่ข้อมูล |
| step | ระบุช่วงหมายเลขตามกฎหมายสำหรับ Input Field |
| value | ระบุค่าเริ่มต้นสำหรับ Input Field |
จากตัวอย่างด้านล่างนี้ให้ใส่ตัวเลขตั้งแต่ 0 ถึง 100 โดยให้เพิ่มทีละ 10 ซึ่งค่าเริมต้นคือ 30
<!DOCTYPE html>
<html>
<body>
<h2>Numeric Steps</h2>
<p>ขึ้นอยู๋กับ Browser ว่าจะรองรับฟังก์ชันหรือหรือไม่</p>
<form action="action_page.php">
<label for="quantity">จำนวน:</label>
<input type="number" id="quantity" name="quantity" min="0" max="100" step="10" value="30">
<input type="submit" value="Submit">
</form>
</body>
</html>Input Type Range
<input type=”range”> ใช้กำหนดตัวเลขที่ต้องการใส่ โดยจะแสดงเป็น Slider Control โดยค่าเริ่มต้นจะอยู่ที่ 0 ถึง 100 แต่อย่างไรก็ดี คุณสามารถกำหนดค่าต่ำสุด (min), ค่าสูงสุด (max) และจำนวนระดับตัวเลขที่ต้องการเพิ่ม (step)
<!DOCTYPE html>
<html>
<body>
<h2>Range Field</h2>
<p>ขึ้นอยู๋กับ Browser ว่าจะรองรับฟังก์ชันหรือหรือไม่: Input "range" สามารถแสดงเป็นแบบแถบเลื่อน (Slider Control)</p>
<form action="action_page.php" method="get">
<label for="vol">ปริมาณ (ให้ใส่ระหว่าง 0 ถึง 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
<input type="submit" value="Submit">
</form>
</body>
</html>Input Type Search
<input type=”search”> จะใช้สำหรับใส่ข้อความค้นหา
โดยจะทำงานเหมือนการค้นหาทั่วไป
<!DOCTYPE html>
<html>
<body>
<h2>Search Field</h2>
<p><strong>input type="search"</strong> ใช้สำหรับช่องค้นหา (ทำงานเหมือนช่องข้อความทั่วไป)</p>
<form action="action_page.php">
<label for="gsearch">การค้นหาบน Google:</label>
<input type="search" id="gsearch" name="gsearch">
<input type="submit" value="Submit">
</form>
</body>
</html>Input Type Tel
<input type=”tel”> ใช้ใส่ข้อมูลประเภทเบอร์โทรศัพท์
<!DOCTYPE html>
<html>
<body>
<h2>Telephone Field</h2>
<p><strong>input type="tel"</strong> ใช้ใส่ข้อมูลประเภทเบอร์โทรศัพท์</p>
<form action="action_page.php">
<label for="phone">กรุณาใส่เบอร์โทรศัพท์:</label><br><br>
<input type="tel" id="phone" name="phone" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" required><br><br>
<small>Format: 123-45-678</small><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>Input Type Time
<input type=”time”> ใช้ใส่ข้อมูลประเภทเวลา (ไม่มีเขตเวลา)
ทั้งนี้ขึ้นอยู่กับเบราว์เซอร์ว่าจะรองรับการใส่ข้อมูล time หรือไม่ โดยสามารถเลือกเวลาได้
<!DOCTYPE html>
<html>
<body>
<h1>แสดงการใส่ข้อมูล Time Input</h1>
<p><strong>input type="time"</strong> ใช้ใส่ข้อมูลประเภทเวลา (ไม่มีเขตเวลา)</p>
<p>ถ้า browser ของคุณสามารถรองรับใช้งานฟิลด์นี้ ตัวเลือกเวลาจะปรากฏขึ้นเมื่อเข้าสู่ช่องป้อนข้อมูล</p>
<form action="action_page.php">
<label for="appt">เลือกเวลา:</label>
<input type="time" id="appt" name="appt">
<input type="submit" value="Submit">
</form>
<p><strong>หมายเหตุ:</strong> type="time" ไม่รองรับการใช้งานบน Internet Explorer 11 หรือ Safari เวอร์ชันที่ต่ำกว่า 14.1</p>
</body>
</html>เมื่อคลิกที่ 
จะแสดงเวลาให้เลือก ดังภาพ
Input Type URL
<input type=”url”> ใช้สำหรับใส่ URL ของเว็บไซต์
ทั้งนี้ก็ขึ้นอยู่กับเบราว์เซอร์ว่าจะรองรับการใช่งานฟิลด์นี้หรือไม่ ซึ่งในตอนนี้มือถือหรืออุปกรณ์อื่นๆ ก็รองรับการพิมพ์ URL แล้ว โดยจะมีแป้นพิมพ์ “.com” มาให้ด้วยเวลาที่จะพิมพ์ URL
<!DOCTYPE html>
<html>
<body>
<h1>แสดงการใส่ URL Input Field</h1>
<p><strong>input type="url"</strong> ใช้สำหรับใส่ URL ของเว็บไซต์</p>
<form action="action_page.php">
<label for="homepage">กรุณาใส่เว็บไซต์:</label>
<input type="url" id="homepage" name="homepage">
<input type="submit" value="Submit">
</form>
</body>
</html>Input Type Week
<input type=”week”> ใส่ข้อมูลโดยให้เลือกเป็นสัปดาห์และปี
ทั้งนี้ก็ขึ้นอยู่กับเบราว์เซอร์ว่าจะรองรับการใช่งานฟิลด์นี้หรือไม่
<!DOCTYPE html>
<html>
<body>
<h1>Week Input Control</h1>
<p><strong>input type="week"</strong> ใส่ข้อมูลโดยให้เลือกเป็นสัปดาห์และปี</p>
<p>ถ้า browser ของคุณสามารถรองรับใช้งานฟิลด์นี้ ตัวเลือกเวลาจะปรากฏขึ้นเมื่อเข้าสู่ช่องป้อนข้อมูล</p>
<form action="action_page.php">
<label for="week">เลือกสัปดาห์:</label>
<input type="week" id="week" name="week">
<input type="submit" value="Submit">
</form>
<p><strong>หมายเหตุ:</strong> type="week" จะไม่รองรับการทำงานบน browser Firefox, Safari และ Internet Explorer 11</p>
</body>
</html>เมื่อคลิกที่ จะแสดงปฏิทินให้เลือก ดังภาพ
