อินพุต W3.CSS
แบบฟอร์มการป้อนข้อมูล
ป้ายยอดนิยม
แบบฟอร์มการป้อนข้อมูล
ตัวอย่าง
<form class="w3-container">
<label>First Name</label>
<input class="w3-input" type="text">
<label>Last Name</label>
<input class="w3-input" type="text">
</form>
ป้ายด้านล่าง
แบบฟอร์มการป้อนข้อมูล
ตัวอย่าง
<form class="w3-container">
<input class="w3-input" type="text">
<label>First Name</label>
<input class="w3-input" type="text">
<label>Last
Name</label>
</form>
การ์ดอินพุต
หัวข้อ
ตัวอย่าง
<div class="w3-card-4">
<div class="w3-container
w3-green">
<h2>Header</h2>
</div>
<form class="w3-container">
<label>First Name</label>
<input class="w3-input"
type="text">
<label>Last Name</label>
<input class="w3-input"
type="text">
</form>
</div>
ป้ายสี
ใช้ คลาส w3-text-colorเพื่อระบายสีป้ายกำกับของคุณ:
ตัวอย่าง
<form class="w3-container">
<label
class="w3-text-blue"><b>First Name</b></label>
<input class="w3-input w3-border" type="text">
<label
class="w3-text-blue"><b>Last Name</b></label>
<input class="w3-input w3-border" type="text">
<button class="w3-btn
w3-blue">Register</button>
</form>
อินพุตแบบมีขอบ
เพิ่ม คลาส w3-borderเพื่อสร้างอินพุตแบบมีขอบ:
ตัวอย่าง
<input class="w3-input w3-border"
type="text">
ขอบมน
ใช้ คลาส w3-round ใดๆ เพื่อสร้างขอบโค้งมน:
ตัวอย่าง
<input class="w3-input w3-border w3-round"
type="text">
<input class="w3-input w3-border
w3-round-large"
type="text">
อินพุตไร้ขอบ
คลาส w3-input มีขอบด้านล่างโดยค่าเริ่มต้น หากคุณต้องการอินพุตแบบไร้ขอบ ให้เพิ่ม คลาส w3-border-0 :
ตัวอย่าง
<form class="w3-container w3-light-grey">
<label>First
Name</label>
<input class="w3-input w3-border-0" type="text">
<label>Last Name</label>
<input class="w3-input
w3-border-0" type="text">
</form>
สี
ใช้สไตล์และสีที่คุณชื่นชอบได้ตามสบาย:
แบบฟอร์มการป้อนข้อมูล
ตัวอย่าง
<div class="w3-container w3-teal">
<h2>Input Form</h2>
</div>
<form class="w3-container">
<label class="w3-text-teal"><b>First Name</b></label>
<input class="w3-input w3-border w3-light-grey" type="text">
<label class="w3-text-teal"><b>Last Name</b></label>
<input class="w3-input w3-border w3-light-grey" type="text">
<button class="w3-btn w3-blue-grey">Register</button>
</form>
อินพุตที่เลื่อนได้
คลาส สีw3-hover- เพิ่ม สีพื้นหลังให้กับฟิลด์อินพุตเมื่อวางเมาส์:
ตัวอย่าง
<input class="w3-input w3-hover-green" type="text">
<input class="w3-input
w3-border w3-hover-red" type="text">
<input class="w3-input
w3-border w3-hover-blue" type="text">
อินพุตเคลื่อนไหว
คลาสw3-animate-inputเปลี่ยนความกว้างของฟิลด์อินพุตเป็น 100% เมื่อได้รับการโฟกัส:
ตัวอย่าง
<input class="w3-input w3-animate-input"
type="text" style="width:30%">
ตัวอย่าง
<input class="w3-check" type="checkbox" checked="checked">
<label>Milk</label>
<input class="w3-check"
type="checkbox">
<label>Sugar</label>
<input class="w3-check" type="checkbox" disabled>
<label>Lemon (Disabled)</label>
ตัวอย่าง
<input class="w3-radio" type="radio" name="gender" value="male" checked>
<label>Male</label>
<input class="w3-radio"
type="radio" name="gender" value="female">
<label>Female</label>
<input class="w3-radio"
type="radio" name="gender" value="" disabled>
<label>Don't know (Disabled)</label>
เลือกตัวเลือก
ตัวอย่าง
<select class="w3-select" name="option">
<option value="" disabled
selected>Choose your option</option>
<option value="1">Option
1</option>
<option value="2">Option 2</option>
<option
value="3">Option 3</option>
</select>
มีขอบเมนูเลือก
ตัวอย่าง
<select class="w3-select w3-border" name="option">
ฟอร์มองค์ประกอบใน Grid
ในตัวอย่างนี้ เราใช้ Responsive Grid System ของ W3.CSS เพื่อทำให้อินพุตปรากฏในบรรทัดเดียวกัน (บนหน้าจอขนาดเล็ก จะเรียงซ้อนกันในแนวนอนโดยมีความกว้าง 100%) คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับเรื่องนี้ในภายหลัง
ตัวอย่าง
<div class="w3-row-padding">
<div class="w3-third">
<input class="w3-input w3-border" type="text" placeholder="One">
</div>
<div class="w3-third">
<input
class="w3-input w3-border" type="text" placeholder="Two">
</div>
<div class="w3-third">
<input class="w3-input
w3-border" type="text" placeholder="Three">
</div>
</div>
กริดพร้อมฉลาก
ตัวอย่าง
<div class="w3-row-padding">
<div class="w3-half">
<label>First Name</label>
<input
class="w3-input w3-border" type="text" placeholder="Two">
</div>
<div class="w3-half">
<label>Last
Name</label>
<input class="w3-input
w3-border" type="text" placeholder="Three">
</div>
</div>