HTML-Formular_PowerNode Java Academy

1. Formular

1. Die Rolle des Formulars

HTML-Formulare werden verwendet, um verschiedene Arten von Benutzereingaben zu empfangen und Daten an den Server zu übertragen, wenn der Benutzer das Formular absendet, wodurch eine Interaktion zwischen dem Benutzer und dem Webserver ermöglicht wird.

2. So funktioniert das Formular

3. Formulardefinition (<form></form>-Tags)

Ein HTML-Formular ist ein Bereich, der Formularelemente enthält. Formulare werden mit dem Tag <form> erstellt. Ein Formular kann Eingabeelemente wie Textfelder, Kontrollkästchen, Optionsfelder, Senden-Schaltflächen usw. enthalten. Formulare können auch Menüs, Textbereiche, Feldsätze, Legenden und Beschriftungselemente enthalten. Beachten Sie, dass das <form>-Element ein Element auf Blockebene ist und vor und nach ihm Zeilenumbrüche auftreten.

     <form action="login.do" method="post">
     <!--Hier kommen Formularelemente hin-->
     </form>

4. Formulareigenschaften

Aktion: Gibt an, wohin die Formulardaten gesendet werden sollen, wenn das Formular übermittelt wird. Der Aktionswert ist: zunächst eine URL (absolute URL/relative URL), die im Allgemeinen auf ein Programm auf der Serverseite verweist. Das Programm empfängt die vom Formular übermittelten Daten (also den Formularelementwert) und verarbeitet sie entsprechend. Beispiel: <form action="http://www.XXX.com/login.do">: Wenn der Benutzer dieses Formular absendet, führt der Server das allgemeine Verarbeitungsprogramm mit dem Namen "login.do" unter der URL "http://www.XXX.com/" aus. Zweitens verwenden Sie die URL-Adresse des Mailto-Protokolls, wodurch der Formularinhalt als E-Mail gesendet wird. Dies kommt relativ selten vor, da auf dem Computer des Besuchers ein Programm zum Senden von E-Mails installiert und richtig konfiguriert sein muss. Drittens: leerer Wert. Wenn die Aktion leer ist oder nicht geschrieben wird, bedeutet dies, dass die aktuelle Seite übermittelt wird.

Methode: Dieses Attribut definiert, wie der Browser die Daten im Formular an den Server-Handler übermittelt. Was die Methodenwerte betrifft, werden am häufigsten „get“ und „post“ verwendet. Wenn Sie zum Senden von Formulardaten die Get-Methode verwenden, hängt der Webbrowser zunächst jedes Formularfeldelement und seine Daten im URL-Parameterformat an die durch das Aktionsattribut des <form>-Tags angegebene URL-Adresse an und sendet sie an den Webserver. Aufgrund der Längenbeschränkung der URL ist die mit der Get-Methode übertragene Datenmenge im Allgemeinen auf weniger als 1 KB begrenzt. Zweitens sendet der Browser mithilfe der Post-Methode die Formulardaten als Teil des HTTP-Anforderungstexts an den Server. Im Allgemeinen ist die mit der Post-Methode übertragene Datenmenge größer als die mit der Get-Methode übertragene. Gemäß dem HTML-Standard sollte die Get-Methode verwendet werden, wenn das Serverprogramm, das das Formular verarbeitet, die auf dem Server gespeicherten Daten nicht ändert (z. B. Abfrage). Wenn das Ergebnis der Formularverarbeitung Änderungen an den auf dem Server gespeicherten Daten bewirkt, sollte die Post-Methode verwendet werden (z. B. Hinzufügungs-, Lösch- und Änderungsvorgänge). Drittens andere Methoden (Head, PUT, DELETE, TRACE oder OPTIONS usw.). Tatsächlich spezifizierte der ursprüngliche HTTP-Standard entsprechende Methoden für verschiedene Vorgänge, viele davon wurden später jedoch nicht befolgt und in den meisten Fällen war die einfache Verwendung von „get“ oder „post“ ausreichend.

Ziel: Dieses Attribut gibt an, wo die von der im Aktionsattribut angegebenen URL zurückgegebenen Ergebnisse angezeigt werden sollen. Die Werte sind _blank (in einem neuen Fenster öffnen), _self (im selben Frame öffnen, Standard), _parent (im übergeordneten Frame öffnen), _top (im gesamten Fenster öffnen) und framename (im angegebenen Frame öffnen).

Titel: Legt den Text fest, den der Browser mit einem kleinen Float anzeigt, wenn der Website-Besucher die Maus irgendwo auf dem Formular platziert.

enctype: Gibt an, wie die Formulardaten codiert werden sollen, bevor sie an den Server gesendet werden. Wert: Der Standardwert ist „application/x-www-form-urlencoded“. Alle Zeichen werden kodiert, bevor sie an den Server gesendet werden (Leerzeichen werden in „+“-Pluszeichen umgewandelt und Sonderzeichen in ASCII-HEX-Werte); „multipart/form-data“: Zeichen werden nicht kodiert. Dieser Wert ist erforderlich, wenn Sie ein Formular verwenden, das ein Steuerelement zum Hochladen von Dateien enthält.

Name: Der Name des Formulars. Beachten Sie den Unterschied zwischen dem Namensattribut und dem ID-Attribut: Das Namensattribut ist der Name, der bei der Kommunikation mit dem Server verwendet wird; das ID-Attribut ist der Name, der vom Browser verwendet wird. Dieses Attribut wird hauptsächlich in CSS und JavaScript verwendet, um die Client-Programmierung zu erleichtern.

2. Formularelemente

1. Einzeiliges Textfeld <input type="text"/> (der Standardwert des Eingabetyp-Attributs ist „Text“)

<Eingabetyp = "Text" Name = "Name"/>

Im Folgenden sind die Haupteigenschaften eines einzeiligen Textfelds aufgeführt:

1. Größe: Gibt die Breite des Textfelds in Zeichen an; in den meisten Browsern beträgt die Standardbreite des Textfelds 20 Zeichen.
2. Wert: Gibt den Standardwert des Textfelds an. Dies ist der Wert, der im Textfeld angezeigt wird, wenn der Browser das Formular zum ersten Mal anzeigt oder der Benutzer auf die Schaltfläche <input type="reset"/> klickt.
3. maxlength: Gibt die maximale Zeichenlänge der Benutzereingabe an.
4. readonly: Nur-Lese-Attribut. Wenn das Nur-Lese-Attribut gesetzt ist, kann das Textfeld den Fokus erhalten, aber der Benutzer kann den Wert im Textfeld nicht ändern.
5. deaktiviert: Deaktiviert. Wenn das Textfeld deaktiviert ist, kann es nicht den Fokus erhalten. Natürlich kann der Benutzer den Wert des Textfelds nicht ändern. Und wenn das Formular abgeschickt wird, sendet der Browser den Wert des Textfelds nicht an den Server.

2. Kennwortfeld <input type="password"/>

<input type="Passwort" name="Name"/>

3. Optionsfeld <input type="radio"/>

Verwendung: Verwenden Sie eine Gruppe von Optionsfeldern mit demselben Namen und legen Sie für verschiedene Optionsfelder unterschiedliche Werte fest. Auf diese Weise können Sie wissen, wer ausgewählt wird, indem Sie den Wert des angegebenen Namens übernehmen, ohne individuelle Urteile fällen zu müssen. Der Elementwert eines Optionsfelds wird explizit durch das Value-Attribut festgelegt. Beim Absenden des Formulars werden der Wert und der Name des ausgewählten Elements verpackt und gesendet, ohne dass der Wert explizit festgelegt wird.

    <input type="radio" name="gender" value="männlich"/> 
    <input type="radio" name="gender" value="weiblich"/>

4. Kontrollkästchen <input type="checkbox"/>

Verwenden Sie eine Kontrollkästchengruppe, d. h. eine Gruppe von Kontrollkästchen mit demselben Namen. Der Elementwert des Kontrollkästchenformularelements wird explizit durch das Wertattribut festgelegt. Wenn der Ausdruck übermittelt wird, werden der Wert und der Name aller ausgewählten Elemente verpackt und gesendet, ohne dass der Wert explizit festgelegt wird. Das „checked“-Attribut eines Kontrollkästchens gibt an, ob es ausgewählt ist. <input type="checkbox" checked /> oder <input type="checkbox" checked="checked" /> (empfohlen) Bei Attributen mit einem optionalen Wert wie „checked“ und „readonly“ kann der Attributwert weggelassen werden.

     <input type="checkbox" name="language" value="Java"/> 
     <input type="checkbox" name="language" value="C"/>
     <input type="checkbox" name="language" value="C#"/>

5. Verstecktes Feld <input type="hidden"/>

Versteckte Felder werden häufig verwendet, um Informationen an den Server zu übermitteln, die dem Benutzer nicht angezeigt werden müssen.

<input type="hidden" name="Verstecktes Feld"/>

6. Datei-Upload <input type="file"/>

Wenn eine Datei verwendet wird, muss der Enctype des Formulars auf „multipart/form-data“ und das Methodenattribut POST gesetzt werden.

<input name="hochgeladeneDatei" id="hochgeladeneDatei" type="file" size="60" accept="text/*"/>

7. Dropdown-Feld <select>-Tag

Das Tag <select> erstellt ein Listenfeld und das Tag <option> erstellt ein Listenelement. <select> wird zusammen mit verschachtelten <option> verwendet, um eine Möglichkeit zur Auswahl aus einer Reihe von Optionen bereitzustellen.

Setzen Sie eine Option auf „Ausgewählt“: <option selected>Peking</option> oder <option selected="selected">Peking</option> (empfohlene Methode), um dieses Element als ausgewähltes Element festzulegen. Wie erreicht man „nicht ausgewählt“? Fügen Sie eine <option value="-1">--nicht ausgewählt--<option> hinzu und bestimmen Sie dann programmgesteuert den ausgewählten Wert. Wenn er -1 ist, gilt er als nicht ausgewählt.

Wählen Sie die Gruppierungsoption. Sie können optgroup verwenden, um die Daten zu gruppieren. Die Gruppe selbst wird nicht ausgewählt. Dies gilt sowohl für Dropdown-Listen als auch für Listenfelder.

Das <select>-Tag und das Multiple-Attribut ermöglichen Mehrfachauswahlen (drücken Sie zur Auswahl die STRG-Taste).

    <Wählen Sie Name="Land" Größe="10">
          <optgroup label="Afrika">
              <option value="gam">Gambia</option>
              <option value="mad">Madagaskar</option>
              <option value="nam">Namibia</option>
          </optgroup>
          <optgroup label="Europa">
              <option value="fra">Frankreich</option>
              <option value="rus">Russland</option>
             <option value="uk">Großbritannien</option>
         </optgroup>
         <optgroup label="Nordamerika">
             <option value="can">Kanada</option>
             <option value="mex">Mexiko</option>
             <option value="usa">USA</option>
         </optgroup>
     </Auswählen>

8. Mehrzeiliger Text <textarea></textarea>

Mehrzeiliger Text <textarea> erstellt ein Textfeld, in das Sie mehrere Textzeilen eingeben können. <textarea> hat kein Wertattribut, die Attribute <textarea>text</textarea>, cols="50", rows="15" geben die Anzahl der Zeilen und Spalten an. Wenn nicht angegeben, verwendet der Browser die Standardanzeige.

    <textarea name="textareaContent" rows="20" cols="50" >
             Der anfängliche Anzeigeinhalt des mehrzeiligen Textfelds</textarea> 

9. <label></label>-Tag

Sie können vor <input type="text"> normalen Text schreiben, um ihn zu dekorieren, aber die Eingabe erhält nicht den Fokus, wenn Sie auf den dekorierten Text klicken, aber Sie können ein Label verwenden. Das for-Attribut gibt die ID des zu dekorierenden Steuerelements an, <label for="txt1">content</label>;", dann drücken Sie Alt+U (zum Verstehen). accesskey="u", ein weiteres Attribut des Labels. Hinweis: Legen Sie eine eindeutige ID für das dekorierte Steuerelement fest. Ich denke, das Tag <label></label> ist für die beiden Tags <input type="radio"/> und <input type="checkbox"/> sehr nützlich.

   <input type="radio" name="sex" id="male" value="0" checked="checked" /><label for="male">Männlich</lable>
   <input type="radio" name="sex" id="fmale" value="1" /><label for="fmale">Weiblich</label>
   <input type="radio" name="sex" id="secret" value="2" /><label for="secret">Vertraulich</label>

10. <fieldset></fieldset>-Tag

Der Fieldset-Tag unterteilt das Steuerelement in einen Bereich und sorgt so für ein übersichtlicheres Erscheinungsbild.

 <Feldsatz>
    <legend>Hobbys</legend>
     <Eingabetyp="Kontrollkästchen" Wert="Basketball" />
     <input type="checkbox" value="Bergsteigen" />
     <input type="checkbox" value="Lesen" />
 </Feldsatz>

11. Senden-Schaltfläche <input type="submit"/>

Wenn der Benutzer auf die Schaltfläche „Senden“ von <inputt type="submit"/> klickt, werden die Formulardaten an den Server-Handler gesendet, der durch das Aktionsattribut des <form>-Tags angegeben ist. Der Standardtext der Schaltfläche im chinesischen IE lautet „Abfrage senden“. Sie können das Wertattribut festlegen, um den Anzeigetext der Schaltfläche zu ändern.

<input type="submit" value="Senden"/>

12. Reset-Taste <input type="reset"/>

Wenn der Benutzer auf die Schaltfläche <input type="reset"/> klickt, werden die Werte im Formular auf ihre Anfangswerte zurückgesetzt. Wenn der Benutzer das Formular absendet, werden der Name und der Wert der Schaltfläche zum Zurücksetzen nicht an den Server übermittelt.

<input type="reset" value="Reset-Schaltfläche"/>

13. Normale Schaltfläche <input type="button"/>

Ein normaler Button dient in der Regel dazu, beim Anklicken einen Skriptcode auszuführen.

<input Typ="Schaltfläche" Wert="Normale Schaltfläche"/>

14. Bild-Schaltfläche <input type="image"/>

Das src-Attribut einer Bildschaltfläche gibt die Bildquelldatei an und hat kein Wertattribut. Bildschaltflächen können <input type="submit"/> ersetzen, und jetzt können Sie das Erscheinungsbild der Schaltfläche <input type="submit"/> auch direkt über CSS auf ein Bild festlegen.

  <Eingabetyp="Bild" src="bg.jpg" />

3. Formularbeispiel

Dieses Beispiel ist eine einfache Registrierungsseite, die mithilfe eines Formulars im Tabellenlayout implementiert wurde.

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 01 Transitional//EN" "http://wwwworg/TR/html4/loosedtd">
   <html>
   <Kopf>
       <title>Registrierungsseite</title>
       <style type="text/css">
         Tisch
        {
             Breite: 450px;
             Rand: 1px durchgehend rot;
              Hintergrundfarbe: #FFCB29;
              Rahmen-Zusammenbruch: Zusammenbruch;
          }
          td
         {
             Breite: 200;
             Höhe: 40px;
             Rand: 1px tief schwarz;
          }
          Spanne
          {
              Hintergrundfarbe: rot;
          }
      </Stil>
  </Kopf>
  <body style="Hintergrundfarbe: blau; Hintergrundbild: URL (/Bild/bearjpg); Hintergrundwiederholung: Wiederholung;">
      <Formularname="Registrierungsformular" ID="Formular1" Aktion="" Methode="Post">
      <table align="center" cellspacing="0" cellpadding="0">
          <tr>
              <td>
                  Benutzername:
              </td>
              <td>
                  <Eingabetyp="Text" />
              </td>
          </tr>
          <tr>
              <td>
                  Passwort:
              </td>
              <td>
                  <input type="Passwort" />
              </td>
          </tr>
          <tr>
              <td>
                  Passwort bestätigen:
              </td>
              <td>
                  <input type="Passwort" />
              </td>
          </tr>
          <tr>
              <td>
                  Bitte wählen Sie eine Stadt:
              </td>
              <td>
                  <Auswählen>
                      <optgroup label="China">
                          <option>Provinz Gansu</option>
                          <option>Provinz Henan</option>
                          <option>Shanghai</option>
                      </optgroup>
                      <optgroup label="Amerikanisch">
                          <option>Kalifornien</option>
                          <option>Chicago</option>
                          <option>New York</option>
                      </optgroup>
                  </Auswählen>
              </td>
          </tr>
          <tr>
             <td>
                 Bitte Geschlecht auswählen:
            </td>
            <td>
                 <input type="radio" name="sex" id="male" value="0" checked="checked" /><label for="male">Männlich</lable>
                     <input type="radio" name="sex" id="fmale" value="1" /><label for="fmale">Weiblich</label>
                     <input type="radio" name="sex" id="secret" value="2" /><label for="secret">Vertraulich</label>
              </td>
          </tr>
          <tr>
              <td>
                  Bitte wählen Sie Ihren Beruf:
              </td>
              <td>
                  <input type="radio" id="student" name="Beruf" /><label for="student">Student</label>
                  <input type="radio" id="lehrer" name="beruf" /><label for="lehrer">Lehrer</label>
                  <input type="radio" id="others" name="profession" /><label for="others">Andere</label>
              </td>
          </tr>
          <tr>
              <td>
                  Bitte Hobbys auswählen:
              </td>
              <td>
                  <Feldsatz>
                      <legend>Deine Hobbys</legend>
                      <input type="checkbox" name="hobby" id="basketboll" checked="checked" /><label for="basketboll">Basketball spielen</label>
                      <input type="checkbox" name="hobby" id="run" /><label for="run">Laufen</label>
                     <input type="checkbox" name="hobby" id="read" /><label for="read">Lesen</label>
                     <input type="checkbox" name="hobby" id="surfing" /><label for="surfing">Surfen</label>
                 </Feldsatz>
             </td>
         </tr>
         <tr>
             <td>
                 Bemerkung:
             </td>
             <td>
                 <textarea cols="30">Hier ist der Notizinhalt</textarea>
             </td>
         </tr>
         <tr>
             <td>
                 &nbsp;
             </td>
             <td>
                 <input type="submit" value="Senden" />
                 <input type="reset" value="Zurücksetzen" />
             </td>
         </tr>
     </Tabelle>
     </form>
 </body>
 </html>