Was sind die grundlegenden Steuerelemente von HTML?

Dieses Mal werde ich Ihnen die grundlegenden Steuerelemente von HTML und die Vorsichtsmaßnahmen für die Verwendung von HTML-Steuerelementen vorstellen Hier sind praktische Fälle, werfen wir einen Blick darauf.

d5fd7aea971a85678ba271703566ebfd-Tag

d5fd7aea971a85678ba271703566ebfd

Typattribut

Je nach verschiedenen Typattributwerten hat das Eingabefeld viele Formen. Es kann sich um ein Textfeld, ein Kontrollkästchen, ein maskiertes Textsteuerelement, ein Optionsfeld, eine Schaltfläche usw. handeln.

text: Textbereich

readonly-Attribut: ob es schreibgeschützt ist.

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

Kontrollkästchen: Kontrollkästchen

aktiviertes Attribut: ob überprüft werden soll; Optionsfeld;

Namensattribut: Geben Sie mehrere Optionsfelder an, um Optionsfelder in einem Bereich auszuführen.

Zurücksetzen: Alle Beschriftungen im aktuellen b2368275032c438dd74002c1e36dce38 zurücksetzen B. Löschen des Inhalts des Textbereichs)

Senden: Senden Sie die aktuellen ff9c23ada1bcecdd1a0fb5d5a0f18437-Formularinformationen an die angegebene Seite

Schaltfläche: normale Schaltfläche

Wertattribut: die Von der Schaltfläche angezeigter Text

Datei: Dateiauswahlbezeichnung

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

Bild: Bildbereich

src-Attribut: Geben Sie 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 angezeigte Text wenn das Bild nicht geladen werden kann oder geschlossen wird;


Beispiel

221f08282418e2996498697df914ce4e kann ein Einzelauswahl- oder Mehrfachauswahlmenü erstellen, ähnlich zur Combox oder Listbox von Winform.

Attribute

1) Größe {int}: Legen Sie die Größe der

Dropdown-Liste

fest. Der Standardwert ist der Combox-Stil. Wenn er größer als 1 ist, handelt es sich um den Listbox-Stil.

2) multiple {boolean}: Ob Mehrfachauswahl erfolgen soll. Halten Sie bei Mehrfachauswahlen die Tastenkombination Strg + linke Maustaste gedrückt, um mehrere Auswahlvorgänge durchzuführen.

3) Artikelunterpunkt: ① 5b7a15bed8615d1b843806256bebea72 definiert die Kategorie des ausgewählten Artikels, der nicht ausgewählt werden kann.

label {string}-Attribut: der Name der Kategorieanzeige

title {string}-Attribut: die Informationen, die angezeigt werden sollen, wenn die Maus auf das ausgewählte Element bewegt wird

② 5cce61f9915eb8a6970237cee9354832 Beschriftung: Definition Optionale Elemente

vlaue {string} Attribut: der spezifische Name des ausgewählten Elements

title {string} Attribut: Bewegen Sie die Maus auf das ausgewählte Element, die anzuzeigenden Informationen

4750256ae76b6b9d804861d8f69e79d3 Tag

Mehrzeiliger Textbereich, die Größe des Textbereichs kann über die Attribute „cols“ und „rows“ festgelegt werden.

<h3>select标签</h3>
<select id="province" multiple=multiple size="6" >
    <optgroup label="直辖市"  ></optgroup>
    <option value="bj" title="北京市" >北京</option>
    <option value="sh">上海</option>
    <optgroup label="省市" ></optgroup>
    <option value="zj">浙江</option>
    <option value="fj">福建</option>
</select>

Attribute

rows {int}: Gibt die Anzahl der angezeigten Zeilen an.

cols {int}: Gibt die Anzahl der angezeigten Spalten an.

readonly {boolean}: Gibt an, ob es schreibgeschützt ist.

Beispiel

2e1cf0710519d5598b1f0f14c36ba674Die Beschriftung

entspricht einem Anzeigetextfeld.

Attribut

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

Beispiel

ul, ol, li Listen-Tags

<table>
    <tr>
        <td><label for=&#39;username&#39;>姓名：</label></td>
        <td><input type="text" id=&#39;username&#39;/></td>
    </tr>
    <tr>
        <td><label for=&#39;userpwd&#39;>密码：</label></td>
        <td><input type="password" id=&#39;userpwd&#39; /></td>
    </tr>
</table>

ul: ungeordnete Liste (ungeordnete Liste)

<fieldset>标签
类似于winform中的groupBox控件。
item子项
<legend></legend>：表示抬头的名称。
<h3>fieldset标签</h3>
<fieldset style=&#39;width:130px&#39; >
    <legend>性别</legend>
    <input type="radio" name=&#39;sex&#39; value=&#39;boy&#39; />男
    <input type="radio" name=&#39;sex&#39; value=&#39;girl&#39; />女
</fieldset>

ol: geordnete Liste (mit Sequenz list))

li: Listenelement (Listenelement), basierend auf den oben genannten 2 Listenunterelementen.

Codebeispiel:

Attribute

Typ {string}: Definiert den Symbolstil vor dem 25edfb22a4f469ecb59f1190150159c6-Tag.

ul: Typ hat: Kreis Hohlkreis, Scheibe Vollkreis, Quadrat Vollquadrat, keine: kein Zeichen davor

<ul type=circle>
    <li>ul1</li>
    <li>ul2</li>
    <li>ul3</li>
</ul>
<ol type=1>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ol>

ol: Typ hat: 1: stellt geordnet 1, 2, 3 dar ; a: stellt geordnetes a, b, c dar; i: römische Ziffern i, ii, iii, obwohl es auch definiert werden kann als: Kreis, Scheibe, Quadrat, keine, aber in Wirklichkeit ist es eine Folge von 1, 2, 3 , usw.;

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

So fügen Sie ein Video in eine HTML-Webseite ein

Wie Sie mit HTML+CSS erstellen ein Mouseover Sie können die sekundäre Menüleiste anzeigen

So löschen Sie den Cache der JS- und CSS-Dateien automatisch aus der Front-End-Oberfläche

Das obige ist der detaillierte Inhalt vonWas sind die grundlegenden Steuerelemente von HTML?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!