Umfassendes Verständnis von HTML-Formularelementen

Umfassendes Verständnis von HTML-Formularelementen

Wie unten dargestellt:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >   
  2.   
  3. < html   xmlns = "http://www.w3.org/1999/xhtml" >   
  4. <Kopf>​​   
  5.      < Titel > Anmeldeformular </ Titel >   
  6. </ Kopf >   
  7. < Textkörper >   
  8.      < Formular   Aktion = "DoFormAction.htm" >   
  9.          < Feldsatz   Stil = "Breite=800px" >                                                                <!--Rahmen um das Anmeldeformular-->   
  10.          < legend > Bitte geben Sie die folgenden Informationen ein und registrieren Sie sich </ legend >   
  11.          < Tabelle   Zellenabstand = "0px"   Zellenpadding = "6px"   Rahmen = "1px"   Rahmenfarbe = "schwarz"   ausrichten = "zentriert"   Breite = "600px" >   
  12.              < tr >   
  13.                  < td   align = "right" > Benutzername: </ td >                                     <!--Textfeld-->   
  14.                  <td> < Eingabe​​   Typ = "Text"   Größe = "20"   Stil = "Breite: 150px"   /> </ td >   
  15.              </tr>​​   
  16.              < tr >   
  17.                  < td   align = "right" > Passwort: </ td >                                       <!--Passwortfeld-->   
  18.                  <td> < Eingabe​​   Typ = "Passwort"   Größe = "20"   Stil = "Breite: 150px"   /> </ td >   
  19.              </tr>​​   
  20.              < tr >   
  21.                  < td   align = "right" > Passwort bestätigen: </ td >   
  22.                  <td> < Eingabe​​   Typ = "Passwort"   Größe = "20"   Stil = "Breite: 150px"   /> </ td >   
  23.              </tr>​​   
  24.              < tr >   
  25.                  < td   align = "right" > Geschlecht: </ td >                                        <!--Einzelnes Auswahlfeld-->   
  26.                  < td >   
  27.                      < Eingabe   Typ = "Radio"   geprüft = "geprüft"   Name = "Geschlecht1"   Wert = "Männlich"   /> Männlich
  28.                      < Eingabe   Typ = "Radio"   Name = "Geschlecht1"   Wert = "weiblich"   /> Weiblich
  29.                  </ td >   
  30.              </tr>​​   
  31.              < tr >   
  32.                  < td   align = "right" > Geschlecht (zum Auswählen auf Text klicken): </ td >   
  33.                  < td >   
  34.                      < Feldsatz   Stil = "Breite: 150px" >                                <!--Der Formularrahmen kann auch per CSS in der Breite eingestellt werden-->   
  35.                      < legend > Bitte wählen Sie Ihr Geschlecht </ legend >   
  36.                          < Eingabe   Typ = "Radio"   aktiviert = "aktiviert"   Name = "Geschlecht2"   Wert = "Männlich"   id = "Mann"   />   
  37.                          < Bezeichnung   für = "Mann" > männlich </ label >   
  38.                          < Eingabe   Typ = "Radio"   Name = "Geschlecht2"   Wert = "weiblich"   id = "Frau"   />   
  39.                          < Bezeichnung   für = "Frau" > weiblich </ label >   
  40.                      </Feldsatz>​​   
  41.                  </ td >   
  42.              </tr>​​   
  43.              < tr >   
  44.                  < td   align = "right" > Stadt: </ td >                                      <!--Dropdown-Feld-->   
  45.                  < td >   
  46.                      < auswählen   Name = "Stadt" >   
  47.                          < Option   value = "Peking" > Peking </ option >   
  48.                          < Option   Wert = "Shenzhen" > Shenzhen </ Option >   
  49.                          < Option   Wert = "Shanghai" > Shanghai </ Option >   
  50.                          < Option   Wert = "Nanchang"   ausgewählt = "ausgewählt" > Nanchang </ option >    <!--Nanchang ist standardmäßig ausgewählt-->   
  51.                      </ auswählen >   
  52.                  </ td >   
  53.              </tr>​​   
  54.              < tr >   
  55.                  < td   align = "right" > Ortsangabe: </ td >   
  56.                  < td >   
  57.                      < auswählen   Name = "Bereich" >             
  58.                          < optgruppe   label = "Peking" >                                  <!--Dropdown-Box-Gruppenanzeige-->   
  59.                              < Option   Wert = "Bezirk Chaoyang" > Bezirk Chaoyang </ Option >   
  60.                              < Option   Wert = "Bezirk Haidian" > Bezirk Haidian </ Option >   
  61.                              < Option   value = "Andere Bezirke" > Andere Bezirke </ option >   
  62.                          </optgroup>​​   
  63.                          < optgruppe   Bezeichnung = "Nanchang" >   
  64.                              < Option   Wert = "Donghu Bezirk" > Donghu Bezirk </ Option >   
  65.                              < Option   Wert = "West Lake District" > West Lake District </ Option >   
  66.                              < Option   Wert = "Qingshan-Seengebiet" > Qingshan-Seengebiet </ Option >                                
  67.                          </optgroup>​​   
  68.                      </ auswählen >   
  69.                  </ td >   
  70.              </tr>​​   
  71.              < tr >   
  72.                  < td   align = "right" > Freundschaftsziel: </ td >   
  73.                  < td >   
  74.                      < auswählen   Name = "Ziel"   Größe = "3"   mehrere = "mehrere" >          <!--Listenfeld-->          
  75.                          < Option   Wert = "Peers"   ausgewählt = "ausgewählt" > Peers </ option >   
  76.                          < Option   value = "Gewöhnliche Freunde" > Gewöhnliche Freunde </ option >   
  77.                          < Option   Wert = "Liebhaber" > Liebhaber </ Option >   
  78.                      </ auswählen >   
  79.                  </ td >   
  80.              </tr>​​   
  81.              < tr >   
  82.                  < td   align = "right" > Hobbys: </ td >   
  83.                  < td >   
  84.                                                                              <!--Kontrollkästchen, beachten Sie, dass das Namensattribut gleich eingestellt ist, gruppiert-->       
  85.                      < Eingabe   Typ = "Kontrollkästchen"   Name = "Liebe"   Wert = "Fußball"   /> Fußball
  86.                      < Eingabe   Typ = "Kontrollkästchen"   Name = "Liebe"   Wert = "Blauer Ball"   /> Basketball
  87.                      < Eingabe   Typ = "Kontrollkästchen"   Name = "Liebe"   Wert = "Ping Pong"   /> Tischtennis
  88.                  </ td >   
  89.              </tr>​​   
  90.              < tr >   
  91.                  < td   align = "right" > Foto-Upload: </ td >   
  92.                  < td >   
  93.                                                                              <!--Dateiauswahlfeld-->       
  94.                      < Eingabe   Typ = "Datei"   Name = "meinBild"   />   
  95.                  </ td >   
  96.              </tr>​​   
  97.              < tr >   
  98.                  < td   align = "right" > Selbstvorstellung: </ td >   
  99.                  < td >   
  100.                                                                              <!--Mehrzeiliges Textfeld-->       
  101.                      < Textbereich   Zeilen = "5"   spalten = "50" >   
  102.                      </ Textbereich >   
  103.                  </ td >   
  104.              </tr>​​   
  105.              < tr >   
  106.                  < td   ausrichten = "zentriert"   colspan = "2" >   
  107.                      < Eingabe   Typ = "Senden"   Wert = "OK"   />   
  108.                      < Eingabe   Typ = "Zurücksetzen"   Wert = "klar"   />                        
  109.                      < Eingabe   Typ = "Bild"   Quelle = "../images/btnreg.png"   beim Klicken = "Alarm('Hallo')"   />        <!--Demobild-Schaltfläche (übermittelt Daten, ähnlich wie „Senden“)
  110. -->   
  111.                  </ td >   
  112.              </tr>​​   
  113.          </ Tabelle >   
  114.          </Feldsatz>​​   
  115.      </ form >   
  116. </ Körper >   
  117. </ html >   

Das Obige ist der gesamte Inhalt des umfassenden Verständnisses von HTML-Formularelementen, das Ihnen der Herausgeber vermittelt hat. Ich hoffe, es wird allen helfen. Bitte unterstützen Sie 123WORDPRESS.COM~

<<:  Flammenanimation mit CSS3 umgesetzt

>>:  Details zur Verwendung regulärer Ausdrücke in MySQL

Artikel empfehlen

Detaillierte Installation und Verwendung von SSH in der Ubuntu-Umgebung

SSH steht für Secure Shell, ein sicheres Übertrag...

Gründe, warum MySQL den Abfrage-Cache abgebrochen hat

MySQL hatte zuvor einen Abfragecache, Query Cache...

WePY-Cloud-Entwicklungspraxis im Linux-Befehlsabfrage-Applet

Hallo zusammen, heute werde ich mit Ihnen die WeP...

Die Vorteile und Beispiele für die Platzierung der Sitemap am unteren Rand der Webseite

Früher hatte fast jede Website eine Sitemap-Seite...

Tutorial zum Erstellen eines Kommentarfelds mit Emoticons mithilfe von HTML und CSS

HTML-Kommentarfeld mit Emoticons. Die Emoticons w...

Erste Schritte mit dem Alibaba Cloud ECS-Server (unbedingt zu lesendes Tutorial für Neulinge)

1. Alibaba Cloud wählt den geeigneten Cloud-Serve...

Code zum Anzeigen des Inhalts eines TXT-Buchs auf einer Webseite

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

Detaillierte Erklärung zum Javascript-Event-Bubbling, Event-Capture und Event-Delegation

1. Ereignissprudeln : Wenn im Prozess der Ereigni...

WiFi-Entwicklung | Einführung in die WiFi-Wireless-Technologie

Inhaltsverzeichnis Einführung in die WiFi-Wireles...

Regenbogen-Button-Stil erstellt mit CSS3

Ergebnis: Implementierungscode: html <div Klas...

Detailliertes Tutorial zum Erstellen einer JMeter+Grafana+Influxdb-Überwachungsplattform mit Docker

Wir alle wissen, dass Jmeter eine native Ergebnis...

Detaillierte Erklärung der grep- und egrep-Befehle in Linux

Vertreter / egrep Syntax: grep [-cinvABC] 'wo...

Docker-Befehle werden so implementiert, dass normale Benutzer sie ausführen können

Nach der Installation von Docker gibt es normaler...

Erfahrungsaustausch über die Priorität des Ladens von CSS-Stilen

Während der Projektentwicklung bin ich gestern auf...

Detaillierte Erklärung zum Aktivieren des https-Dienstes in Apache unter Linux

Dieser Artikel beschreibt, wie man den https-Dien...