Welche Rolle spielen Formulare im Web-Frontend?

Das Formular hat zwei Funktionen: 1. Für Benutzer ist es eine Schnittstelle zur Dateneingabe und -übermittlung. 2. Für Websites ist es eine Möglichkeit, Benutzerinformationen zu erhalten. Ein Formular besteht aus drei Grundkomponenten: 1. Das Formular-Tag, das die URL des CGI-Programms enthält, das zur Verarbeitung der Formulardaten verwendet wird, und die Methode zum Senden der Daten an den Server. 2. Das Formularfeld, das das Textfeld enthält. Passwortfeld, verstecktes Feld und mehrzeilige Textfelder usw.; 3. Formularschaltflächen, einschließlich Senden-Schaltflächen, Reset-Schaltflächen und allgemeine Schaltflächen, werden verwendet, um Daten an CGI-Skripte auf dem Server zu übertragen oder Eingaben abzubrechen usw.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Dell G3-Computer.

Das Formular im Web-Frontend

Die Rolle des Formulars auf der Webseite ist hauptsächlich für die Funktion der Datenerfassung verantwortlich Adresse des Besuchers, Fragebogen, Gästebuch usw. warten.

Die Rolle des Formulars:

• Für den Benutzer ist das Formular eine Schnittstelle zur Dateneingabe und -übermittlung;

• Für die Website ist das Formular eine Möglichkeit, Benutzerinformationen zu erhalten.

Ein Formular besteht aus drei Grundkomponenten:

• Formular-Tag <form></form>: Dieses enthält die URL des CGI-Programms, das zur Verarbeitung der Formulardaten verwendet wird, und die URL des Daten, die an die Servermethode übermittelt werden. <form></form>：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 

• 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。

• 表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

表单标签<form></form>

form标签用于创建供用户输入的HTML表单（表单域），以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。

form表单域中可以包含各种交互控件--控件标签（文本字段、复选框、单选框、提交按钮等等），比如、、、等标签。

标签语法格式

<form action="提交地址" method="提交方式" name="表单名称">
    各种表单控件
</form>

method提交方式常用的4种：

get         一般用来查询信息
post        一般用来新增信息
put         一般用来修改信息
delete      一般用来删除信息

表单域和表单按钮

input标签

• input 输入的意思
• <input />标签为单标签
• type属性设置不同的属性值用来指定不同的控件类型
• 除了type属性还有别的属性

type="text"为普通输入框 value为里面的值 name和id会在写js的时候用

    <form action="url地址" method="提交方式" name="表单名称">
        <input type="text" name="" id="" value="你好">
    </form>

input标签的一些属性:

checked属性只有单选框和复选框才有

Formularfelder: einschließlich Textfelder, Passwortfelder, ausgeblendete Felder, mehrzeilige Textfelder, Kontrollkästchen, Optionsfeldfelder, Dropdown-Auswahlfelder und Datei-Upload-Felder usw. Formular-Tag <input />-Tag ist ein einzelnes TagZusätzlich zum Typattribut Es gibt noch andere Attributetype="text" ist das normale Eingabefeld, value ist der darin enthaltene Wert, Name und ID werden beim Schreiben von js verwendet

<input type="password" name="" id="" value="">

AttributeAttributwertBeschreibung Einzeiliges TexteingabefeldPassworteingabefeldOptionsfeldKontrollkästchenNormaler ButtonSenden-ButtonReset-ButtonSenden-Schaltfläche in BildformTextfeld Der Name des Bereichs

	Formularschaltflächen: einschließlich Absenden-Schaltflächen, Reset-Schaltflächen und allgemeine Schaltflächen zum Übertragen von Daten an CGI-Skripte auf dem Server oder zum Abbrechen von Eingaben können auch zur Steuerung anderer Verarbeitungsaufgaben mit definierten Verarbeitungsskripten verwendet werden.
	Das Formular-Tag wird zum Erstellen eines HTML-Formulars (Formularfeld) für Benutzereingaben verwendet, um die Erfassung und Übermittlung von Benutzerinformationen zu erreichen an den Server übermittelt.	Formularfelder können verschiedene interaktive Steuerelemente (Textfelder, Kontrollkästchen, Schaltflächen zum Senden usw.) enthalten, z. B. < ; und andere Tags. Die Bedeutung der Eingabeeingabe
Das Typattribut legt verschiedene Attributwerte fest, um verschiedene Steuerelementtypen anzugeben
	Einige Attribute des Eingabe-Tags:< /code></td><td></td>< code>Das aktivierte Attribut ist nur für Optionsfelder und Kontrollkästchen verfügbar
	Typ	Text
		Passwort
		Radio
		Kontrollkästchen
		Button
		Senden
		Zurücksetzen
		Bild
		Datei
	Name

🎜🎜Wert🎜🎜🎜🎜🎜Der Standardtextwert im Eingabesteuerelement🎜🎜🎜🎜Größe🎜 🎜🎜🎜 🎜Die Anzeigebreite des Eingabesteuerelements auf der Seite Kontrolle🎜🎜🎜🎜

密码框

<input type="password" name="" id="" value="">

单选框

name相同的单选框智能选择一个

        男 <input type="radio" name="gender" id="" value=""> 
        女 <input type="radio" name="gender" id="" value="">

复选框

多选框可以选取多个

        爱好： <br> 
        抽烟<input type="checkbox" name="hobby" id="" value=""> 
        喝酒<input type="checkbox" name="hobby" id="" value=""> 
        烫头<input type="checkbox" name="hobby" id="" value="">

按钮

普通按钮可以根据需求来用js添加功能

提交按钮会把输入的表单信息提交到form表单的action地址

重置按钮会把表单信息重置为默认

    <form action="url地址" method="提交方式" name="表单名称">
        <input type="button" name="" id="" value="我是一个普通按钮">
        <input type="submit" name="" id="" value="我是一个提交按钮">
        <input type="reset" name="" id="" value="我是一个重置按钮">
    </form>

下拉框标签

下拉框标签有点特殊，不是input的属性而是一个单独的标签

        <select name="省市区" id="">
            <option value="">山东</option>
            <option value="">北京</option>
            <option value="">江苏</option>
            <option value="">深圳</option>
            <option value="">上海</option>
        </select>

相关推荐：《html视频教程》

Das obige ist der detaillierte Inhalt vonWelche Rolle spielen Formulare im Web-Frontend?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!