IT-Kurs HTML-Grundlagen 013_Formulare und Benutzereingaben

Formulare

HTML-Formulare (Form) sind ein sehr wichtiger Teil von HTML. Sie ermöglichen es Benutzern, Informationen auf einer Webseite einzugeben und diese Informationen an den Server zu übermitteln.

Beispiel:

1
<form action="/submit" method="post">
2
  <!-- Formularelemente kommen hier hin -->
3
</form>

Das <form>-Element definiert den Bereich, in dem Benutzer Daten eingeben können, und kann verschiedene Arten von Eingabeelementen enthalten, wie Textbereiche <textarea>, Dropdown-Listen <select>, Optionsfelder <radio>, Kontrollkästchen <checkbox> und Schaltflächen <button> usw.

Formularattribute:

• action: Definiert die URL der Verarbeitungsdatei auf dem Server, an die die Formulardaten übermittelt werden.
• method: Definiert die HTTP-Methode, die zum Senden der Daten an den Server verwendet wird. Häufig verwendete Werte sind “get” und “post”.
• name: Wird verwendet, um den Namen des Formulars anzugeben. Der Formularname dient zur Identifizierung des Formulars und wird bei der serverseitigen Verarbeitung der Formulardaten verwendet.
• enctype: Wird verwendet, um die Kodierungsmethode der Formulardaten anzugeben. Formulardaten können mit application/x-www-form-urlencoded oder multipart/form-data kodiert werden.
• autocomplete: Wird verwendet, um anzugeben, ob die automatische Vervollständigungsfunktion des Formulars aktiviert ist. Wenn auf on gesetzt, füllt der Browser automatisch die zuvor eingegebenen Daten im Formular aus.
• novalidate: Wird verwendet, um anzugeben, ob die Formulardaten validiert werden sollen. Wenn auf on gesetzt, werden die Formulardaten vor der Übermittlung nicht validiert.

[!Zusammenfassung]

• Das form-Element selbst ist nicht sichtbar.

Textfelder

In Formularen müssen Benutzer häufig Text wie Buchstaben und Zahlen eingeben. Dies kann mit dem <input>-Element erreicht werden, dessen type-Attribut auf “text” gesetzt ist.

Beispiel:

1
<form>
2
Name: <input type="text" name="name"><br>
3
Alter: <input type="text" name="age">
4
</form>

Effekt:

[!Zusammenfassung]

• In den meisten Browsern beträgt die Standardbreite von Textfeldern 20 Zeichen.

Kennwortfelder

Wenn Sie möchten, dass Benutzer ein Kennwort eingeben, können Sie das type-Attribut des <input>-Elements auf “password” setzen. Der eingegebene Inhalt wird dann verborgen.

Beispiel:

1
<form>
2
Kennwort: <input type="password" name="pwd">
3
</form>

Effekt:

[!Zusammenfassung]

• Kennwortfeldzeichen werden nicht im Klartext angezeigt, sondern durch Sternchen * oder Punkte . ersetzt.

Optionsfelder (Radio Buttons)

Optionsfelder und Kontrollkästchen ermöglichen es Benutzern, eine oder mehrere aus mehreren Optionen auszuwählen. Der type-Attributwert von Optionsfeldern ist “radio”.

Beispiel:

1
<form action="">
2
Geschlecht:
3
<input type="radio" name="sex" value="male" checked>Männlich
4
<input type="radio" name="sex" value="female">Weiblich
5
</form>

Effekt:

[!Zusammenfassung]

• Das name-Attribut der Optionsfelder muss identisch sein, sonst gehören sie nicht zur selben Gruppe.
• Das checked-Attribut wird verwendet, um anzugeben, ob das Optionsfeld standardmäßig ausgewählt ist.

Kontrollkästchen (Checkboxes)

Kontrollkästchen können eine oder mehrere Optionen auswählen, definiert mit <input type="checkbox">

Beispiel:

1
<form>
2
  Von Ihnen verwendete Apps:
3
  <input type="checkbox" name="app" value="jd">JD
4
  <input type="checkbox" name="app" value="wechat">WeChat
5
  <input type="checkbox" name="app" value="qq">QQ
6
  <input type="checkbox" name="app" value="douyin">Douyin
7
</form>

Effekt:

[!Zusammenfassung]

• Das checked-Attribut wird verwendet, um anzugeben, ob das Kontrollkästchen standardmäßig ausgewählt ist.

Dropdown-Listen (select)

Dropdown-Listen ermöglichen es Benutzern, eine aus mehreren Optionen auszuwählen. Sie werden mit dem <select>-Element erstellt und verwenden <option>-Elemente zur Definition der Optionen.

Beispiel:

1
<form action="">
2
  Bitte wählen Sie Ihr Land:
3
  <select name="country">
4
    <option value="china">China</option>
5
    <option value="us">USA</option>
6
    <option value="japan">Japan</option>
7
  </select>
8
</form>

Effekt:

[!Zusammenfassung]

• Das selected-Attribut wird verwendet, um die Standardoption der Dropdown-Liste anzugeben.
• Das disabled-Attribut wird verwendet, um anzugeben, ob die Dropdown-Liste verfügbar ist.
• Sie können das size-Attribut verwenden, um die Anzahl der sichtbaren Optionen in der Dropdown-Liste anzugeben.

Absende-Schaltflächen (Submit, Reset, Button)

Formulare benötigen normalerweise eine Schaltfläche zum Absenden oder Bestätigen der Benutzereingabe. submit, reset und button sind alle Formular-Schaltflächenelemente in HTML.

Beispiel:

1
<form action="/submit" method="post">
2
  <input type="submit" value="Absende-Schaltfläche">
3
  <input type="reset" value="Zurücksetzen-Schaltfläche">
4
  <button type="button" value="Bestätigen-Schaltfläche">Bestätigen-Schaltfläche</button>
5
  <input type="image" src="[zhaojian-avatar.png (1332×1332)](https://www.zhaojian.net/images/zhaojian-avatar.png)" alt="Bild-Schaltfläche" width="50" height="50">
6
</form>

Effekt:

[!Zusammenfassung]

• post: Bezieht sich auf die HTTP POST-Methode. Formulardaten werden im Formularkörper enthalten und dann an den Server gesendet, wird für die Übermittlung sensibler Daten wie Benutzername und Kennwort verwendet.
• get: Standardwert, bezieht sich auf die HTTP GET-Methode. Formulardaten werden an die URL des action-Attributs angehängt, mit ? als Trennzeichen, wird normalerweise für nicht sensitive Informationen wie Paginierung verwendet. Zum Beispiel: https://www.zhaojian.net/?page=1, hier ist page=1 die mit der get-Methode übermittelten Daten.

Formularelemente und Attribute