home

หน้าแรก
 Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

อินพุต CSS

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

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

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

อินพุต HTML และ CSS

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

ใน HTML แท็ก ใช้เพื่อยอมรับการป้อนข้อมูลของผู้ใช้ในแบบฟอร์ม ไวยากรณ์พื้นฐานสำหรับ HTML คือ:

<input type="typeOfInput">

อินพุต CSS ปุ่มในตัวแก้ไขโค้ดด้านบนเพื่อดูผลลัพธ์ของโค้ด HTML/CSS

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

<label for="userName">Name</label>
<input type="text" name="userName">

อินพุต CSS ปุ่มในตัวแก้ไขโค้ดด้านบนเพื่อดูผลลัพธ์ของโค้ด HTML/CSS

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

ช่องป้อนข้อมูลของเราใช้รูปแบบ HTML เริ่มต้นสำหรับแท็ก ซึ่งค่อนข้างเป็นพื้นฐาน เรายังใช้แท็ก

อินพุต CSS

มาดูตัวอย่างวิธีการจัดรูปแบบองค์ประกอบรูปแบบโดยใช้ CSS กัน

การตั้งค่าความกว้างของอินพุต

สมมติว่าเรากำลังออกแบบฟิลด์แบบฟอร์มสำหรับชมรมแสตมป์ท้องถิ่นที่รวบรวมชื่อบุคคลที่ส่งแบบฟอร์ม แบบฟอร์มนี้ควรใช้พื้นที่ 50% ของความกว้างของหน้าเว็บ เราสามารถสร้างแบบฟอร์มนี้โดยใช้รหัสต่อไปนี้:

<html>

<label for="userName">Name</label>
<input type="text" name="userName">

<style>

input {
	width: 50%;
}

อินพุต CSS ปุ่มในตัวแก้ไขโค้ดด้านบนเพื่อดูผลลัพธ์ของโค้ด HTML/CSS

ในตัวอย่างนี้ เราได้สร้างฟิลด์แบบฟอร์มที่เท่ากับ 50% ของความกว้างของหน้าเว็บ

ในโค้ด HTML ของเรา เราใช้แท็ก

ป้อนข้อมูลด้วยเส้นขอบ

ชมรมแสตมป์ซีแอตเทิลขอให้เราเพิ่มเส้นขอบสีฟ้าอ่อนรอบแต่ละช่องแบบฟอร์ม เนื่องจากสีฟ้าอ่อนเป็นสีของไม้กอล์ฟ เส้นขอบควรมีความกว้าง 3px เราสามารถใช้คุณสมบัติ border เพื่อเพิ่มเส้นขอบรอบ ๆ ช่องใส่แบบฟอร์มแต่ละช่อง

นี่คือรหัสที่เราจะใช้เพื่อเพิ่มเส้นขอบรอบ ๆ ช่องใส่ของเรา:

<html>

<label for="userName">Name</label>
<input type="text" name="userName">

<style>

input {
	border: 3px solid lightblue;
}

อินพุต CSS ปุ่มในตัวแก้ไขโค้ดด้านบนเพื่อดูผลลัพธ์ของโค้ด HTML/CSS

ในโค้ดของเรา เราใช้รูปแบบเส้นขอบเพื่อเพิ่มเส้นขอบรอบช่องป้อนข้อมูลของเรา เส้นขอบนี้มีความหนา 3px อย่างที่คุณเห็น ช่องแบบฟอร์มของเรามีเส้นขอบสีฟ้าอ่อน

หากคุณสนใจที่จะเรียนรู้เพิ่มเติมเกี่ยวกับเส้นขอบ CSS โปรดอ่านคำแนะนำขั้นสูงสุดของเราเกี่ยวกับเส้นขอบ CSS

ป้อนข้อมูลด้วยขอบด้านล่าง

นอกจากนี้เรายังสามารถเพิ่มเส้นขอบให้กับขอบเฉพาะของแบบฟอร์มของเราได้อีกด้วย ดังนั้น หากเราต้องการให้เส้นขอบปรากฏที่ด้านล่างของฟิลด์เท่านั้น เราก็สามารถใช้คุณสมบัติ border-bottom ได้ นี่คือรหัสที่เราจะใช้:

<html>

<label for="userName">Name</label>
<input type="text" name="userName">

<style>

input {
	border-bottom: 3px solid lightblue;
}

อินพุต CSS ปุ่มในตัวแก้ไขโค้ดด้านบนเพื่อดูผลลัพธ์ของโค้ด HTML/CSS

ในโค้ดของเรา เราใช้คุณสมบัติ border-bottom เพื่อเพิ่มเส้นขอบที่ด้านล่างของฟิลด์อินพุตของเรา

ป้อนข้อมูลด้วยช่องว่างภายใน

Seattle Stamp Club ขอให้เราเว้นวรรคระหว่างเนื้อหาของแบบฟอร์ม—ช่องว่างที่ผู้ใช้ป้อนข้อมูล—และเส้นขอบของแบบฟอร์ม

คลับต้องการให้ช่องว่างภายใน 10px ปรากฏขึ้นระหว่างขอบด้านบนและด้านล่างกับเนื้อหาของแบบฟอร์ม คลับยังต้องการให้ช่องว่างภายในขนาด 15px ปรากฏขึ้นระหว่างเส้นขอบด้านซ้ายและขวากับเนื้อหาของแบบฟอร์ม

เราสามารถทำงานนี้ให้สำเร็จโดยใช้รหัสต่อไปนี้:

<html>

<label for="userName">Name</label>
<input type="text" name="userName">

<style>

input {
	padding: 10px 15px;
	box-sizing: border-box;
}

อินพุต CSS ปุ่มในตัวแก้ไขโค้ดด้านบนเพื่อดูผลลัพธ์ของโค้ด HTML/CSS

ในตัวอย่างนี้ เราใช้ลักษณะช่องว่างภายในเพื่อใช้ช่องว่างภายในระหว่างเนื้อหาในช่องแบบฟอร์มของเรากับเส้นขอบของช่องแบบฟอร์ม ค่าแรก (10px) กำหนดช่องว่างภายในสำหรับขอบด้านบนและด้านล่าง และค่าที่สอง (15px) จะกำหนดช่องว่างภายในสำหรับขอบด้านซ้ายและขวา

นอกจากนี้เรายังได้ตั้งค่าคุณสมบัติ box-sizing เป็น border-box . เพื่อให้แน่ใจว่าช่องว่างภายในจะรวมอยู่ในความกว้างทั้งหมดขององค์ประกอบ

หากคุณสนใจที่จะเรียนรู้เพิ่มเติมเกี่ยวกับคุณสมบัติ CSS padding โปรดอ่านคู่มือ CSS padding ของเรา

รูปแบบที่มีอินพุตที่โฟกัส

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

อย่างไรก็ตาม เราสามารถปรับแต่งสิ่งนี้ได้โดยใช้ตัวเลือก :focus CSS Seattle Stamp Club ขอให้เราเพิ่มเส้นขอบสีเทาอ่อนที่ด้านล่างของแบบฟอร์มเมื่อผู้ใช้คลิกที่แบบฟอร์ม เราสามารถทำได้โดยใช้รหัสนี้:

<html>

<label for="userName">Name</label>
<input type="text" name="userName">

<style>

input:focus {
	outline: none;
	border-bottom: 3px solid lightgray;
}

อินพุต CSS ปุ่มในตัวแก้ไขโค้ดด้านบนเพื่อดูผลลัพธ์ของโค้ด HTML/CSS

เว็บฟอร์มปรากฏขึ้นโดยใช้สไตล์ HTML เริ่มต้น อย่างไรก็ตาม เมื่อคุณคลิกที่แบบฟอร์ม จะมีการใช้เส้นขอบสีเทาอ่อนทึบที่มีความกว้าง 3px ที่ด้านล่างของแบบฟอร์ม

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

หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับตัวเลือกโฟกัส โปรดอ่านคู่มือ CSS :ตัวเลือกโฟกัสของเรา

ป้อนข้อมูลด้วยมุมโค้งมน

Seattle Stamp Club ขอให้เราเพิ่มเส้นขอบสีเทาอ่อนรอบขอบทุกด้านของช่องป้อนข้อมูล และรอบมุมของอินพุต เราสามารถทำได้โดยใช้คุณสมบัติ border-radius ซึ่งช่วยให้คุณสร้าง rounded corners ผลกระทบใน CSS

นี่คือรหัสที่เราจะใช้เพื่อสร้างฟิลด์แบบฟอร์มที่มีมุมโค้งมน:

<html>

<label for="userName">Name</label>
<input type="text" name="userName">

<style>

input {
	border: 3px solid lightgray;
	border-radius: 10px;
}

อินพุต CSS ปุ่มในตัวแก้ไขโค้ดด้านบนเพื่อดูผลลัพธ์ของโค้ด HTML/CSS

ในตัวอย่างนี้ เรากำหนดเส้นขอบสีเทาอ่อนทึบกว้าง 3px ที่ปรากฏรอบช่องป้อนข้อมูลของเรา จากนั้น เราใช้คุณสมบัติ border-radius เพื่อปัดเศษมุมของฟิลด์แบบฟอร์มของเรา

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

ป้อนข้อมูลด้วยสีพื้นหลัง

Seattle Stamp Club ขอให้เราสร้างฟิลด์แบบฟอร์มสุดท้ายหนึ่งฟิลด์ ช่องแบบฟอร์มนี้ควรมีเส้นขอบสีเทาอ่อนทึบกว้าง 3px และมีพื้นหลังสีน้ำเงินอ่อน

เราสามารถใช้รหัสต่อไปนี้เพื่อสร้างฟิลด์แบบฟอร์มนี้:

<html>

<label for="userName">Name</label>
<input type="text" name="userName">

<style>

input {
	border: 3px solid lightgray;
	background-color: lightblue;
}

อินพุต CSS ปุ่มในตัวแก้ไขโค้ดด้านบนเพื่อดูผลลัพธ์ของโค้ด HTML/CSS

ในโค้ดของเรา เราใช้คุณสมบัติ border เพื่อกำหนดเส้นขอบสีเทาอ่อนทึบที่มีความกว้าง 3px รอบช่องป้อนข้อมูลของเรา จากนั้น เราใช้คุณสมบัติ background-color เพื่อกำหนดสีพื้นหลังของฟิลด์แบบฟอร์มของเราเป็นสีน้ำเงินอ่อน

ใช้สไตล์กับช่องป้อนข้อมูลเฉพาะ

ในบทช่วยสอนนี้ เราได้พูดถึงวิธีการใช้สไตล์กับฟิลด์ อย่างไรก็ตาม มีวิธีที่คุณสามารถใช้สไตล์กับประเภทอินพุตเฉพาะได้

นั่นคือที่มาของตัวเลือกแอตทริบิวต์ แทนที่จะใช้ input ในสไตล์ของคุณ หากคุณต้องการนำสไตล์ไปใช้กับอินพุตเฉพาะ คุณอาจลองใช้ตัวเลือกเหล่านี้:

  • input[type=text]:ใช้สไตล์กับช่องข้อความทั้งหมด
  • input[type=email]:ใช้สไตล์กับช่องอีเมลทั้งหมด
  • input[type=password]:ใช้รูปแบบกับช่องรหัสผ่านทั้งหมด
  • input[id=userName]:ใช้สไตล์กับองค์ประกอบที่มี ID userName .

หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับวิธีการทำงานของตัวเลือกแอตทริบิวต์ โปรดอ่านคู่มือ Career Karma ของเราเกี่ยวกับตัวเลือกแอตทริบิวต์ CSS

บทสรุป

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

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