It displays the selection elements in one by one manner like drop-down.
- Select tag is represented using <select>....</select>
- Inside select tag we must use <option> tag. If select tag is empty .It shows like this.
Step-1: How to create select tag:
- Create <select> tag
- Inside <select> tag use <option> tag .
<!DOCTYPE html> <html> <head> <title>radio</title> </head> <body> <select> <option>India</option> </select> </body> </html>
<!DOCTYPE html>
<html>
<head>
<title>radio</title>
</head>
<body>
<select>
<option>India</option>
</select>
</body>
</html>
Output:
After implement this ,it will display like this .
Step-2: Add attributes like name,id,for,value:
- Name attribute inside the select tag <select name="country">, it means after submitting the form the value you choose in this field is going to store in the name.
- Value inside the option tag <option value="India"> ,it means after submitting the form the value you choosed will send to name variable.
- For is used for my input field is here. For more reference click here
- Id is create for unique . And for will search the id attribute.
<!DOCTYPE html>
<html>
<head>
<title>radio</title>
</head>
<body>
<label for="listofcountries">select your country</label>
<select name="country" id="listofcountries">
<option>India</option>
<option>America</option>
<option>UK</option>
<option>Australia</option>
</select>
</body>
</html>
Output:
Step-3: : How to increase size of field:
- To increase the size of field by using size attribute .
- <select size="number">
<select name="country" id="listofcountries" size="3">
<option>India</option>
<option>America</option>
<option>UK</option>
<option>Australia</option>
<option>Russia</option>
<option>Africa</option>
</select>
Output:
Select your country :Now the size of field get increased.
Step-4: How to make multiple select in drop-down:
- It is done by using multiple attribute.
- <select multiple>.
<select name="country" id="listofcountries" size="3" multiple>
<option>India</option>
<option>America</option>
<option>UK</option>
<option>Australia</option>
<option>Russia</option>
<option>Africa</option>
</select>
Output:
select multiple countries :Use ctrl+click to multiple select..!
Post a Comment