Das HTML -Formular wird verwendet, um verschiedene Arten von Benutzereingaben zu empfangen.
2. Der Arbeitsmechanismus der Form 3. Form Definition (<form> </form> Tags)Das HTML -Formular ist ein Bereich, der das Einheit -Element enthält. Formulare können Eingabelemente wie Textfelder, Kontrollkästchen, Einzelauswahlkästchen, Einreichungsschaltflächen usw. enthalten. Die Formulare können auch Menüs, Textbereiche, Fieldset, Legende und Etikettelemente enthalten. Beachten Sie, dass das Element <form> ein Block -Level -Element ist, das vor und nach einem Rabatt erzeugt.
<Form action = login.do method = post> <!-Formularelemente hier-> </form>4. Formattribut
Aktion: Siehe, wo die Formulardaten gesendet werden, wenn das Formular eingereicht wird. Aktion ist: Erstens erhält eine URL (absolute URL/Relative URL) im Server im Allgemeinen auf ein Programm auf dem Server, das Programm erhält die Daten (dh den Elementwert der Tabelleneinheit), das vom Formular für die entsprechende Verarbeitung übermittelt wird. Beispielsweise <Form Action = http://www.xxx.com/login.do> Wenn der Benutzer dieses Formular einreicht, führt der Server die allgemeine Website http://www.xxx.com/ Allgemeine Prozessprogramm aus. Zweitens verwenden Sie die URL -Adresse des Mailto -Protokolls, um den Formularinhalt in Form von E -Mails zu senden. Diese Situation ist selten, da der Besucher das E -Mail -Sendeprogramm auf dem Computer des Computers installieren und korrekt einstellen muss. Drittens, leerer Wert, wenn die Aktion leer oder nicht geschrieben ist, bedeutet dies, die an der aktuellen Seite übermittelt zu werden.
Methode: Dieses Attribut definiert die Art und Weise, wie der Browser die Daten im Formular in das Serververarbeitungsprogramm einreicht. In Bezug auf den Wert der Methode ist das am häufigsten verwendete Get and Post. Senden Sie zunächst die Formulardaten mit GET -Modus Die Datenmenge, die durch GET übertragen wird, ist im Allgemeinen unter 1 KB begrenzt. Zweitens sendet der Browser mit der Post -Methode die Formulardaten als Teil des HTTP -Anforderungsorganisation an den Server. Im Allgemeinen ist die von der Postmethode übertragenen Daten größer als die Menge der Daten, die von der GET -Methode übertragen werden. GET -Methode (z. B. Abfrage) sollte verwendet werden. Drittens andere Methoden (Kopf, Put, Löschen, Verfolgung oder Optionen usw.). Tatsächlich gab der anfängliche HTTP -Standard die entsprechende Methode für verschiedene Operationen an, aber viele von ihnen wurden später nicht beobachtet.
Ziel: Wohin gibt dieses Attribut das Ergebnis der von der im Aktion angegebenen URL zurückgegebenen URL an. Die Werte sind _blank (im neuen Fenster geöffnet), _ SEL (im selben Framework geöffnet, Standardwert), _Parent (im übergeordneten Rahmen geöffnet), _ oben (im gesamten Fenster geöffnet) und FrameName (im angegebenen Rahmenrahmen in China offen).
Titel: Legen Sie den von einer kleinen Boje angezeigten Text fest, wenn die Maus der Website -Besucher in jeder Position auf dem Formular platziert werden.
ENCTEPE: Es wird angegeben, wie die Formulardaten vor dem Senden an den Server codiert werden. Wert: Der Standardwert ist die Anwendung/x-www-form-rencoded -Data: Kein Zeichencode. Bei Verwendung eines Formulars mit einer Datei -Upload -Steuerung muss dieser Wert verwendet werden.
Name: Der Name des Formulars. Beachten Sie, dass der Differenz zwischen dem ID -Attribut: Name des Namens, der während der Kommunikation mit dem Server verwendet wird. .
2. Tischeinheitselement 1. Einzeltextfeld <Eingabetyp = Text/> (Der Standardwert der Typ -Eigenschaft der Eingabe ist Text)<Eingabe type = text name = name/>
Das Folgende ist das Hauptattribut des einzelnen Textfelds:
<Eingabe type = Passwort name = name/>3. einzelne Taste <Eingabetyp = Radio/>
Verwendung: Verwenden Sie eine einzelne Auswahlschaltfläche mit demselben Namen. Der Elementarwert des Optionsfelds wird explizit durch das Wert -Attribut festgelegt.
<Eingabe type = Radio name = Geschlechtswert = männlich/> <Eingabetyp = Radio name = Geschlechtswert = weiblich/>4. Kontrollkästchen <Eingabetyp = Kontrollkästchen/>
Verwenden Sie die Schaltfläche für die Schaltfläche, dh denselben Satz von Schaltflächen mit demselben Namen, der Elementwert des Elements der Taste -Taste -Taste -Einheit wird explizit durch das Wert -Attribut festgelegt. und der Name werden verpackt und an den Wert gesendet复选框的 geprüft 属性表示是否被选中 , <Eingabetyp = Kontrollkästchen geprüft /> 或者 <Eingabetyp = Kontrollkästchen checked = checked /> (推荐) Überprüft 、 readonly 等这种一个可选值的属性都可以省略属性值Wesen
<Eingabetyp = Checkbox Name = Sprachwert = Java/> <Eingabetyp = Kontrollkästchen Name = Laanguage Value = C/> <Eingabetyp = Kontrollkästchen Name = Laanguage Va lue = C#/>5. Hidden Domain <Eingabetyp = Hidden/>
Die versteckte Domäne wird normalerweise verwendet, um Informationen an den Server zu senden, der nicht dem Benutzer angezeigt werden muss.
<Eingabetyp = Hidden name = Hidden Domain/>6. Datei -Upload <Eingabe type = Datei/>
Mit der Datei muss das EngeTe des Formulars auf MultiPart/Form-Data eingestellt werden, und das Methodeattribut ist post.
<Eingabename = Uploaded Datei id = Uploaded Datei type = Dateigröße = 60 Akzeptieren = Text/*/>7. Ziehbox <Select> Tag
<Select> Beschriftung Erstellen Sie ein Listenfeld, <option> Beschriftung, um ein Listenelement zu erstellen, <Selecy> Verwendet Nested <Option>, um gemeinsam eine Reihe von Optionen in einer Reihe von Optionen bereitzustellen.
Legen Sie eine Option zum Auswählen: <Option Selected> Beijing </Option> oder <Option Select = Selectd> Beijing </Option> (Empfehlungsmethode) können als Auswahlelement festgelegt werden. So erwerben Sie keine Wahl, fügen Sie einen <Optionswert = -1> -not ausgewählt- <option> hinzu und programmieren Sie dann den ausgewählten Wert ausgewählt, der von der Auswahl von IF-1 als nicht ausgewählt angesehen wird.
Mit der Option "Gruppen" kann die Option "Die Gruppe selbst nicht ausgewählt" verwendet werden.
<Selech> Marke und mehrere Attribute können aus der Auswahl gestattet werden (drücken Sie die Strg -Taste).
<select name = Landgröße = 10> <Optgroup Label = Africa> <Option Value = Gam> Gambia </Option> <Option Value = Madagascar </Option> <option> E = Nam> Namibia </option> </optgroup > <Optgroup Label = Europa> <Option Value = FRA> Frankreich </option> <Option Value = Russland </Option> <Option Wert = UK> UK> UK </Option> Tgroup> <Optgroup Label = North America> < Option Value = Can> Kanada </Option> <Option Value = Mex> Mexiko </Option> <Option Value = USA> USA </Option> </OPLCT>8. Multi -Line -Text <textArea> </textArea>
Multi -Line -Text <textarea> Erstellen Sie ein Textfeld, mit dem Multi -Line -Text, <textarea> keine Wertattribute, <textarea> text </textarea>, cols = 50, Rows = 15 Attribute angeben, die Anzahl der Zeilen und Spalten angeben , nicht angegeben, der Browser nimmt die Standardanzeige an.
<textArea name = textareacontent rows = 20 color = 50> Der anfängliche Inhalt des Multi -Line -Textfelds </textArea>9. <label> </label> Etikett
Sie können gewöhnliche Texte schreiben, um vor <Eingabetyp = Text> zu ändern. Wenn Sie jedoch auf den Modifikator -Text klicken, wird der Eingang nicht den Fokus erhalten, aber Sie können die Beschriftung verwenden. U (verstehen). AccessKey = U, ein weiteres Attribut der Etikett. Hinweis: So setzen Sie eine eindeutige ID für die geänderte Steuerung. Ich denke, die beiden Beschriftungen von <Label> </label> sind sehr nützlich für <Eingabe type = radio/> und <input tytyp = checkBox/>.
<Eingabe type = Radio name = Sex ID = männlicher value = 0 checked = checked /> <label für = männlich> männlich < /law> <Eingabe typ </Label> <Eingabe type = Radio name = sex id = geheimes Wert = 2/> <Label für = Geheimnis> Vertraulich </label>10. <Fieldset> </fieldset> Etikett
Das Fieldset -Tag teilt die Kontrolle in einen Bereich und sieht regelmäßiger aus.
<Feldset> <Legend> Hobbys </Legend> <Eingabetyp = Checkbox Value = Basketball/> <Eingabetyp = Checkbox Value = Mountain Climbing/<Eingabe -Typ = Kontrollkästchen Value = Reading/> </f ildset>11. Schaltfläche Senden <Eingabe Typ = Senden/>
Wenn ein Benutzer auf das vom <inputt type = subly/> angegebene Serververarbeitungsprogramm klickt, werden die Formulardaten an das vom Aktionsattribut des <form> beschriftete Serververarbeitungsprogramms übermittelt. Der Standard -Schaltflächentext unter dem chinesischen IE ist ein Anzeigtext der Schaltfläche Value Properties Modification.
<Eingabe type = Senden Wert = Senden/>12. Schaltfläche zurücksetzen <Eingabetyp = Reset/>
Wenn der Benutzer auf die Schaltfläche <Eingabetyp = Reset/> klickt, wird der Wert im Formular auf den Anfangswert zurückgesetzt. Wenn der Benutzer das Formular einreicht, wird der Name und der Wert der RESET -Schaltfläche nicht an den Server übermittelt.
<Eingabetyp = Reset Value = Reset -Taste/>13. Gewöhnliche Taste <Eingabetyp = Taste/>
Gewöhnliche Schaltflächen werden normalerweise verwendet, um einen Skriptcode auszuführen.
<Eingabetyp = Taste Wert = gewöhnliche Taste/>14. Bildschaltfläche <Eingabetyp = Bild/>
Das SRC -Attribut der Bildschaltfläche gibt die Bildquellendatei an, die kein Wertschaltattribut enthält. Die Bildschaltfläche kann den <Eingabe type = subieren/> ersetzen und jetzt können Sie auch das Erscheinungsbild der Taste <Eingabe type = subieren/> direkt auf ein Bild einstellen.
<Eingabetyp = Bild src = bg.jpg />Drittens Formular Beispiele
In diesem Beispiel handelt es sich um eine einfache Registrierungsseite, die mit dem Formular zur Verwendung des Formularlayouts implementiert ist.
<! > Tabelle {Breite: 450px; } </style> </head> <body style = Hintergrund-Color: Block; Post> <table align = center cellspacing = 0 cellpadding = 0> <td> Benutzername: </td> <Eingabe type = text/</tr> </tr> <tr> <td> Passwort: </td> < td> <Eingabe type = password/> </td> </tr> <tr>/</td> </tr> <l> <td> Wählen Sie den Markt aus: </td> <d> <Select> <optgroup label = China> <option> Provinz Gansu </option> </option> Provinz Henan Provinz Henan Provinz </option> <option> Shanghai </option> </optgroup> <optgroup label = American> <option> Kalifornien </ Option> <option> Chicago </option> <option> Nachrichten unter> </optgroup> </select> </td> </tr> <td> Bitte wählen Sie Geschlecht: </td> <td> <Eingabetyp = Radio name = Sex ID = männlicher Wert = 0 checked = checked/>> <label für = männlich> männlich </lable> <Eingabe type = Radio Name = Sex ID = 1/> <Label für = fMale> weiblich </label > <Eingabetyp = Radio Name = Sex ID = Secret va lue = 2/> <Label für = Geheimnis> Vertraulichkeit </label> </td> </tr> <td> Wählen Sie die Besetzung aus: </td> <Eingabe type = radio id = Schüler name = Beruf /> <Label für = Student> Schüler < /Label> <Eingabe type = Radio id = Lehrer Name = Beruf /> <Label für = Lehrer> Lehrer> <Eingabe type = Radio id = Andere Name = Beruf/> <Label für = andere> Andere </label> </td> </tr> <td> Bitte wählen Sie Hobbys: </td> <fieldset> <Legende> Ihre Hobbys </legend> <Eingabe type = Checkbox name = hobby id = basketboll checkd = checked /> <label for = basketBoll> Basketball spielen < /Label> <Eingabetyp = Kontrollkästchen Name = Hobb y id = run /> <Label für = Run> Run < /label < /label > <Eingabetyp = Checkbox Name = Hobby -ID = Read /> <Label für = lesen> lesen < /Label> <Eingabetyp = Kontrollkästchen Name = Hobby -ID = Surfing /> <Label für = SUR Fing> Internetzugang < /label < /label > </fieldset> </td> </tr> <l> <td> Bemerkungen: </td> <textarea color = 30> Dies ist der Anmerkungsinhalt </textArea> </td> </tr> Tr> <td> & nbsp; html>