HTML 中的组合框
html
html5
HTML Tutorial
HTML Properties
HTML tags
HTML Combobox 主要用于在 HTML 中构建表单。用户可以根据自己的喜好从列表中选择一个选项。它由 select 元素和 input type=”text” 元素组成。组合框的功能与选择标签相同。它在
Combobox是可以轻松支持各种浏览器的HTML元素。它作为最新形式的对象作为组合框，用于通过给定文本字段中的选项填充数据。
HTML 中组合框的语法
我们知道，Combobox 是
此语法的代码如下：
<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>登录后复制
输出：
从列表中选择一个选项后，它将链接到附加的表格或网页。单击提交值后，将显示带有元素的表单，如下所示：
示例 #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 组合框是网页设计中创建选择列表最重要的元素之一。最新的浏览器最常使用它。它由
以上是HTML 中的组合框的详细内容。更多信息请关注PHP中文网其他相关文章！
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
如何修复KB5055523无法在Windows 11中安装？
3 周前
By DDD
如何修复KB5055518无法在Windows 10中安装？
3 周前
By DDD
R.E.P.O.的每个敌人和怪物的力量水平
3 周前
By 尊渡假赌尊渡假赌尊渡假赌
<🎜>：死铁路 - 如何驯服狼
3 周前
By DDD
蓝王子：如何到达地下室
3 周前
By DDD
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
