Φόρμες 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 για να προσθέσετε χώρο μέσα στο πεδίο κειμένου.

Συμβουλή: Όταν έχετε πολλές εισαγωγές η μία μετά την άλλη, ίσως θέλετε επίσης να προσθέσετε κάποιο περιθώριο, για να προσθέσετε περισσότερο χώρο έξω από αυτά:

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 σε border-box. Αυτό διασφαλίζει ότι η επένδυση και τελικά τα περιγράμματα περιλαμβάνονται στο συνολικό πλάτος και ύψος των στοιχείων.
Διαβάστε περισσότερα σχετικά με την ιδιότητα 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>

Έγχρωμες εισόδους

Χρησιμοποιήστε την ιδιότητα background-color για να προσθέσετε ένα χρώμα φόντου στην είσοδο και την ιδιότητα 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>

Εισαγωγή με εικονίδιο/εικόνα

Εάν θέλετε ένα εικονίδιο μέσα στην είσοδο, χρησιμοποιήστε την ιδιότητα background-image και τοποθετήστε το με το background-position ιδιοκτησία. Σημειώστε επίσης ότι προσθέτουμε μια μεγάλη αριστερή γέμιση για να κρατήσουμε χώρο στο εικονίδιο:

Παράδειγμα

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 για να κινούμε το πλάτος της εισόδου αναζήτησης όταν εστιάζει. Θα μάθετε περισσότερα σχετικά με την ιδιότητα μετάβαση αργότερα, στο κεφάλαιο Μεταβάσεις 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>

Styling Textareas

Συμβουλή: Χρησιμοποιήστε την ιδιότητα αλλαγή μεγέθους για να αποτρέψετε την αλλαγή μεγέθους των περιοχών κειμένου (απενεργοποιήστε το "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>

Styling Επιλέξτε Μενού

Παράδειγμα

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.

Αποκρινόμενη φόρμα

Αλλάξτε το μέγεθος του παραθύρου του προγράμματος περιήγησης για να δείτε το αποτέλεσμα. Όταν η οθόνη έχει πλάτος μικρότερο από 600 εικονοστοιχεία, κάντε τις δύο στήλες να στοιβάζονται η μία πάνω στην άλλη αντί να βρίσκονται η μία δίπλα στην άλλη.

Σύνθετες: Το παρακάτω παράδειγμα χρησιμοποιεί ερωτήματα πολυμέσων για τη δημιουργία μιας αποκριτικής φόρμας. Θα μάθετε περισσότερα για αυτό σε επόμενο κεφάλαιο.

Δοκιμάστε το μόνοι σας →

<!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>