Einführung in grundlegende HTML-Steuerelemente_PowerNode Java Academy

Das <input>-Tag

Das <input>-Tag wird zum Sammeln von Benutzerinformationen verwendet.

Das Typattribut

Abhängig vom Wert des Typattributs kann das Eingabefeld viele Formen haben. Kann ein Textfeld, ein Kontrollkästchen, ein maskiertes Textsteuerelement, ein Optionsfeld, ein Druckknopf usw. sein.

Text: Textbereich

schreibgeschütztes Attribut: ob es schreibgeschützt ist.

Passwort: Passwortbereich, der eingegebene Text wird mit '*' gekennzeichnet

Kontrollkästchen: Kontrollkästchen

aktiviertes Attribut: ob es ausgewählt ist;

Radio: einzelnes Auswahlfeld;

Name-Attribut: Gibt mehrere Optionsfelder an, die in einem Bereich ausgewählt werden sollen

zurücksetzen: Setzt alle Tags im aktuellen <form>-Formular auf den Initialisierungszustand zurück (z. B. Löschen des Textbereichsinhalts)

Senden: Übermittelt die aktuellen <form>-Formularinformationen an die angegebene Seite.

Taste: normale Taste

Wertattribut: der von der Schaltfläche angezeigte Text

Datei: Dateiauswahl-Tag

Ausblenden: Versteckter Bereich, in dem Sie einige Informationen speichern können, die den Benutzern nicht angezeigt werden, aber von Ihnen selbst verwendet werden

Bild: Bildbereich

src-Attribut: gibt den Pfad an, in dem das Bild gespeichert ist;
Titelattribut: der Text, der angezeigt wird, wenn die Maus über das Bild bewegt wird;
alt: Der Text, der angezeigt wird, wenn das Laden des Bildes fehlschlägt oder es geschlossen wird;

Beispiel

<select>-Tag

Sie können Menüs mit Einzelauswahl oder Mehrfachauswahl erstellen, ähnlich der Combox- oder Listbox von WinForm.

Eigentum

1) size {int}: legt die Größe der Dropdown-Liste fest. Der Standardstil ist Combox; wenn er größer als 1 ist, ist es der Listbox-Stil.

2) multiple {boolean}: ob mehrere Elemente ausgewählt werden sollen. Wenn Sie mehrere Elemente auswählen möchten, drücken Sie Strg+Linke Taste, um mehrere Auswahlvorgänge durchzuführen.

3) Artikelunterpunkt:

① <optgroup>-Tag: definiert die Kategorie der Optionen und kann nicht ausgewählt werden.

label {string}-Attribut: der Name der anzuzeigenden Kategorie title {string}-Attribut: die Informationen, die angezeigt werden sollen, wenn die Maus über das ausgewählte Element bewegt wird

② <option>-Tag: definiert optionale Elemente

vlaue {string} Attribut: Der spezifische Name der Option title {string} Attribut: Die Informationen, die angezeigt werden sollen, wenn die Maus über die Option bewegt wird

Beispiel

<h3>Tag auswählen</h3>
<select id="Provinz" multiple=multiple size="6" >
    <optgroup label="Gemeinde" ></optgroup>
    <option value="bj" title="北京" >Peking</option>
    <option value="sh">Shanghai</option>
    <optgroup label="Provinz und Stadt" ></optgroup>
    <option value="zj">Zhejiang</option>
    <option value="fj">Fujian</option>
</Auswählen>

<textarea> Tag

Bei mehrzeiligen Textbereichen können Sie die Größe des Textbereichs mit den Attributen „cols“ und „rows“ festlegen.

Eigentum

rows {int}: Gibt die Anzahl der anzuzeigenden Zeilen an.
cols {int}: Gibt die Anzahl der anzuzeigenden Spalten an.
readonly {boolean}: ob schreibgeschützt sein soll.

Beispiel

Das <label>-Tag

Entspricht einem Anzeigetextfeld.

Eigentum

für {elementID}: Ordnet die entsprechende Steuerelement-ID zu. Wenn auf diese Bezeichnung geklickt wird, erhält das an die ID gebundene Steuerelement den Fokus.

<Tabelle>
    <tr>
        <td><label for='Benutzername'>Name:</label></td>
        <td><input type="text" id='Benutzername'/></td>
    </tr>
    <tr>
        <td><label for='userpwd'>Passwort:</label></td>
        <td><input type="Passwort" id='Benutzerkennwort' /></td>
    </tr>
</Tabelle>

Beispiel

<fieldset> Tag

Ähnlich dem GroupBox-Steuerelement in Winform.

Artikel

<legend></legend>: gibt den Namen der Überschrift an.

<h3>Fieldset-Tag</h3>
<Feldsatzstil='Breite: 130px' >
    <legend>Geschlecht</legend>
    <input type="radio" name='sex' value='boy' />Männlich<input type="radio" name='sex' value='girl' />Weiblich</fieldset>

Beispiel

ul-, ol-, li-Listen-Tags

ul: ungeordnete Liste

ol: geordnete Liste

li: Listenelement, basierend auf den beiden obigen Listenunterelementen.

Codebeispiel:

<ul Typ=Kreis>
    <li>ul1</li>
    <li>ul2</li>
    <li>ul3</li>
</ul>
<ol Typ=1>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ol>

Eigentum

Typ {string}: definiert den Symbolstil vor dem <li>-Tag.

ul: Typ umfasst: Kreis (hohler Kreis), Scheibe (ausgefüllter Kreis), Quadrat (ausgefülltes Quadrat), keine: kein Zeichen davor;

ol: Typ hat: 1: stellt die geordneten Zahlen 1, 2, 3 dar; a: stellt die geordneten Zahlen a, b, c dar; i: römische Ziffern i, ii, iii; obwohl es auch als Kreis, Scheibe, Quadrat, keine definiert werden kann, sind dies in Wirklichkeit alles Folgen wie 1, 2, 3;