แบบฟอร์มการป้อนข้อมูล
ป้ายชื่อยอดนิยม
แบบฟอร์มการป้อนข้อมูล
ตัวอย่าง
<form class="w3-container">
<label>First Name</label>
<input class="w3-input" type="text">
<label>Last Namel</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
class="w3-label">First Name</label>
<input class="w3-input"
type="text">
<label
class="w3-label">Last Name</label>
<input class="w3-input"
type="text">
</form>
</div> ลองตัวเอง» ฉลากเขียว
ฉลากที่มี class = "W3 ป้าย" มีสีเขียวโดยค่าเริ่มต้น:
ตัวอย่าง
<form class="w3-container">
<label
class="w3-label">First Name</label>
<input class="w3-input"
type="text">
<label
class="w3-label">Last Name</label>
<input class="w3-input"
type="text">
</form> ลองตัวเอง» การตรวจสอบฉลาก
ตรวจสอบป้ายแดงและเปลี่ยนเป็นสีเขียวเมื่อป้อนข้อมูลจะกลายเป็นที่ถูกต้อง
เพื่อให้การตรวจสอบฉลากเพิ่มระดับ W3-ตรวจสอบในชั้นเรียน W3 ป้ายชื่อของคุณ
ตัวอย่าง
<form class="w3-container">
<input
class="w3-input" type="text" required>
<label class="w3-label
w3-validate">First Name</label>
<input class="w3-input" type="text" required>
<label class="w3-label
w3-validate">Last Name</label>
<input class="w3-input" type="email" required>
<label class="w3-label
w3-validate">Email</label>
</form> ลองตัวเอง» ป้ายสี
ใช้ใด ๆ ของการเรียน W3 ข้อความสีสีป้ายชื่อของคุณ:
ตัวอย่าง
<form class="w3-container">
<label
class="w3-label w3-text-blue"><b>First Name</b></label>
<input class="w3-input w3-border" type="text">
<label
class="w3-label 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 พรมแดนในการสร้างปัจจัยการผลิตขอบ:
โค้งมนพรมแดน
ใช้ใด ๆ ของการเรียน W3 รอบในการสร้างเส้นขอบโค้งมน:
ตัวอย่าง
<input class="w3-input w3-border w3-round"
type="text">
<input class="w3-input w3-border
w3-round-large"
type="text"> ลองตัวเอง» การป้อนข้อมูลแบบไร้ขอบ
ชั้น W3 อินพุตมีขอบด้านล่างโดยค่าเริ่มต้น หากคุณต้องการใส่ขอบเพิ่ม W3 พรมแดน-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-label w3-text-teal"><b>First Name</b></label>
<input class="w3-input w3-border w3-light-grey" type="text">
<label class="w3-label
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> ลองตัวเอง» ปัจจัยการผลิต Hoverable
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-เคลื่อนไหวอินพุตเปลี่ยนความกว้างของช่องใส่ถึง 100% เมื่อได้รับโฟกัส:
ตัวอย่าง
<input class="w3-check" type="checkbox" checked="checked">
<label class="w3-validate">Milk</label>
<input class="w3-check"
type="checkbox">
<label class="w3-validate">Sugar</label>
<input class="w3-check" type="checkbox" disabled>
<label class="w3-validate">Lemon (Disabled)</label> ลองตัวเอง» ตัวอย่าง
<input class="w3-radio" type="radio" name="gender" value="male" checked>
<label class="w3-validate">Male</label>
<input class="w3-radio"
type="radio" name="gender" value="female">
<label class="w3-validate">Female</label>
<input class="w3-radio"
type="radio" name="gender" value="" disabled>
<label class="w3-validate">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> ลองตัวเอง» เป้เลือกเมนู
องค์ประกอบของแบบฟอร์มในตาราง
ในตัวอย่างนี้เราจะใช้ระบบกริดที่ตอบสนองต่อ 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> ลองตัวเอง»