Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > HTML-Tutorial > Hauptteil

Grundlegendes HTML-Tutorial zur Interaktion mit Betrachtern und Formular-Tags

零下一度
Freigeben： 2017-05-12 13:57:01
Original
1504 Leute haben es durchsucht

1. Verwenden Sie Formular-Tags, um mit Benutzern zu interagieren 

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>表单标签</title>
 6 </head>
 7 <body>
 8 <form>
 9       <label for="username">用户名:</label>
10       <input type="text"  name="username" id="username" value="" />
11       <label for="pass">密码:</label>
12       <input type="password"  name="pass" id="pass" value="" />    
13       <input type="submit" value="确定"  name="submit" />
14       <input type="reset" value="重置" name="reset" />
15 </form>  
16 </body>
17 </html>
Nach dem Login kopieren

Wie interagiert die Website mit Benutzern? Die Antwort ist die Verwendung von HTML-Formular(Formular). Das Formular kann die vom Betrachter eingegebenen Daten an den Server übertragen, sodass das serverseitige Programm die vom Formular übergebenen Daten verarbeiten kann.

Grammatik: 

<form method="传送方式" action="服务器文件">
Nach dem Login kopieren

Erklärung:

1.

: -Tags erscheinen paarweise, beginnend mit
.

2.Aktion: Der Ort, an den die vom Betrachter eingegebenen Daten gesendet werden, z. B. eine PHP-Seite (save.php).

3.Methode: Die Methode der Datenübertragung (Get/Post). Post ist eine verschlüsselte Übertragung; get ist eine Adressleistenübertragung, also eine unverschlüsselte Übertragung. 

<form    method="post"   action="save.php">
        <label for="username">用户名:</label>
        <input type="text" name="username" />
        <label for="pass">密码:</label>
        <input type="password" name="pass" />
</form>
Nach dem Login kopieren

Hinweis:

1. Alle Formular--Steuerelemente (Textfeld, Textfeld, -Schaltfläche , Optionsfeld, Kontrollkästchen usw.) müssen zwischen den Tags

stehen (andernfalls werden die vom Benutzer eingegebenen Informationen möglicherweise nicht an den Server übermittelt!).

2. Der Unterschied zwischen der Methode: Post/Get. Diesen Teil müssen Back-End-Programmierer berücksichtigen.

Probieren Sie es aus: Fügen Sie Code zum

-Tag in Zeile 8 im Editor hinzu: 

method="post" action="save.php"
Nach dem Login kopieren

Haben Sie Code wie den folgenden eingegeben:

Grundlegendes HTML-Tutorial zur Interaktion mit Betrachtern und Formular-Tags

Text: Textfeld Passwort: Passwortfeld Raido: Optionsfeld Kontrollkästchen: Kontrollkästchen Datei: Dateiauswahlfeld Senden: Senden Schaltfläche

Wenn Sie auf den Text in der Beschriftung klicken, können Sie den Text mit dem Steuerelement verknüpfen. Verwenden Sie das „for“-Attribut, um die Beschriftung mit einem anderen Element zu verknüpfen Der Attributwert „id“ der Elemente ist derselbe.

2. Texteingabefeld, Passworteingabefeld 

 1 
 2 
 3 
 4 
 5 文本输入框、密码输入框
 6 
 7 
 8 
 9     账户: 
10     
11     

12     密码: 
13 
14  
15 
16
Nach dem Login kopieren

Wenn Benutzer Buchstaben, Zahlen usw. in das Formular eingeben möchten, wird das Texteingabefeld verwendet. Das Textfeld kann auch in ein Passwort-Eingabefeld umgewandelt werden.

Grammatik: 

<form>
   <input type="text/password" name="名称" value="文本" />
</form>
Nach dem Login kopieren

Typ:

Wenn type="text", ist das Eingabefeld ein Texteingabefeld; Typ Wenn =="Passwort", ist das Eingabefeld das Passwort-Eingabefeld.

2. Name: Benennen Sie das Textfeld zur Verwendung durch Hintergrundprogramme

ASP

. 3. Wert: Legen Sie den Standardwert für das Texteingabefeld fest. (Wird im Allgemeinen als Erinnerung verwendet)

Beispiel:

Das Ergebnis von 
<form>
  姓名：
  <input type="text" name="myName">
  <br/>
  密码：
  <input type="password" name="pass">
</form>
Nach dem Login kopieren

wird im Browser angezeigt:

Grundlegendes HTML-Tutorial zur Interaktion mit Betrachtern und Formular-TagsProbieren Sie es aus: Geben Sie in das Formular Namens- und Passworteingabefelder ein

1. Geben Sie den Code in Zeile 10 im Editor ein:

2 Zeileneingabecode: 
<input  type="text"  name="myName" />
Nach dem Login kopieren

Mindestens ein Leerzeichen zwischen Attributen.
<input  type="password"  name="pass" />
Nach dem Login kopieren

versteckt definiert ein ausgeblendetes Eingabefeld.

Bild definiert ein Bild als Senden-Schaltfläche.

Zahl definiert einen Spinner Steuerung Numerisches Feld
Passwort definiert das Passwortfeld. Zeichen im Feld werden verdeckt
Radio definiert Optionsfeld
Bereich definiert numerisches Feld mit Schieberegler
Reset definiert Reset-Schaltfläche. Mit der Schaltfläche „Zurücksetzen“ werden alle Formularfelder auf ihre Anfangswerte zurückgesetzt.
Suche Definiert das für die Suche verwendete Textfeld.
Senden Definiert die Schaltfläche „Senden“. Die Schaltfläche „Senden“ sendet Daten an den Server
Text Standard. Definieren Sie ein einzeiliges Eingabefeld, in das Benutzer Text eingeben können. Der Standardwert beträgt 20 Zeichen.
url definiert das für die URL verwendete Textfeld.

Einige Leute sagen, dass der Wert jetzt nur noch selten verwendet wird. Ich denke, Anfänger wissen nicht, dass Platzhalter ein neues Attribut von H5 ist, und zwar ist von IE6 bis IE9. Nativer Platzhalter wird nicht unterstützt.

Wenn Sie nur Platzhalter verwenden, ohne das Kompatibilitätsproblem zu lösen (Sie müssen einen langen Abschnitt Kompatibilitätscode hinzufügen, um Platzhalter zu verwenden), kann man nur sagen, dass Sie sich nur umschauen und nicht arbeiten.

(Der rote Text ist der Inhalt des Kommentarbereichs, von dem einige vorübergehend unverständlich sind)

3. Textfeld, unterstützt mehrzeilige Texteingabe

Wenn der Benutzer große Textblöcke in ein Formular eingeben muss, müssen Sie Texteingabefelder verwenden. 
 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>文本域</title>
 6 </head>
 7 <body>
 8 <form action="save.php" method="post" >
 9     <label>个人简介：</label>
10     <textarea>在这里输入内容...</textarea>
11     <input type="submit" value="确定"  name="submit" />
12     <input type="reset" value="重置"  name="reset" />
13 </form> 
14 </body>
15 </html>
Nach dem Login kopieren

Syntax:

1. Die
Nach dem Login kopieren

Grundlegendes HTML-Tutorial zur Interaktion mit Betrachtern und Formular-Tags

注意这两个属性可用css样式的width和height来代替：col用width、row用height来代替。

来试一试：修改文本域的列数和行数

在编辑器中第10行