HTML Forms


Advertisements

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
actionBackend-Skript bereit, Ihre Bestanden daten zu verarbeiten.
methodMethode verwendet werden, um Daten hochzuladen. Die am häufigsten verwendeten Methoden sind GET und POST.
targetGeben 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

  • Checkboxen Bedienelemente

  • Radio Feld-Steuerelemente

  • Select Box Kontrollen

  • Dateiauswahlboxen

  • versteckte Steuerelemente

  • anklickbare Buttons

  • Submit und Reset-Taste

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:

First name: Last name:

Attribute

Es folgt die Liste der Attribute für<Eingangs >Tag für schaffen Textfeld

Attribut Beschreibung
typeZeigt die Art des Eingangskontrolle und für die Texteingabe Steuer es wird sein set zutext.
nameverwendet 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.
sizeErmöglicht zu angeben Breite des Texteingabesteuer hinsichtlich der Zeichen .
maxlengthErmö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:

User ID :   Password:

Attribute

Es folgt die Liste der Attribute für <Eingangs> Tag für Passwortfeld zu schaffen.

Attribut Beschreibung
typeZeigt die Art des Eingangskontrolle und für die Texteingabe Steuer es wird sein set zutext.
nameverwendet 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.
sizeErmöglicht zu angeben Breite des Texteingabesteuer hinsichtlich der Zeichen .
maxlengthErmö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:

Description:

Attribute

Es folgt die Liste der Attribute für <Textbereich> tag.

AttributBeschreibung
name verwendet, um geben einen Namen zu die Steuerung, die an den Server gesendet wird und erhalten den Wert.
rowsGibt die Anzahl der Zeilen von Textbereich ein.
colsGibt 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:

Maths Physics

Attribute

Es folgt die Liste der Attribute für <Kontrollkästchen> tag.

AttributeBeschreibung
typeZeigt die Art des Eingangskontrolle und für Kontrollkästchen Eingangssteuer es wird sein set zu Kontrollkästchen.
nameverwendet, um geben einen Namen für die Steuerung, die an den Server gesendet wird erkannt und erhalten den Wert.
valueDer Wert, der verwendet wird, wenn das Kontrollkästchen ausgewählt ist.
checkedSet 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:

Maths Physics

Attribute

Es folgt die Liste der Attribute für Radio-Button.

AttributeBeschreibung
typeZeigt die Art des Eingangskontrolle und für Kontrollkästchen Eingangssteuer es wird sein set zu radio.
nameverwendet, um geben einen Namen für die Steuerung, die an den Server gesendet wird erkannt und erhalten den Wert.
valueDer Wert, der verwendet wird, wenn das Funkfeld gewählt ist.
checkedSet 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
nameverwendet, 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.
multipleWenn set zu "multiple" dann ermöglicht ein Benutzer mehrere Artikel aus dem Menü .

Nach ist die Liste der wichtigsten Attribute <option> tag:

AttributeBeschreibung
value Der Wert, der verwendet wird, wenn eine Option in der Select-Box gewählt ist.
selectedGibt an, dass diese Option sollte der anfänglich gewählten Wert sein, wenn die Seite geladen .
labelEine 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:

AttributeBeschreibung
nameverwendet, um geben einen Namen für die Steuerung, die an den Server gesendet wird erkannt und erhalten den Wert.
acceptGibt 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 :

TypBeschreibung
submitDies schafft eine Taste, die automatisch ein Formular.
resetDies schafft eine Taste, die automatisch zurücksetzt Formular-Steuerelemente auf ihre Anfangswerte..
buttonDies erzeugt eine Schaltfläche, die verwendet wird, um eine Client-seitige Skript auslösen, wenn der Benutzer auf diese Schaltfläche.
imageDies 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::

This is page 10

Advertisements