วิธีสร้างแบบฟอร์มซ้อนใน CSS

CSS อยู่ในคลาสภาษาเฉพาะที่เรียกว่า ภาษาสไตล์ชีต ส่วนใหญ่จะใช้เพื่อกำหนดการนำเสนอของหน้าเว็บของคุณ แม้ว่า HTML จะให้คุณระบุวิธีการจัดโครงสร้างหน้าเว็บของคุณได้ แต่ CSS นั้นใช้เพื่อจัดรูปแบบ มิฉะนั้น คุณจะลงเอยด้วยเว็บไซต์ที่ไม่สวย

การมุ่งเน้นที่ CSS เป็นวิธีที่ดีกว่าวิธีหนึ่งในการปรับปรุงการอุทธรณ์ของเว็บไซต์ของคุณ โดยเฉพาะอย่างยิ่งเมื่อต้องปรับปรุงประสบการณ์ผู้ใช้ของคุณ ด้วยวิธีนี้ คุณสามารถเพิ่มการเข้าชมได้ สำหรับผู้เริ่มต้น คุณสามารถใช้แบบฟอร์มแบบเรียงซ้อนได้

---

---

แบบฟอร์มซ้อนคืออะไร?

แบบฟอร์มแบบเรียงซ้อนช่วยให้คุณสร้างแบบฟอร์มพิเศษที่คุณสามารถวางป้ายกำกับและอินพุตไว้ทับกัน แทนที่จะวางในรูปแบบแนวนอน

นี่คือวิธีที่คุณสามารถทำได้

โค้ด HTML

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

What Is a Stacked Form?

Here's how you create a stacked form.

Full Name

Email Address

Department

Information Technology
Customer Support
Sales

อย่างไรก็ตาม การรันโค้ดชิ้นนี้จะสร้างรูปแบบที่ไม่สุภาพเท่านั้น โดยไม่มีการซ้อนฟิลด์ในแนวตั้ง และนั่นคือสิ่งที่คุณจะต้องเพิ่ม CSS

---

---

วิธีแก้ไข bootloop โดยใช้ pc

รหัสส่วน CSS

ตอนนี้ ให้สร้างสไตล์ชีตแยกต่างหากและเพิ่มลงใน HTML ก่อนแท็ก body:




ถัดไป เลือกเนื้อหา HTML ประเภทอินพุต และคอนเทนเนอร์ แล้วจัดรูปแบบผ่าน CSS ซึ่งจะรวมถึงการทดลองกับคุณสมบัติ CSS ต่างๆ เช่น font-family, width, padding, margin, display, border ฯลฯ และเพิ่มค่าที่คุณต้องการ ด้วยวิธีนี้ คุณจะลงเอยด้วยรูปแบบซ้อนกันที่เหมาะกับความต้องการของคุณ นี่คือตัวอย่าง

---

---


body {
font-family: Calibri;
}
input[type=text], select {
width: 25%;
padding: 12px 20px;
margin: 8px 10;
display: list-item;
border: 4px double #39A9DB;
border-radius: 8px;
box-sizing: border-box;
}
input[type=submit] {
width: 25%;
background-color: #F8E2E6;
color: #0000FF;
padding: 12px 18px;
margin: 20px 0;
border: none;
border-radius: 6px;
cursor: pointer;
}
div.container {
border-radius: 10px;
background-color: #39A9DB;
padding: 40px;
}


ตรวจสอบผลลัพธ์ด้านล่าง

ตอนนี้คุณสามารถสร้างแบบฟอร์มซ้อนใน CSS

ในบทความนี้ คุณได้เรียนรู้วิธีการสร้างแบบฟอร์มซ้อนใน CSS ด้วยการฝึกฝน คุณจะสามารถปรับแต่งแบบฟอร์มของคุณและทำให้เว็บไซต์ของคุณใช้งานง่ายขึ้น

วิธีการติดตั้ง mac os บน vmware

ชื่อของเกมการเขียนโปรแกรมคือ 'ฝึกหัด' ฝึกฝนทักษะ CSS ของคุณในแต่ละวันด้วยโครงการนิทรรศการเพื่อเป็นนักออกแบบเว็บไซต์ที่มีสไตล์และนักพัฒนาเว็บที่มีประสิทธิภาพมากขึ้น

แบ่งปัน แบ่งปัน ทวีต อีเมล 10 ตัวอย่างโค้ด CSS อย่างง่ายที่คุณเรียนรู้ได้ใน 10 นาที

ต้องการความช่วยเหลือเกี่ยวกับ CSS หรือไม่ ลองใช้ตัวอย่างโค้ด CSS พื้นฐานเหล่านี้เพื่อเริ่มต้น จากนั้นนำไปใช้กับหน้าเว็บของคุณเอง

อ่านต่อไป หัวข้อที่เกี่ยวข้อง

• การเขียนโปรแกรม
• การพัฒนาเว็บ
• CSS

เกี่ยวกับผู้เขียน Usman Ghani(4 บทความที่ตีพิมพ์)

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

เพิ่มเติมจาก Usman Ghani

สมัครรับจดหมายข่าวของเรา

เข้าร่วมจดหมายข่าวของเราสำหรับเคล็ดลับทางเทคนิค บทวิจารณ์ eBook ฟรี และดีลพิเศษ!

คลิกที่นี่เพื่อสมัครสมาชิก