ฟอร์ม CSS

ด้วยการใช้ CSS คุณสามารถนำมาช่วยดูดวงตาในรูปแบบของฟอร์ม HTML:

ทดลองด้วยตัวเอง

ตั้งรูปแบบสำหรับฟิลด์ข้อมูล

ใช้ width คุณสมบัติเพื่อกำหนดความกว้างของฟิลด์ข้อมูล:

ตัวอย่าง

input {
  width: 100%;
}

ทดลองด้วยตัวเอง

ในตัวอย่างดังกล่าวนี้นั้นใช้สำหรับทุก <input> อิเล็ม: ถ้าคุณต้องการตั้งรูปแบบสำหรับชนิดฟิลด์ที่เฉพาะเจาะจง คุณสามารถใช้เลือกเซลเฟอร์ตามที่ต้องการ:

  • input[type=text] - จะเลือกฟิลด์ข้อความเท่านั้น
  • input[type=password] - จะเลือกฟิลด์รหัสผ่านเท่านั้น
  • input[type=number] - จะเลือกฟิลด์เลขเท่านั้น
  • และอื่นๆ...

เติมเนื้อหาในช่องบอกข้อมูล

ใช้ padding คุณสมบัติเพื่อเพิ่มช่องว่างในช่องบอกข้อมูล

คำเตือน：หากมีช่องบอกข้อมูลมากมาย คุณอาจจะต้องการเพิ่มเมื่อเว้นช่องว่างด้านนอก:

ตัวอย่าง

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

ทดลองด้วยตัวเอง

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

กรุณาใช้ CSS Box Sizing ในบทนี้เราจะเรียนรู้เกี่ยวกับ box-sizing เพื่อได้รับความรู้เกี่ยวกับคุณสมบัติ

ช่องบอกข้อมูลที่มีเส้นขอบ

ใช้ border คุณสมบัติเพื่อเปลี่ยนความหนาและสีของเส้นขอบ และใช้ border-radius คุณสมบัติเพื่อเพิ่มหัวรูปเรียง:

ตัวอย่าง

input[type=text] {
  border: 2px solid red;
  border-radius: 4px;
}

ทดลองด้วยตัวเอง

หากคุณต้องการเพียงเส้นขอบด้านล่าง ใช้ border-bottom คุณสมบัติ:

ตัวอย่าง

input[type=text] {
  border: none;
  border-bottom: 2px solid red;
}

ทดลองด้วยตัวเอง

ช่องบอกข้อมูลสี

ใช้ background-color สำหรับเพิ่มสีพื้นหลังสำหรับช่องบอกข้อมูล และใช้ color แปรไปที่สีของข้อความด้วยการเพิ่ม

ตัวอย่าง

input[type=text] {
  background-color: #3CBC8D;
  color: white;
}

ทดลองด้วยตัวเอง

ช่องบอกข้อมูลที่ได้รับความสนใจ

โดยมาตรฐาน บราวเซอร์บางตัวจะเพิ่มเส้นขอบสีฟ้าที่ต่อรอบช่องบอกข้อมูลเมื่อได้รับความสนใจ (คลิก): คุณสามารถเพิ่ม outline: none; เพื่อลบพฤติกรรมนี้。

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

ตัวอย่าง 1

input[type=text]:focus {
  background-color: lightblue;
}

กรุณาคลิกในช่องตัวอย่างนี้:

ทดลองด้วยตัวเอง

ตัวอย่าง 2

input[type=text]:focus {
  border: 3px solid #555;
}

กรุณาคลิกในช่องตัวอย่างนี้:

ทดลองด้วยตัวเอง

ช่องบอกค้นที่มีรูปภาพ/อิมาจ

ถ้าคุณต้องการที่จะมีรูปภาพที่อยู่ในช่องบอกค้น ใช้ background-image คุณสมบัติ และต่อไปด้วย background-position คุณสมบัติรวมกันนี้ต่อไปนี้. และเรียนรู้ว่าเราได้เพิ่ม padding-left ที่ใหญ่ขึ้นเพื่อให้เกิดช่องว่างสำหรับตัวอักษรตรงซ้าย:

ตัวอย่าง

input[type=text] {
  background-color: white;
  background-image: url('searchicon.png');
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding-left: 40px;
}

ทดลองด้วยตัวเอง

ช่องบอกค้นที่มีประสิทธิภาพการเคลื่อนไหว

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

ตัวอย่าง

input[type=text] {
  transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
  width: 100%;
}

ทดลองด้วยตัวเอง

ตั้งรูปแบบสไตล์ของข้อความ

คำเตือน：ใช้ resize คุณสมบัตินี้สามารถป้องกันการปรับขนาดของ textareas (ปิดการใช้งาน 'grabbler' ที่ด้านล่างขวา):

ตัวอย่าง

textarea {
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  resize: none;
}

ทดลองด้วยตัวเอง

ตั้งรูปแบบสไตล์ตัวเลือก

ตัวอย่าง

select {
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-radius: 4px;
  background-color: #f1f1f1;
}

ทดลองด้วยตัวเอง

ตั้งรูปแบบสไตล์ปุ่มนำเข้า

ตัวอย่าง

input[type=button], input[type=submit], input[type=reset] {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}
/* คำเตือน: ใช้ width: 100% ในปุ่มเพื่อทำให้ปุ่มครอบทั้งความกว้าง */

ทดลองด้วยตัวเอง

เพื่อเรียนรู้เกี่ยวกับการตั้งรูปแบบปุ่มด้วย CSS มากขึ้น โปรดเรียน CSS ปุ่ม วิธีต่อไป

เมนูที่ตอบสนอง

ปรับขนาดหน้าต่างเครื่องข่าย TIY ของคุณเพื่อดูผลลัพธ์ ขณะที่ความกว้างของหน้าจอต่ำกว่า 600 พิกเซล ให้สองคอลัมน์ทับกันด้านบน-ด้านล่างแทนที่ข้างซ้าย-ข้างขวา

อันระดับสูง:ตัวอย่างที่จะใช้ คำสั่ง media query มาสร้างฟอร์มที่ตอบสนอง ในบทดั้งต่อไป คุณจะเรียนรู้มากมายเกี่ยวกับเรื่องที่เกี่ยวข้อง

ดูเมนูที่ตอบสนอง