Umfassende Kenntnisse über HTML-Formulare

8.1 Formular-Tagff9c23ada1bcecdd1a0fb5d5a0f18437

60e9b9321a8051d47b6151a9dcb61eaa...... .< ;/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-Tagd5fd7aea971a85678ba271703566ebfd

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" />

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" />

(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="域值">

(4) Dateidomäne Datei

Die Dateidomäne kann die lokale 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">

(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"/>  <!-- 像这些用户不能填写的表单元素，我们需要设置一些值给用户进行选择。 -->

(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"/>阅读

(7)提交按钮 submit

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

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

普通按钮 button

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

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

重置按钮 reset

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

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

图像按钮 image

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

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

(8)选择列表标记221f08282418e2996498697df914ce4e

8.1 选择列表：一次可以选择多个列表选项，且一次可以显示1个以上列表选项的选择列表

select 标记用于声明选择列表，option标记用于设置各个选项

<select name="列表名称" size="显示的选项数目(默认为1)" multiple="multiple"><!-- multiple设置列表中的项目可多选 -->
<option value="banana" selected="selected">香蕉</option><!-- selected设置默认选项，可设置多个 -->
<option value="apple">苹果</option>
<option value="watermelon" selected="selected">西瓜</option>
<option value="grape" selected="selected">葡萄</option>
</select>

8.2 下拉列表：一次只能选择一个列表选项，且一次只能显示一个列表选项的选择列表，即size默认1不能设置 size和 multiple属性

<select name="area">
<optgroup label="国外"> <!-- <optgroup> 标签用于组合选项，即给选项分组类别,属性为label,指定选项组合名称 -->
<option value="1">华盛顿</option>
<option value="2">旧金山</option>
</optgroup>
<optgroup label="国内">
<option value="3">广州</option>
<option value="4">湛江</option>
</optgroup>
</select>

(9)文本域标记4750256ae76b6b9d804861d8f69e79d3

一般用于给用户填写备注信息或留言信息的多行多列文本区域

<textarea name="文本区域名称" rows="行数" cols="字符数">
...(此处输入的为默认文本，比如)请在此处输入备注信息
</textarea>

(10)2e1cf0710519d5598b1f0f14c36ba674 标签:为 input 元素定义标注（标记）

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

注意："for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。即为下面说的隐式的联系。

隐式和显式的联系：

标记通常以下面两种方式中的一种来和表单控件相联系：将表单控件作为标记标签的内容，这样的就是隐式形式，或者为 2e1cf0710519d5598b1f0f14c36ba674 标签下的 for 属性命名一个目标表单 id，这样就是显式形式。

显式的联系：

<label for="SSN">Social Security Number:</label>
<input type="text" name="SocSecNum" id="SSN" />

隐式的联系：

<label>Date of Birth: <input type="text" name="DofB" /></label>

(11)fieldset 标签：把表单中元素组合起来，通俗的讲就是把表单围起来，顺便给个标题注释，看起来更规整。

基本语法：2b5469ab79cf842344327415c3b3bb95 e911751791aa3ba95dc724e2fb905976...a814477f903c8e27bd1ff8e5c6bbe7c1 ff9c23ada1bcecdd1a0fb5d5a0f18437...f5a47148e367a6035fd7a2faa965022e a3ae74428855f48d0438405a4619fe75

demo：

<fieldset>
<legend>我最喜爱的:</legend>
<label for="computer">计算机</label> <input type="checkbox" value="1" id="fav" name="fav" />
<label for="trval">旅游</label> <input type="checkbox" value="2" id="fav" name="fav" />
<label for="buy">购物</label> <input type="checkbox" value="3" id="fav" name="fav" />
</fieldset>

Das obige ist der detaillierte Inhalt vonUmfassende Kenntnisse über HTML-Formulare. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!