Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > HTML-Tutorial > Umfassende Kenntnisse über HTML-Formulare

Umfassende Kenntnisse über HTML-Formulare

迷茫
Freigeben： 2017-03-25 15:23:30
Original
2518 Leute haben es durchsucht

8.1 Formular-Tag

...... .< ;/form>

☟ Formularattribute:

◆ Aktion: Das Serverprogramm, mit dem das Formular angegeben wird, legt fest, wann das Formular übermittelt wird Wann und wohin Formulardaten gesendet werden sollen. Der Wert der Aktion ist: Erstens 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 (dh den Formularelementwert) und verarbeitet sie entsprechend . Beispiel:

Wenn der Benutzer dieses Formular absendet, führt der Server einen allgemeinen Handler namens „reg.ashx“ aus. Zweitens verwenden Sie die URL-Adresse des Mailto-Protokolls, das den Formularinhalt als E-Mail sendet. Diese Situation kommt relativ selten vor, da hierfür ein E-Mail-Versandprogramm installiert und ordnungsgemäß auf dem Computer des Besuchers eingerichtet werden muss. Drittens bedeutet ein Nullwert, dass die Aktion null ist oder nicht geschrieben wurde.

◆ Methode: Dieses Attribut definiert, wie der Browser die Daten im Formular an den Server-Handler übermittelt. Am häufigsten werden Get und Post verwendet. Die Get-Methode wird standardmäßig verwendet.

Was ist der Unterschied zwischen get und post?

① Datenabfrage: Wenn Sie beispielsweise ein Forum durchsuchen, enthält die URL im Allgemeinen Informationen wie Kategorie, Seitenzahl, Anzahl der Datensätze pro Seite usw. Mit der get-Methode sehen Sie auf einen Blick, welche Informationen (Bedingungen) Sie abfragen möchten. Da der Beitrag diese Informationen verbirgt, ist es umständlich, die Abfragebedingungen zu überprüfen.

② Übermittlung sensibler Daten (Sicherheit): Bei Änderungen oder Ergänzungen an einem Datensatz, wie z. B. der Registrierung eines Benutzers, der Änderung von Benutzerinformationen usw. Durch die an die URL angehängte Get-Methode werden vertrauliche Informationen preisgegeben. Die Post-Methode kann vertrauliche Informationen verbergen.

Demo:

Nachdem Sie auf „Senden“ mit der Get-Methode geklickt haben: Die URL lautet: php中文网/ashx/login.ashx?login_username=admin&login_pswd=123456

Klicken Sie mit der Post-Methode Nach der Übermittlung wird die URL zu: php Chinese website/ashx/login.ashx ☜ Sie können sehen, dass es sich nur um die durch die Aktion angegebene URL handelt und die Parameter nicht an die URL angehängt werden.

③ Big-Data-Textübermittlung: Obwohl get für Abfragen praktisch ist, da es an die URL angehängt wird, hat jeder Browser auch eine Längenbeschränkung für die URL. IE: 2048 Zeichen. Chrome und FF scheinen 8182 Zeichen zu haben. Der Beitrag scheint keine solche Einschränkung zu haben.

◆ onsubmit: wird verwendet, um die Skriptfunktion für die Verarbeitung des Formulars anzugeben

◆ enctype: Legen Sie den MIME-Typ fest, der Standardwert ist application/x-www-form-urlencoded. Wenn Sie Dateien auf den Server hochladen müssen, sollten Sie dieses Attribut auf multipart/form-data setzen

8.2 Eingabe-Tag

Die meisten Formularelemente können verwenden Eingabedefinition: Um alle Daten zu identifizieren, müssen wir das Namensattribut zum Formularelement hinzufügen, daher ist Name ein erforderliches Attribut, name="Feldname"

(1) Textfeldtext

Die Eingabeinformationen werden im Klartext angezeigt 

用户名: <input type="text" name="user" />
Nach dem Login kopieren

Die folgenden sind die Hauptattribute des einzeiligen Textfelds:

Name (Name, der als Bezeichner in den Skriptdaten abgerufen werden kann), Maxlength (Legen Sie die maximale Anzahl von Zeichen fest, die in das Textfeld eingegeben werden können), Größe (Länge des Textfelds, ungefähr in Bytes)

Wert: Geben Sie den Standardwert des Textfelds an, der sich im Browser befindet. Der Wert, der im Textfeld angezeigt wird, wenn das Formular zum ersten Mal angezeigt wird oder nachdem der Benutzer auf die Schaltfläche „Zurücksetzen“ geklickt hat.

readonly: schreibgeschütztes Attribut Wenn das schreibgeschützte Attribut festgelegt ist, kann das Textfeld den Fokus erhalten, aber der Benutzer kann den Wert im Textfeld nicht ändern.

deaktiviert: Wenn das Textfeld deaktiviert ist, kann es nicht den Fokus erlangen. Natürlich kann der Benutzer den Wert des Textfelds nicht ändern. Und beim Absenden des Formulars sendet der Browser den Wert dieses Textfelds nicht an den Server.

(2)PasswortfeldPasswort

Geben Sie die eingegebenen Zeichen mit den Symbolen „*“ oder „●“ wieder und spielen Sie somit ab Rolle der Vertraulichkeit

密码: <input type="password" name="pwd" />
Nach dem Login kopieren

(3) Versteckte Domäne versteckt

Die versteckte Domäne wird von den Zuschauern nicht gesehen. Sie wird hauptsächlich im Wert verwendet in der Lieferdomäne verschiedener Seiten festgelegt 

<input type="hidden" name="hid" value="域值">
Nach dem Login kopieren

(4) Dateidomäne Datei

Die Dateidomäne kann die lokale <🎜 übergeben >Datei-Upload auf den Server Es gibt keinen Standardwert für den Datei-Upload. Bei Verwendung dieser Funktion muss das Methodenattribut im Formular-Tag angegeben werden. Um die Methode als Post anzugeben, wird das enctype-Attribut als multipart/form-data angegeben. Andernfalls kann der Dateiinhalt nicht hochgeladen werden 

<input type="file" name="photo">
Nach dem Login kopieren

(5) Optionsfeld

Treffen Sie eine einzelne Auswahl in einer Reihe von Optionen, dargestellt durch ein rundes Kästchen

Verwendung: Um die Funkauswahlfunktion zu implementieren, müssen die Namenswerte gleich sein. Verwenden Sie eine Gruppe von Optionsfeldern mit demselben Namen und legen Sie unterschiedliche Werte für verschiedene Optionsfelder fest. Auf diese Weise können Sie anhand des Werts des angegebenen Namens ermitteln, wer ausgewählt ist, ohne dass eine separate Beurteilung erforderlich ist. Der Elementwert des Optionsfelds wird explizit durch das Wertattribut 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="female" checked="checked"> <!-- checked表示此项被默认选中,单复选都适用 -->
女:<input type="radio" name="gender" value="male"/>  <!-- 像这些用户不能填写的表单元素，我们需要设置一些值给用户进行选择。 -->
Nach dem Login kopieren

(6) Kontrollkästchen „Schaltfläche aktivieren“

在一组选项中进行多项选择，以一个方框表示

爱好: <input type="checkbox" name="hobby[m1]" value="music"/>音乐
<input type="checkbox" name="hobby[m2]" value="trip"/>旅游
<input type="checkbox" name="hobby[m3]" value="reading"/>阅读
Nach dem Login kopieren

(7)提交按钮 submit

用于将表单内容提交到指定服务器处理程序或指定客户端脚本进行处理

<input type="submit" name="按钮名称" value="按钮显示文本">
Nach dem Login kopieren

普通按钮 button

用于激发提交表单动作，配合JavaScript脚本对表单执行处理操作

<input type="button" value="按钮显示文本" onclick="javascript函数名" name="按钮名称">
Nach dem Login kopieren

重置按钮 reset

用于清楚表单中所输入的内容，将表单内容恢复成默认的状态

<input type="reset" name="按钮名称" value="按钮显示文本">
Nach dem Login kopieren

图像按钮 image

按钮外形以图像表示，功能与提交按钮一样，具有提交表单内容的作用

<input type="image" name="按钮名称" src="图像路径" width="宽" height="高">
Nach dem Login kopieren

(8)选择列表标记