แบบฟอร์ม CSS

สารบัญ

รูปลักษณ์ของแบบฟอร์ม HTML สามารถปรับปรุงได้อย่างมากด้วย CSS:

First Name Last Name Country

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<style>
input[type=text], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=submit] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

div {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}
</style>
<body>

<h3>Using CSS to style an HTML Form</h3>

<div>
  <form action="/action_page.php">
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name..">

    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lastname" placeholder="Your last name..">

    <label for="country">Country</label>
    <select id="country" name="country">
      <option value="australia">Australia</option>
      <option value="canada">Canada</option>
      <option value="usa">USA</option>
    </select>
  
    <input type="submit" value="Submit">
  </form>
</div>

</body>
</html>

ฟิลด์อินพุตสไตล์

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

First Name

ตัวอย่าง

input
{
  width: 100%;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style> 
input {
  width: 100%;
}
</style>
</head>
<body>

<h2>A full-width input field</h2>

<form>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname">
</form>

</body>
</html>

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

input[type=text]: - จะเลือกเฉพาะช่องข้อความเท่านั้น
input[type=password]: - จะเลือกเฉพาะช่องรหัสผ่านเท่านั้น
input[type=number]: - จะเลือกเฉพาะช่องตัวเลขเท่านั้น
: ฯลฯ

อินพุตแบบบุนวม

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

เคล็ดลับ: เมื่อคุณป้อนข้อมูลหลายรายการต่อกัน คุณอาจทำได้ ต้องการเพิ่ม margin บางส่วนเพื่อเพิ่มพื้นที่ ภายนอก:

First Name Last Name

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style> 
input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}
</style>
</head>
<body>

<h2>Padded input fields</h2>

<form>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname">
  <label for="lname">Last Name</label>
  <input type="text" id="lname" name="lname">
</form>

</body>
</html>

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

อินพุตแบบมีขอบ

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

First Name

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style> 
input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 2px solid red;
  border-radius: 4px;
}
</style>
</head>
<body>

<h2>Input fields with borders</h2>

<form>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname">
  <label for="lname">Last Name</label>
  <input type="text" id="lname" name="lname">
</form>

</body>
</html>

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

First Name

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style> 
input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: none;
  border-bottom: 2px solid red;
}
</style>
</head>
<body>

<h2>Input fields with bottom border</h2>

<form>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname">
  <label for="lname">Last Name</label>
  <input type="text" id="lname" name="lname">
</form>

</body>
</html>

อินพุตแบบสี

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

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style> 
input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: none;
  background-color: #3CBC8D;
  color: white;
}
</style>
</head>
<body>

<h2>Input fields with color</h2>

<form>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname" value="John">
  <label for="lname">Last Name</label>
  <input type="text" id="lname" name="lname" value="Doe">
</form>

</body>
</html>

อินพุตที่เน้น

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

ใช้ตัวเลือก :focus เพื่อทำบางสิ่งกับช่องป้อนข้อมูลเมื่อได้รับการโฟกัส:

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style> 
input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 1px solid #555;
  outline: none;
}

input[type=text]:focus {
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>Input fields with color on :focus</h2>

<p>Here, the input field gets a color when it gets focus (clicked on):</p>

<form>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname" value="John">
  <label for="lname">Last Name</label>
  <input type="text" id="lname" name="lname" value="Doe">
</form>

</body>
</html>

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style> 
input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 3px solid #ccc;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  outline: none;
}

input[type=text]:focus {
  border: 3px solid #555;
}
</style>
</head>
<body>

<h2>Input fields with black border on :focus</h2>

<p>Here, the input field gets a black border color when it gets focus (clicked on). We have also added the CSS transition property to animate the border color (takes 0.5 seconds to change the color on focus):</p>

<form>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname" value="John">
  <label for="lname">Last Name</label>
  <input type="text" id="lname" name="lname" value="Doe">
</form>

</body>
</html>

ป้อนข้อมูลด้วยไอคอน/รูปภาพ

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

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style> 
input[type=text] {
  width: 100%;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  background-color: white;
  background-image: url('searchicon.png');
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding: 12px 20px 12px 40px;
}
</style>
</head>
<body>

<h2>Input field with an icon inside</h2>

<form>
  <input type="text" name="search" placeholder="Search..">
</form>

</body>
</html>

การป้อนข้อมูลการค้นหาแบบเคลื่อนไหว

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

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style> 
input[type=text] {
  width: 130px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  background-color: white;
  background-image: url('searchicon.png');
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding: 12px 20px 12px 40px;
  transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
  width: 100%;
}
</style>
</head>
<body>

<h2>Animate width of search input</h2>

<form>
  <input type="text" name="search" placeholder="Search..">
</form>

</body>
</html>

การจัดรูปแบบพื้นที่ข้อความ

เคล็ดลับ: ใช้คุณสมบัติ resize เพื่อป้องกันไม่ให้พื้นที่ข้อความถูกปรับขนาด (ปิดการใช้งาน "grabber" ที่มุมขวาล่าง):

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style> 
textarea {
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  font-size: 16px;
  resize: none;
}
</style>
</head>
<body>

<h2>Styling textarea</h2>

<p><strong>Tip:</strong> Use the resize property to prevent textareas from being resized (disable the "grabber" in the bottom right corner):</p>

<form>
  Some text...&lt;/textarea>
</form>

</body>
</html>

จัดแต่งทรงผม เลือกเมนู

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style> 
select {
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-radius: 4px;
  background-color: #f1f1f1;
}
</style>
</head>
<body>

<h2>Styling a select menu</h2>

<form>
  <select id="country" name="country">
  <option value="au">Australia</option>
  <option value="ca">Canada</option>
  <option value="usa">USA</option>
  </select>
</form>

</body>
</html>

ปุ่มป้อนข้อมูลสไตล์

ตัวอย่าง

input[type=button], input[type=submit], input[type=reset]
{
  background-color: #04AA6D;
  border: 
none;
  color: white;
  padding: 
16px 32px;
  text-decoration: none;
  
margin: 4px 2px;
  cursor: pointer;
}
/* Tip: use width: 100% for full-width buttons */

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style> 
input[type=button], input[type=submit], input[type=reset] {
  background-color: #04AA6D;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}
</style>
</head>
<body>

<h2>Styling form buttons</h2>

<input type="button" value="Button">
<input type="reset" value="Reset">
<input type="submit" value="Submit">

</body>
</html>

หากต้องการข้อมูลเพิ่มเติมเกี่ยวกับวิธีจัดสไตล์ปุ่มด้วย CSS โปรดอ่านบทช่วยสอนปุ่ม CSS ของเรา

แบบฟอร์มตอบรับ

ปรับขนาดหน้าต่างเบราว์เซอร์เพื่อดูเอฟเฟกต์ เมื่อหน้าจอกว้างน้อยกว่า 600px ให้ทั้งสองคอลัมน์วางซ้อนกันแทนที่จะวางติดกัน

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
}

input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}

input[type=submit] {
  background-color: #04AA6D;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}

input[type=submit]:hover {
  background-color: #45a049;
}

.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}

.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}

/* Clear floats after the columns */
.row::after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}
</style>
</head>
<body>

<h2>Responsive Form</h2>
<p>Resize the browser window to see the effect. When the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other.</p>

<div class="container">
  <form action="/action_page.php">
  <div class="row">
    <div class="col-25">
      <label for="fname">First Name</label>
    </div>
    <div class="col-75">
      <input type="text" id="fname" name="firstname" placeholder="Your name..">
    </div>
  </div>
  <div class="row">
    <div class="col-25">
      <label for="lname">Last Name</label>
    </div>
    <div class="col-75">
      <input type="text" id="lname" name="lastname" placeholder="Your last name..">
    </div>
  </div>
  <div class="row">
    <div class="col-25">
      <label for="country">Country</label>
    </div>
    <div class="col-75">
      <select id="country" name="country">
        <option value="australia">Australia</option>
        <option value="canada">Canada</option>
        <option value="usa">USA</option>
      </select>
    </div>
  </div>
  <div class="row">
    <div class="col-25">
      <label for="subject">Subject</label>
    </div>
    <div class="col-75">
      &lt;textarea id="subject" name="subject" placeholder="Write something.." style="height:200px">&lt;/textarea>
    </div>
  </div>
  <br>
  <div class="row">
    <input type="submit" value="Submit">
  </div>
  </form>
</div>

</body>
</html>

แบบฟอร์มที่ตรงกัน

ตัวอย่างวิธีจัดรูปแบบป้ายกำกับร่วมกับอินพุตเพื่อสร้างรูปแบบการจัดแนวแนวนอน:

First Name

Middle Name

Last Name

ตัวอย่าง

select
{
    color: green;
    display: 
inline-block;
    width: 130px;
    
text-align: right;
    padding-right: 15px; 
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style> 
.label {
  color: green;
  display: inline-block;
  width: 130px;
  text-align: right;
  padding-right: 15px; 
}

input[type=text] {
  width: 200px;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}
</style>
</head>
<body>

<p>Aligned form:</p>

<form>
  <div>
    <label for="fname10" class="label">First Name</label>
    <input type="text" id="fname10" name="firstname">
  </div>

  <div>
    <label for="mname" class="label">Middle Name</label>
    <input type="text" id="mname" name="lastname">
  </div>

  <div>
    <label for="lname10" class="label">Last Name</label>
    <input type="text" id="lname10" name="lastname">
  </div>
</form>

</body>
</html>