Combobox in HTML

HTML Combobox wird hauptsächlich zum Erstellen von Formularen in HTML verwendet. Hier können Benutzer je nach Wunsch eine Option aus der Liste auswählen. Es wird mit einem Select-Element und einem Input-Type=“Text“-Element gebildet. Die Funktionalität der Combobox entspricht der eines Select-Tags. Es verfügt außerdem über ein -Tag-Attribut innerhalb des -Tags, um die Menüoption aus der Liste auszuwählen, sodass man eine Option entsprechend seiner Wahl auswählen kann.

Combobox ist das HTML-Element, das problemlos alle Arten von Browsern unterstützen kann. Es funktioniert als neueste Form von Objekten als Combobox zum Füllen von Daten durch Optionen in einem bestimmten Textfeld.

Syntax der Combobox in HTML

Wie wir wissen, ist Combobox eine Kombination aus Tag und element, sodass die Syntax für Combobox nur in sich selbst definiert ist.

Der Code für diese Syntax lautet wie folgt:

<input type="text" list="value">
<datalist>
<option>content</option>
<option>content</option>
<option>content</option>
<option>content</option>
<option>content</option>
</datalist>

• In der obigen Syntax ist der Eingabetyp ein Element, das Eingabetext erstellt, in dem wir Eingaben vom Benutzer entgegennehmen und anzeigen können. Dieser Eingabewert wird über ausgewählt. Element aus dem HTML-Tag.
• Mit der oben genannten Syntax kann man Javascript-Code hinzufügen, um mehr Funktionalität mit dem Combobox-Element zu erreichen. Eine Funktion wie onChange kann je nach Benutzerpräferenz eine Option aus der Auswahlliste auswählen.
• Sobald der Benutzer die Option auswählt, bleibt sie so, wie sie auf dem Ausgabebildschirm angezeigt wird.

Der Code für diese Syntax lautet wie folgt:

<input type="text" id="demo" name="comboboxdemo">
<select name=" optionlist " onchange="combo(this, 'demo')">
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
<option> option 4 </option>
<option> option 5 </option>
</select>

Javascript

var example = listdemo ld.selectedIndex;
var demo = optionlist.options[example].innerHTML;
var demo = optionlist.options[example] .value;

Beispiele für Comboboxen in HTML

Hier sind die Beispiele für Comboboxen in HTML wie folgt:

Beispiel #1

Code:

<title>Example of Combobox</title>

<style>
.combo{
padding:10px;
}
</style>
<h1 id="Front-End-Development-languages">Front End Development languages</h1>

<select class="combo">
<option value="Select">Select....</option>
<option value="html">HTML 5</option>
<option value="css">CSS 3</option>
<option value="javascript">Javascript/Ajax</option>
<option value="bootstrap">Bootstrap</option>
<option value="react">React JS</option>
<option value="vue">Vue JS</option>
<option value="2">Angular 2</option>
<option value="4">Angular 4</option>
<option value="5">Angular 5</option>
<option value="6">Angular 6</option>
<option value="7">Angular 7</option>
<option value="8">Angular 8</option>
<option value="CSS fw">CSS framework</option>
<option value="rw">Responsive Web Design</option>
<option value="dom">DOM scripting</option>
<option value="preprocessors">Saas, Less</option>
<option value="api">HTML 5 API</option></select>

Ausgabe:

Beispiel #2

Code:

<h2 id="Combobox-as-a-form-element">Combobox as a form element</h2>
<p>As we all know combobox is the combination of the Select tag and Form element. Here we are going to create same thing in which we are creating combolist in which user can select option as per their choice and this option will redirect to the that particular option so It can be able to open new form using this option .</p>

HTML forms Element

Anchor_tag Aside _tag dragdropdown Font_tag Block_elements Blockquote Colsapn inline_style Kbd Meta_tags Quotation Table_background Table_border Caption Select tag

Ausgabe:

Nachdem Sie eine Option aus der Liste ausgewählt haben, wird diese mit dem angehängten Formular oder der Webseite verknüpft. Und nachdem Sie auf „Wert senden“ geklickt haben, wird ein Formular mit einem Element wie folgt angezeigt:

Beispiel #3

Code:

<h2 id="Student-Details">Student Details</h2>

STUDENT REGISTRATION FORM

FIRST NAME
LAST NAME
DATE OF BIRTH
EMAIL ID
MOBILE NUMBER
GENDER	Male Female Transgender
CITY
PINCODE
STATE
COUNTRY
HOBBIES	Writing Sketching Designing Others
Percentage

Ausgabe:

Fazit

HTML Combobox ist eines der wichtigsten Elemente im Webdesign zum Erstellen einer Auswahlliste. Die neuesten Browser verwenden es am häufigsten. Dies besteht aus einer Kombination von .. Tag zum Auswählen der entsprechenden Option aus der Liste und Element zum Speichern der Eingabe.

Das obige ist der detaillierte Inhalt vonCombobox in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!