HTML의 콤보박스
- PHPz원래의
- 2024-09-04 16:48:301046검색
HTML 콤보박스는 주로 HTML로 양식을 작성하는 데 사용됩니다. 사용자는 자신의 선호도에 따라 목록에서 옵션을 선택할 수 있습니다. 이는 선택 요소와 입력 유형=”텍스트” 요소로 구성됩니다. 콤보박스의 기능은 선택 태그와 동일합니다. 또한
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>
- 위 구문에서 입력 유형은 사용자로부터 입력을 받아 표시할 수 있는 입력 텍스트를 생성하는 요소입니다. 이 입력값은
- 위 구문을 사용하면 자바스크립트 코드를 추가하여 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>
자바스크립트
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으로 문의하세요.
이전 기사：HTML 여백-왼쪽다음 기사：HTML 여백-왼쪽