1. Home
  2. รูปแบบ HTML

บทช่วยสอน รูปแบบ HTML ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้ ตัวอย่างออนไลน์,รูปแบบ HTML,รูปแบบ HTML - องค์ประกอบของการป้อนข้อมูล,ฟิลด์ข้อความ (Text Fields),ฟิลด์รหัสผ่าน,ปุ่ม (ปุ่ม),ตรวจสอบกล่อง (ช่องทำเครื่องหมาย),ปุ่ม (ปุ่มส่ง) ส่ง,ตัวอย่างเพิ่มเติม,ตัวอย่างแบบฟอร์ม,แท็กรูปแบบ HTML,

รูปแบบ HTML

รูปแบบ HTML จะใช้ในการรวบรวมข้อมูลประเภทที่แตกต่างกันของผู้ใช้

ตัวอย่าง

ตัวอย่างออนไลน์

สร้างฟิลด์ข้อความ (ช่องข้อความ)
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการสร้างฟิลด์ข้อความในหน้า HTML ผู้ใช้สามารถเขียนข้อความในช่องข้อความ

สร้างเขตข้อมูลรหัสผ่าน
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการสร้างฟิลด์รหัสผ่าน HTML

(ที่ด้านล่างของหน้านี้คุณสามารถหาตัวอย่างเพิ่มเติม.)

รูปแบบ HTML

แบบฟอร์มการเป็นภูมิภาคที่มีองค์ประกอบของแบบฟอร์มที่

องค์ประกอบรูปแบบคือการอนุญาตให้ผู้ใช้สามารถป้อนเนื้อหาในรูปแบบเช่น: ช่องข้อความ (textarea) รายการแบบหล่นลง, ปุ่ม (ปุ่มวิทยุ) ช่องทำเครื่องหมาย (ช่องทำเครื่องหมาย) และอื่น ๆ

แบบฟอร์มการใช้แท็กรูปแบบ <form> ตั้ง:

<form>
.
input 元素
.
</form>

รูปแบบ HTML - องค์ประกอบของการป้อนข้อมูล

แท็กรูปแบบในกรณีส่วนใหญ่จะใช้เป็นแท็กการป้อนข้อมูล (<input>)

ประเภทการป้อนข้อมูลเป็นประเภทแอตทริบิวต์ (พิมพ์) คำจำกัดความ บ่อยที่สุดรูปแบบการใส่ใช้มีดังนี้

ฟิลด์ข้อความ (Text Fields)

ผ่านช่องข้อความ <ชนิดของการป้อนข้อมูล = "text"> แท็กเพื่อตั้งเมื่อผู้ใช้พิมพ์ตัวอักษรตัวเลขและเนื้อหาอื่น ๆ ในรูปแบบข้อมูลข้อความจะถูกนำมาใช้

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

เบราว์เซอร์จะแสดงต่อไปนี้:

ชื่อจริง:
นามสกุล:

หมายเหตุ: รูปแบบที่ตัวเองมองไม่เห็นนอกจากนี้ในเบราว์เซอร์ส่วนใหญ่เริ่มต้นความกว้างของช่องข้อความคือ 20 ตัวอักษร

ฟิลด์รหัสผ่าน

เขตข้อมูลรหัสผ่านโดยแท็ก <input type = "รหัสผ่าน"> เพื่อกำหนด:

<form>
Password: <input type="password" name="pwd">
</form>

เบราว์เซอร์จะแสดงผลกระทบต่อไปนี้:

รหัสผ่าน:

หมายเหตุ: ตัวอักษรฟิลด์รหัสผ่านจะไม่แสดงในข้อความที่ชัดเจน แต่มีเครื่องหมายดอกจันหรือจุดแทน

ปุ่ม (ปุ่ม)

<ประเภทขาเข้า = "วิทยุ"> แท็กกำหนดตารางเพียงอย่างเดียวตัวเลือกกล่อง

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

เบราว์เซอร์จะแสดงผลกระทบต่อไปนี้:

ชาย
เพศหญิง

ตรวจสอบกล่อง (ช่องทำเครื่องหมาย)

<ประเภทขาเข้า = "ช่องทำเครื่องหมาย"> กำหนดช่องทำเครื่องหมาย. ผู้ใช้จำเป็นต้องเลือกอย่างใดอย่างหนึ่งหรือหลายตัวเลือกจากตัวเลือกที่ได้รับหลาย

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>

เบราว์เซอร์จะแสดงผลกระทบต่อไปนี้:

ฉันมีจักรยาน
ผมมีรถ

ปุ่ม (ปุ่มส่ง) ส่ง

<ประเภทขาเข้า = "ส่ง"> กำหนดปุ่มส่ง

เมื่อผู้ใช้คลิกปุ่ม OK เนื้อหาของรูปแบบจะถูกโอนไปยังแฟ้มอื่น แอตทริบิวต์การกระทำแบบฟอร์มการกำหนดชื่อแฟ้มของแฟ้มปลายทาง ที่กำหนดโดยแอตทริบิวต์การกระทำของไฟล์ตามปกติจะได้รับการป้อนข้อมูลที่เกี่ยวข้องกับการรักษา :

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

เบราว์เซอร์จะแสดงผลกระทบต่อไปนี้:

ชื่อผู้ใช้:

หากคุณพิมพ์ตัวอักษรไม่กี่ในกล่องข้อความข้างต้นแล้วคลิกปุ่ม OK แล้วป้อนข้อมูลจะถูกโอนไป "html_form_action.php หน้า" หน้านี้แสดงผลที่ป้อน

ลองมัน ตัวอย่างเพิ่มเติม

ปุ่ม (ปุ่ม)
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการสร้างปุ่มใน HTML

ตรวจสอบกล่อง (ช่องทำเครื่องหมาย)
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการสร้างกล่องกาเครื่องหมายในหน้าเว็บ HTML ผู้ใช้สามารถเลือกหรือยกเลิกการเลือกช่องทำเครื่องหมาย

รายการแบบหล่นลงง่ายๆ
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการสร้างหล่นลงกล่องรายการที่เรียบง่ายในหน้าเว็บ HTML หล่นลงกล่องรายการเป็นรายการที่ไม่จำเป็น

Pre-เลือกรายการแบบหล่นลง
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการสร้างรายการแบบหล่นลงที่เรียบง่ายด้วยค่าไว้ล่วงหน้า

ช่องข้อความ (textarea)
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการสร้างฟิลด์ข้อความ (หลายสายควบคุมการป้อนข้อความ) ผู้ใช้สามารถเขียนข้อความในช่องข้อความ ตัวอักษรที่เขียนได้ของคำไม่ จำกัด

ปุ่มสร้าง
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการสร้างปุ่ม คุณสามารถข้อความบนปุ่มที่สามารถปรับแต่ง

ลองมัน ตัวอย่างแบบฟอร์ม

แบบฟอร์มที่มีเส้นขอบ
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการวาดกล่องรอบข้อมูลที่มีชื่อ

กล่องใส่และยืนยันรูปแบบที่มีปุ่ม
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการเพิ่มหน้าแบบฟอร์ม รูปแบบนี้มีสองช่องป้อนข้อมูลและปุ่มยืนยัน

แบบฟอร์มที่มีช่องทำเครื่องหมาย
แบบฟอร์มนี้มีสองช่องทำเครื่องหมายและปุ่มยืนยัน

แบบฟอร์มที่มีปุ่มวิทยุ
แบบฟอร์มนี้มีสองกล่องและปุ่มยืนยัน

ส่งอีเมลจากรูปแบบ
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการส่งอีเมลจากรูปแบบ

แท็กรูปแบบ HTML

ใหม่: HTML5 ป้ายชื่อใหม่

标签 描述
<form> 定义供用户输入的表单
<input> 定义输入域
<textarea> 定义文本域 (一个多行的输入控件)
<label> 定义了 <input> 元素的标签，一般为输入标题
<fieldset> 定义了一组相关的表单元素，并使用外框包含起来
<legend> 定义了 <fieldset> 元素的标题
<select> 定义了下拉选项列表
<optgroup> 定义选项组
<option> 定义下拉列表中的选项
<button> 定义一个点击按钮
<datalist> New 指定一个预先定义的输入控件选项列表
<keygen> New 定义了表单的密钥对生成器字段
<output> New 定义一个计算结果

บทแนะนำยอดนิยม

Contact US

รูปแบบ HTML
10/30