ホームページ >ウェブフロントエンド >htmlチュートリアル >HTMLのコンボボックス
HTMLのコンボボックス
- PHPzオリジナル
- 2024-09-04 16:48:301123ブラウズ
HTML コンボボックスは主に HTML でフォームを構築するために使用されます。ユーザーは好みに応じてリストからオプションを選択できます。 select要素とinput type=”text”要素で構成されます。コンボボックスの機能は選択タグと同じです。また、リストからメニュー オプションを選択するための
Combobox は、あらゆる種類のブラウザを簡単にサポートできる HTML 要素です。これは、特定のテキストフィールドのオプションを通じてデータを入力するためのコンボボックスとしてオブジェクトの最新形式として機能します。
HTML のコンボボックスの構文
ご存知のとおり、コンボボックスは
この構文のコードは次のとおりです:
<input type=text list=value> <datalist> <option>content</option> <option>content</option> <option>content</option> <option>content</option> <option>content</option> </datalist>
- 上記の構文では、入力タイプは、ユーザーからの入力を取得して表示できる入力テキストを作成する要素です。この入力値は
- 上記の構文を使用すると、JavaScript コードを追加して Combobox 要素でより多くの機能を実行できます。 onChange のような関数は、ユーザーの好みに応じて選択リストからオプションを選択できます。
- ユーザーがオプションを選択すると、出力画面に表示されたままになります。
この構文のコードは次のとおりです:
<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;
HTML のコンボボックスの例
HTML でのコンボボックスの例は次のとおりです。
例 #1
コード:
<html>
<head>
<title>Example of Combobox</title>
</head>
<style>
.combo{
padding:10px;
}
</style>
<h1>Front End Development languages</h1>
<body>
<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>
</body>
</html>
出力:
例 #2
コード:
<!DOCTYPE html>
<html>
<body>
<h2>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>
<form action="C:\Users\Sonali\Desktop\HTML files\Dropdownlist.html">
<input list="html_elements" name="web_language">
<datalist id="html_elements">
<option value="Anchor_tag"> </option>
<option value="Aside _tag"> </option>
<option value="dragdrop"> </option>
<option value="Dropdownlist"> </option>
<option value="Font_tag"></option>
<option value="Block_elements"> </option>
<option value="Blockquote"> </option>
<option value="Colsapn"> </option>
<option value="inline_style"> </option>
<option value="Kbd"></option>
<option value="Meta_tags"> </option>
<option value="Quotation"> </option>
<option value="Table_background"> </option>
<option value="Table_border"> </option>
<option value="Caption"> </option>
<option value="Select tag"> </option>
</datalist>
<input type="submit">
</form>
</body>
</html>
<!--HTML Form Code -->
<!DOCTYPE html>
<html>
<head>
<style>
.dropdownbtn {
background-color: lightgreen;
color: white;
padding: 12px;
font-size: 12px;
}
.dropdowndemo{
position:fixed;
display: block;
}
.dropdownlist-content {
display: none;
position: absolute;
background-color: deepskyblue;
min-width: 120px;
z-index: 1;
}
.dropdownlist-content a {
color:black;
padding: 14px 18px;
display: block;
}
.dropdownlist-content a:hover {background-color: lightcyan;}
.dropdowndemo:hover .dropdownlist-content {display: block;}
.dropdowndemo:hover .dropdownbtn {background-color: palevioletred;}
</style>
</head>
<body>
<div class="dropdowndemo">
<button class="dropdownbtn">HTML forms Element</button>
<div class="dropdownlist-content">
<a href="#">Anchor_tag</a>
<a href="#">Aside _tag</a>
<a href="#">dragdropdown</a>
<a href="#">Font_tag</a>
<a href="#">Block_elements</a>
<a href="#">Blockquote</a>
<a href="#">Colsapn</a>
<a href="#">inline_style</a>
<a href="#">Kbd</a>
<a href="#">Meta_tags</a>
<a href="#">Quotation</a>
<a href="#">Table_background</a>
<a href="#">Table_border</a>
<a href="#">Caption</a>
<a href="#">Select tag</a>
</div>
</div>
</body>
</html>
出力:
リストからオプションを選択すると、添付のフォームまたは Web ページにリンクします。そして、値の送信をクリックすると、次のように要素を含むフォームが表示されます:
例 #3
コード:
<!—Main page-->
<!DOCTYPE html>
<html>
<body>
<h2>Student Details</h2>
<form action="C:\Users\Sonali\Desktop\HTML files\combodemo.html">
<input list="stud" name="demo">
<datalist id="stud">
<option value="Student Details"> </option>
<option value="Registration"> </option>
</datalist>
<input type="submit">
</form>
</body>
</html>
<!—Registration form code-->
<html>
<head>
<title>Student Details</title>
<style>
h3{
text-align: center;
}
table{
color:white;
background-color:chocolate;
border-collapse: collapse;
border: 2px solid black;
}
table.inner{
border: 0px
}
</style>
</head>
<body>
<h3>STUDENT REGISTRATION FORM</h3>
<form>
<table align="center" cellpadding = "6">
<tr>
<td>FIRST NAME</td>
<td><input type="text" name="First_Name"/>
</td>
</tr>
<tr>
<td>LAST NAME</td>
<td><input type="text" name="Last_Name"/>
</td>
</tr>
<tr>
<td>DATE OF BIRTH</td>
<td><input type="date" name="Birth_date" /></td>
</tr>
<tr>
<td>EMAIL ID</td>
<td><input type="text" name="Email_Id" maxlength="100" /></td>
</tr>
<tr>
<td>MOBILE NUMBER</td>
<td>
<input type="text" name="Mobile_Number" maxlength="10" />
</td>
</tr>
<tr>
<td>GENDER</td>
<td>
Male <input type="radio" name="Gender" value="Male" />
Female <input type="radio" name="Gender" value="Female" />
Transgender <input type="radio" name="Gender" value="Transgender" />
</td>
</tr>
<tr>
<td>CITY</td>
<td><input type="text" name="City" maxlength="20" />
</td>
</tr>
<tr>
<td>PINCODE</td>
<td><input type="text" name="pincode" />
</td>
</tr>
<tr>
<td>STATE</td>
<td><input type="text" name="State" />
</td>
</tr>
<tr>
<td>COUNTRY</td>
<td><input type="text" name="Country" value="India" readonly="readonly" /></td>
</tr>
<tr>
<td>HOBBIES <br /><br /><br /></td>
<td>
Writing
<input type="checkbox" name="Hobby_1" value="Writing" />
Sketching
<input type="checkbox" name="Hobby_2" value="Designing" />
Designing
<input type="checkbox" name="Hobby_3" value="Cooking" />
<br />
Others
<input type="checkbox" name="Hobby_4" value="Other">
<input type="text" name="Other_Hobby" maxlength="30" />
</td>
</tr>
<tr>
<td>Percentage</td>
<td><input type="text" name="percentage"/ maxlength="2" placeholder="marks in %"></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</td>
</tr>
</table>
</form>
</body>
</html>
出力:
結論
HTML コンボボックスは、Web デザインにおいて選択リストを作成するための最も重要な要素の 1 つです。最新のブラウザでは最も一般的に使用されています。これは リストから適切なオプションを選択するためのタグと <入力タイプ=”テキスト”>入力を保存する要素。
以上がHTMLのコンボボックスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：HTML 左マージン次の記事：HTML 左マージン