CSS-Einstellungsformular

Mit der Popularität des Internets und mobiler Geräte sind Formulare zu einem der am häufigsten verwendeten Elemente in Websites und Anwendungen geworden. Formulare können grundlegende Benutzerinformationen sammeln, Suchen durchführen, Inhalte übermitteln usw. und sind zu einem äußerst wichtigen Bestandteil des Interaktionsdesigns und des User Experience Designs geworden. Richtige Stileinstellungen können auch die Benutzerfreundlichkeit und Ästhetik des Formulars erheblich verbessern und dadurch die Benutzerzufriedenheit und die Konversionsraten erhöhen. In diesem Artikel wird erläutert, wie Sie CSS zum Formatieren von Formularen verwenden.

1. Die Grundstruktur eines Formulars

In HTML besteht ein Formular normalerweise aus einem Formular-Tag und einer Reihe von Eingabe-, Auswahl-, Textbereichs- und anderen Formularsteuerelementen. Das Folgende ist die einfachste Formularstruktur:

<form>
  <label>用户名：<input type="text" name="username"></label>
  <label>密码：<input type="password" name="password"></label>
  <input type="submit" value="提交">
</form>

Unter diesen wird das Label-Tag zum Zuordnen von Formularsteuerelementen und Formularbeschreibungstext verwendet, das Typattribut gibt den Steuerelementtyp an und das Namensattribut wird zum Benennen beim Senden von Formulardaten verwendet.

2. Allgemeine Stileinstellungen für Formulare

1. Einheitliche Schriftarten und Schriftgrößen

Durch die Angabe der Schriftarten und Schriftgrößen von Formularsteuerelementen im Stil kann das Formular ordentlich und konsistent aussehen und so die Lesbarkeit und Ästhetik verbessert werden. Das Codebeispiel lautet wie folgt:

form {
  font-family: Arial, san-serif;
  font-size: 14px;
}

2. Entfernen Sie das Standard-Erscheinungsbild und die Standardränder.

Die meisten Browser verfügen über einige Erscheinungsbilder und Rahmen für Formularsteuerelemente, und diese Standardstile entsprechen nicht unbedingt unseren Designanforderungen. Um diese standardmäßigen Erscheinungsbilder und Rahmen zu entfernen, können Sie den folgenden Code verwenden:

input[type=text], input[type=password], textarea {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  outline: none;
  background-color: #f5f5f5;
  padding: 5px;
}

Die CSS-Eigenschaften „appearance“ und „-webkit-appearance“ werden hier verwendet, um das Erscheinungsbild des Formulars auf „Keine“ zu setzen, die Rahmen und Umrisse zu entfernen und ein hinzuzufügen Hintergrundfarbe und Polsterung.

3. Legen Sie die Breite des Textfelds und des Passwortfelds fest.

Standardmäßig passt sich die Breite des Textfelds und des Passwortfelds an den Inhalt an. Um das Formular optisch übersichtlicher zu gestalten, können wir die Breite auf einen festen Wert festlegen, beispielsweise 300 Pixel. Das Codebeispiel lautet wie folgt:

input[type=text], input[type=password], textarea {
  width: 300px;
}

4. Den Dropdown-Box-Stil anpassen

Die Standarddarstellung des Dropdown-Felds entspricht möglicherweise nicht unseren Anforderungen. Sie können den Stil über den folgenden Code anpassen:

select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 960 960'><path d='M870.4 358.4l-358.4 358.4-358.4-358.4c-19.2-19.2-51.2-19.2-70.4 0-19.2 19.2-19.2 51.2 0 70.4l384 384c9.6 9.6 22.4 14.4 35.2 14.4s25.6-4.8 35.2-14.4l384-384c19.2-19.2 19.2-51.2 0-70.4-19.2-19.2-51.2-19.2-70.4 0z'/></svg>");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 20px;
  padding-right: 25px;
}

Setzen Aussehen und -webkit-appearance auf none hier, entfernen Sie das Standard-Erscheinungsbild, erstellen Sie dann mit CSS ein Hintergrundbild für den Pfeil des Dropdown-Felds und wenden Sie es schließlich mithilfe des Hintergrundbilds „background-repeat“ auf das Dropdown-Feld an , Hintergrundposition und Hintergrundgröße.

5. Stil für die Schaltfläche „Senden“ entwerfen

Die Schaltfläche „Senden“ ist die wichtigste Komponente des Formulars und muss normalerweise so gestaltet werden, dass sie sich von gewöhnlichen Schaltflächen unterscheidet. Sie können den folgenden Code verwenden, um den Stil festzulegen:

input[type=submit] {
  background-color: #01aef0;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

Hier stellen Sie die Hintergrundfarbe der Schaltfläche auf #01aef0 ein, stellen die Vordergrundfarbe auf Weiß ein, entfernen den Rand, stellen abgerundete Ecken und Abstände ein und stellen die Schriftgröße auf 16 ein Pixel und schließlich verwenden Cursor Das Attribut verwandelt den Cursor in eine Handform, um die Interaktivität der Schaltfläche zu verbessern.

3. Zusammenfassung

In der Frontend-Entwicklung und im Webdesign ist das Formular zweifellos ein sehr wichtiges Element, und die richtige Stileinstellung kann die Benutzerfreundlichkeit und Ästhetik des Formulars verbessern, was im Hinblick auf die Benutzererfahrung sehr wichtig ist Konvertierung. In diesem Artikel werden die häufig verwendeten Formularstileinstellungen in CSS vorgestellt. Bei alleiniger Verwendung ist jeder Stil wie ein unabhängiges Werkzeug. In der tatsächlichen Anwendung muss er jedoch entsprechend der tatsächlichen Situation flexibel kombiniert werden, um einen vollständigen Formularstil zu bilden Designanforderungen.

Das obige ist der detaillierte Inhalt vonCSS-Einstellungsformular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!