CSS-Formulare

Inhaltsverzeichnis

Das Aussehen eines HTML-Formulars kann mit CSS erheblich verbessert werden:

First Name Last Name Country

Probieren Sie es selbst aus →

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

Eingabefelder gestalten

Verwenden Sie die Eigenschaft width, um die Breite des Eingabefelds zu bestimmen:

First Name

Beispiel

input
{
  width: 100%;
}

Probieren Sie es selbst aus →

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

Das obige Beispiel gilt für alle <input>-Elemente. Wenn du nur willst Um einen bestimmten Eingabetyp zu formatieren, können Sie Attributselektoren verwenden:

input[type=text]: - wählt nur Textfelder aus
input[type=password]: - wählt nur Passwortfelder aus
input[type=number]: - wählt nur Zahlenfelder aus
: usw..

Gepolsterte Eingänge

Verwenden Sie die Eigenschaft padding, um Platz im Textfeld hinzuzufügen.

Tipp: Wenn Sie viele Eingaben hintereinander haben, kann dies der Fall sein Ich möchte auch etwas Rand hinzufügen, um mehr Platz zu schaffen außerhalb von ihnen:

First Name Last Name

Beispiel

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

Probieren Sie es selbst aus →

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

Beachten Sie, dass wir die Eigenschaft box-sizing auf gesetzt haben Grenzfeld. Dadurch wird sichergestellt, dass die Polsterung und eventuelle Ränder im Bild enthalten sind Gesamtbreite und Höhe der Elemente.
Lesen Sie mehr über die Eigenschaft box-sizing in unserem Kapitel zur CSS-Boxgröße.

Umrandete Eingaben

Verwenden Sie die Eigenschaft border, um die Rahmengröße und -farbe zu ändern Verwenden Sie die Eigenschaft border-radius, um abgerundete Ecken hinzuzufügen:

First Name

Beispiel

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

Probieren Sie es selbst aus →

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

Wenn Sie nur einen unteren Rand wünschen, verwenden Sie die Eigenschaft border-bottom:

First Name

Beispiel

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

Probieren Sie es selbst aus →

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

Farbige Eingaben

Verwenden Sie die Eigenschaft background-color, um der Eingabe eine Hintergrundfarbe hinzuzufügen die Eigenschaft color, um die Textfarbe zu ändern:

Beispiel

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

Probieren Sie es selbst aus →

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

Fokussierte Inputs

Standardmäßig fügen einige Browser eine blaue Umrandung um die Eingabe hinzu, wenn sie empfangen wird Fokus (angeklickt). Sie können dieses Verhalten entfernen, indem Sie outline: none; zur Eingabe hinzufügen.

Verwenden Sie den Selektor :focus, um etwas mit dem Eingabefeld zu tun, wenn es den Fokus erhält:

Beispiel

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

Probieren Sie es selbst aus →

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

Beispiel

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

Probieren Sie es selbst aus →

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

Eingabe mit Icon/Bild

Wenn Sie ein Symbol innerhalb der Eingabe wünschen, verwenden Sie die Eigenschaft background-image und positionieren Sie es mit dem Code background-position Eigentum. Beachten Sie auch, dass wir einen großen linken Abstand hinzufügen, um den Platz für das Symbol zu reservieren:

Beispiel

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

Probieren Sie es selbst aus →

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

Animierte Sucheingabe

In diesem Beispiel verwenden wir die CSS-Eigenschaft transition, um die Breite der Sucheingabe zu animieren, wenn sie den Fokus erhält. Mehr über die Eigenschaft Transition erfahren Sie später in unserem Kapitel „CSS-Übergänge“.

Beispiel

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

Probieren Sie es selbst aus →

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

Textbereiche gestalten

Tipp: Verwenden Sie die Eigenschaft resize, um zu verhindern, dass die Größe von Textbereichen geändert wird (deaktivieren Sie den „Grabber“ in der unteren rechten Ecke):

Beispiel

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

Probieren Sie es selbst aus →

<!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-Auswahlmenüs

Beispiel

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

Probieren Sie es selbst aus →

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

Eingabeschaltflächen gestalten

Beispiel

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 */

Probieren Sie es selbst aus →

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

Weitere Informationen zum Gestalten von Schaltflächen mit CSS finden Sie in unserem Tutorial zu CSS-Schaltflächen.

Responsives Formular

Ändern Sie die Größe des Browserfensters, um den Effekt zu sehen. Wenn der Bildschirm weniger als 600 Pixel breit ist, stapeln Sie die beiden Spalten übereinander statt nebeneinander.

Erweitert: Das folgende Beispiel verwendet Medienabfragen, um ein responsives Formular zu erstellen. Mehr dazu erfahren Sie in einem späteren Kapitel.

Probieren Sie es selbst aus →

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

Ausgerichtetes Formular

Ein Beispiel dafür, wie Beschriftungen zusammen mit Eingaben gestaltet werden, um ein horizontal ausgerichtetes Formular zu erstellen:

First Name

Middle Name

Last Name

Beispiel

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

Probieren Sie es selbst aus →

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