HTML Forms
HTML-Formulare sind erforderlich, wenn Sie einige Daten von der Website-Besucher zu sammeln möchten. Zum Beispiel während Benutzerregistrierung Sie möchten Informationen wie Name, E-Mail-Adresse, Kreditkarte, etc. zu sammeln.
Ein Formular wird von der Eingangs Website-Besucher nehmen und dann werde nach es zu einem Back-End-Anwendung, wie zB CGI, ASP-Skript oder PHP-Skript usw. Die Back-End-Anwendung werden ausführen erforderliche Verarbeitung auf der übergebenen daten Basierend auf definierten führen Business-Logik in der Anwendung.
Es gibt verschiedene Formularelemente Verfügung wie Textfelder , Textbereichfelder, Drop-Down-Menüs, Radiobuttons, Checkboxen, etc.
Die HTML <form> Tag wird verwendet, um ein HTML-Formular zu erstellen und es hat folgende Syntax:
<form action="Script URL" method="GET|POST">
form elements like input, textarea etc.
</form>
Formular-Attribute
auseinander aus gemeinsamen Attribute, folgende ist einer Liste der am häufigsten verwendeten Form Attribute:
| Attribut | Beschreibung |
|---|
| action | Backend-Skript bereit, Ihre Bestanden daten zu verarbeiten. |
| method | Methode verwendet werden, um Daten hochzuladen. Die am häufigsten verwendeten Methoden sind GET und POST. |
| target | Geben an das Zielfenster oder Frame, wo das Ergebnis des Skripts werden sein angezeigt. Es dauert Werte wie _blank, _self, _parent etc. |
| enctype | Sie können die enctype Attribut verwenden, um festzulegen, wie der Browser codiert die Daten, bevor sie sendet es an den Server. Mögliche Werte sind:
application/x-www-form-urlencoded - Dies ist die Standard-Methode verwenden die meisten Formen in einfachen Szenarien. mutlipart/form-data - Dieser wird verwendet, wenn Sie binäre Daten in Form von Dateien wie Bilder, Word-Datei hochladen möchten etc
|
Hinweis: Sie können beziehen zu Perl & CGI für ein detail zu wie Form Daten hochladen Werke.
HTML Form Kontrollen
Es gibt verschiedene Arten von Formular-Steuerelemente, die Sie kann verwenden, um sammeln Daten mit Hilfe von HTML Form :
-
Text Input-Steuerelemente p> li>
-
Checkboxen Bedienelemente p> li>
-
Radio Feld-Steuerelemente p> li>
-
Select Box Kontrollen p> li>
-
Dateiauswahlboxen p> li>
-
versteckte Steuerelemente p> li>
-
anklickbare Buttons p> li>
-
Submit und Reset-Taste p> li>
Text Input-Steuerelemente
Es gibt drei Arten der Texteingabe Verwendet auf Formularen :
Single-Line-Texteingabekontrollen - Diese Steuerung wird Gebrauchte für Artikel die nur eine Zeile des Benutzers Eingang erfordern, wie SuchBoxen oder Namen verwendet. Sie werden mit Hilfe von HTML erstellt;<Eingang > tag.
Passworteingabe steuert - Dies ist auch eine einzige Zeile Text eingabe aber es masken der Charakter so bald wie ein Benutzer betritt es. sie werden auch unter Verwendung HTML erstellt <Eingang > tag.
Multi-Line-Texteingabekontrollen- Diese wird verwendet, wenn der Benutzer benötigt, um Details, die mehr sein kann als ein einzelner Satz geben. Multi-Line-Input-Kontrollen werden mit HTML <Textbereich> tag.
Single-Line-Texteingabekontrollen
Diese Steuerung wird verwendet für Artikel, die nur eine Zeile des Benutzers Eingangs erfordern, wie SuchBoxen oder Namen .Sie werden mit Hilfe von HTML erstellt<Eingang> tag.
Beispiel
Hier ist ein basic Beispiel für ein einzeiliges Texteingabe verwendet werden Vorname und Nachname zu nehmen:
<!DOCTYPE html>
<html>
<head>
<title>Text Input Control</title>
</head>
<body>
<form >
First name: <input type="text" name="first_name" />
Last name: <input type="text" name="last_name" />
</form>
</body>
</html>
Dies wird folgendes Ergebnis produzieren:
Attribute
Es folgt die Liste der Attribute für<Eingangs >Tag für schaffen Textfeld
| Attribut | Beschreibung |
|---|
| type | Zeigt die Art des Eingangskontrolle und für die Texteingabe Steuer es wird sein set zutext. |
| name | verwendet um geben einen Namen zu die Steuerung, die an den Server gesendet wird erkannt und erhalten den Wert. |
| value | Dies kann verwendet werden um liefern einen erste wert innen der Kontrolle. |
| size | Ermöglicht zu angeben Breite des Texteingabesteuer hinsichtlich der Zeichen . |
| maxlength | Ermöglicht zu angeben maximale Anzahl von Zeichen, die ein Benutzer kann in das Textfeld eingeben . |
Passworteingabe steuert
Dies ist auch eine einzige Zeile Text eingabe aber es masken der Charakter so bald wie ein Benutzer betritt es. sie werden auch unter Verwendung HTML erstellt <Eingang> Tag aber type-Attribut auf Passwort.
Beispiel
Hier ist ein einfaches Beispiel für ein einzeiliges Passworteingabe verwendet werden, um Benutzer-Passwort zu nehmen:
<!DOCTYPE html>
<html>
<head>
<title>Password Input Control</title>
</head>
<body>
<form >
User ID : <input type="text" name="user_id" />
<br>
Password: <input type="password" name="password" />
</form>
</body>
</html>
Dies wird folgendes Ergebnis produzieren:
Attribute
Es folgt die Liste der Attribute für <Eingangs> Tag für Passwortfeld zu schaffen.
| Attribut | Beschreibung |
|---|
| type | Zeigt die Art des Eingangskontrolle und für die Texteingabe Steuer es wird sein set zutext. |
| name | verwendet um geben einen Namen zu die Steuerung, die an den Server gesendet wird erkannt und erhalten den Wert. |
| value | Dies kann verwendet werden um liefern einen erste wert innen der Kontrolle. |
| size | Ermöglicht zu angeben Breite des Texteingabesteuer hinsichtlich der Zeichen . |
| maxlength | Ermöglicht zu angeben maximale Anzahl von Zeichen, die ein Benutzer kann in das Textfeld eingeben. |
mehrzeilige Texteingabesteuer
Diese wird verwendet, wenn der Benutzer benötigt, um Details, die länger als ein einziger Satz sein kann, zu geben. Multi-Line-Eingang Kontrollen werden mit HTML erstellt <Textbereich> tag.
Beispiel
Hier ist ein einfaches Beispiel für ein mehrzeiliges Texteingabe zur Artikelbeschreibung nehmen:
<!DOCTYPE html>
<html>
<head>
<title>Multiple-Line Input Control</title>
</head>
<body>
<form>
Description:
<textarea rows="5" cols="50" name="description">
Enter description here...
</textarea>
</form>
</body>
</html>
Dies wird folgendes Ergebnis produzieren:
Attribute
Es folgt die Liste der Attribute für <Textbereich> tag.
| Attribut | Beschreibung |
|---|
| name | verwendet, um geben einen Namen zu die Steuerung, die an den Server gesendet wird und erhalten den Wert. |
| rows | Gibt die Anzahl der Zeilen von Textbereich ein. |
| cols | Gibt die Anzahl der Spalten der Textbereich Box |
Checkbox Kontrolle
Checkboxen werden verwendet, wenn mehr als eine Option ist erforderlich, um gewählt werden. sie sind auch mit HTML erstellt;<Eingangs > Tag aber type-Attribut auf eingestellt istKontrollkästchen.
Beispiel
Hier ist ein Beispiel HTML-Code für ein Formular mit zwei Checkboxen:
<!DOCTYPE html>
<html>
<head>
<title>Checkbox Control</title>
</head>
<body>
<form>
<input type="checkbox" name="maths" value="on"> Maths
<input type="checkbox" name="physics" value="on"> Physics
</form>
</body>
</html>
Dies wird folgendes Ergebnis produzieren:
Attribute
Es folgt die Liste der Attribute für <Kontrollkästchen> tag.
| Attribute | Beschreibung |
|---|
| type | Zeigt die Art des Eingangskontrolle und für Kontrollkästchen Eingangssteuer es wird sein set zu Kontrollkästchen. |
| name | verwendet, um geben einen Namen für die Steuerung, die an den Server gesendet wird erkannt und erhalten den Wert. |
| value | Der Wert, der verwendet wird, wenn das Kontrollkästchen ausgewählt ist. |
| checked | Set auf überprüft wenn Sie es standardmäßig ausgewählt werden soll. |
Radio Button Kontrolle
Radio-Tasten werden verwendet, wenn von vielen Optionen, nur eine Option ist erforderlich, um gewählt werden. sie sind auch mit HTML erstellt<Eingangs> Tag aber type-Attribut aufradio.
Beispiel
Hier ist beispielsweise HTML-Code für ein Formular mit zwei Radio-Buttons:
<!DOCTYPE html>
<html>
<head>
<title>Radio Box Control</title>
</head>
<body>
<form>
<input type="radio" name="subject" value="maths"> Maths
<input type="radio" name="subject" value="physics"> Physics
</form>
</body>
</html>
Dies wird folgendes Ergebnis produzieren:
Attribute
Es folgt die Liste der Attribute für Radio-Button.
| Attribute | Beschreibung |
|---|
| type | Zeigt die Art des Eingangskontrolle und für Kontrollkästchen Eingangssteuer es wird sein set zu radio. |
| name | verwendet, um geben einen Namen für die Steuerung, die an den Server gesendet wird erkannt und erhalten den Wert. |
| value | Der Wert, der verwendet wird, wenn das Funkfeld gewählt ist. |
| checked | Set auf überprüft wenn Sie wollen, zur Auswahl es in der Standardeinstellung. |
Wählen Box Kontrolle
Ein AuswahlBox, auch als Drop-Down-Box die Option bietet, um in Form von Drop-Down-Liste, von wo aus ein Benutzer eine oder mehrere Optionen wählen Liste unten verschiedene Optionen.
Beispiel
Hier ist beispielsweise HTML-Code für ein Formular mit einem Dropdown-Box
<!DOCTYPE html>
<html>
<head>
<title>Select Box Control</title>
</head>
<body>
<form>
<select name="dropdown">
<option value="Maths" selected>Maths</option>
<option value="Physics">Physics</option>
</select>
</form>
</body>
</html>
Dies wird folgendes Ergebnis produzieren:
Attribute
Es folgt die Liste der wichtigsten Attribute<wählen> tag:
| Attribute | Beschreibung |
|---|
| name | verwendet, um geben einen Namen für die Steuerung, die an den Server gesendet wird erkannt und erhalten den Wert. |
| size | Dies kann verwendet werden, um eine Auswahlliste Feld zu präsentieren. |
| multiple | Wenn set zu "multiple" dann ermöglicht ein Benutzer mehrere Artikel aus dem Menü . |
Nach ist die Liste der wichtigsten Attribute <option> tag:
| Attribute | Beschreibung |
|---|
| value | Der Wert, der verwendet wird, wenn eine Option in der Select-Box gewählt ist. |
| selected | Gibt an, dass diese Option sollte der anfänglich gewählten Wert sein, wenn die Seite geladen . |
| label | Eine alternativer Weg, Beschriftungsmöglichkeiten |
Datei-Upload-Box
Wenn Sie wollen zu einem Benutzer eine Datei auf Ihre Website hochladen möchten, müssen Sie eine Datei-Upload-Box, auch bekannt als eine Datei wählen box . Dies wird auch mit der erstellt <Eingangs> Element, sondern type-Attribut auf gesetztDatei.
Beispiel
Hier ist beispielsweise HTML-Code für ein Formular mit einem Datei-Upload-Feld:
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type="file" name="fileupload" accept="image/*" />
</form>
</body>
</html>
Dies wird folgendes Ergebnis produzieren:
Attributes
Es folgt die Liste der wichtigsten Attribute der Datei-Upload-Feld:
| Attribute | Beschreibung |
|---|
| name | verwendet, um geben einen Namen für die Steuerung, die an den Server gesendet wird erkannt und erhalten den Wert. |
| accept | Gibt die Typen von Dateien, die der Server akzeptiert. |
Knopf-Kontrollen
Es gibt verschiedene Möglichkeiten in HTML, um anklickbare Schaltflächen erstellen. Sie können auch einen anklickbaren Button mit <Eingangs> Tag indem Einstellung Sie seine type-Attribut auf Taste . Das Attribut type kann nehmen folgende Werte :
| Typ | Beschreibung |
|---|
| submit | Dies schafft eine Taste, die automatisch ein Formular. |
| reset | Dies schafft eine Taste, die automatisch zurücksetzt Formular-Steuerelemente auf ihre Anfangswerte.. |
| button | Dies erzeugt eine Schaltfläche, die verwendet wird, um eine Client-seitige Skript auslösen, wenn der Benutzer auf diese Schaltfläche. |
| image | Dies erzeugt einen anklickbaren Button, aber wir können ein Bild als Hintergrund der Schaltfläche zu verwenden. |
Beispiel
Hier ist beispielsweise HTML-Code für ein Formular mit drei Arten von Tasten:
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset" value="Reset" />
<input type="button" name="ok" value="OK" />
<input type="image" name="imagebutton" src="/html/images/logo.png" />
</form>
</body>
</html>
Dies wird folgendes Ergebnis produzieren:
Versteckte Form Controls
Versteckte Formular-Steuerelemente werden verwendet, um Daten in der Seite, die später auf den Server geschoben werden verstecken. Diese Steuerung versteckt in den Code und nicht auf der aktuellen Seite angezeigt. So wird beispielsweise folgenden versteckten Form verwendet wird, um aktuelle Seitenzahl zu halten. Wenn ein Benutzer klicken Sie auf der nächsten Seite wird der Wert des versteckten Steuer wird zum Web-Server gesendet werden, und es wird es entscheiden, welche Seite wurde angezeigt als nächstes auf der aktuellen Seite übergeben basieren.
Beispiel
Hier ist beispielsweise HTML-Code, um die Nutzung von versteckten Steuer zeigen:
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<p>This is page 10</p>
<input type="hidden" name="pagename" value="10" />
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset" value="Reset" />
</form>
</body>
</html>
Dies wird folgendes Ergebnis produzieren::
