Toggle navigation
☰
Home
HTML
CSS
Scripting
Database
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>My Example</title> <style> .myForm { font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size: 0.8em; max-width: 50em; } .myForm * { box-sizing: border-box; } .myForm p { padding: 2em; margin: 0; color: #555; border-style: solid; border-color: limegreen; border-width: 0 0 1px; } .myForm p:nth-of-type(1) { border-top-width: 1px; } .myForm p:nth-of-type(odd) { color: seagreen; background-color: #e5f6e6; } .myForm select { width: 60%; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size: 0.9em; display: inline-block; margin-right: 2em; } .myForm label { display: inline-block; vertical-align: top; } </style> </head> <body> <form class="myForm" method="get" enctype="application/x-www-form-urlencoded" action="/html/form_handler.cfm"> <p> <select required id="select1" name="select1"> <option value="" selected="selected">Select One</option> <option value="s1"> Select Option 1 </option> <option value="s2"> Select Option 2 </option> <option value="s3"> Select Option 3 </option> </select> <label for="select1"> Basic </label> </p> <p> <select required name="select2" id="select2"> <option value="" selected="selected">Select One</option> <optgroup label="Group 1"> <option value="s1"> Select Option 1 </option> <option value="s2"> Select Option 2 </option> </optgroup> <optgroup label="Group 2"> <option value="s3"> Select Option 3 </option> <option value="s4"> Select Option 4 </option> </optgroup> </select> <label for="select2"> With Optgroup </label> </p> <p> <select required name="select3" name="select3" multiple> <option value="" selected="selected">Select One</option> <optgroup label="Group 1"> <option value="s1"> Select Option 1 </option> <option value="s2"> Select Option 2 </option> </optgroup> <optgroup label="Group 2"> <option value="s3"> Select Option 3 </option> <option value="s4"> Select Option 4 </option> </optgroup> </select> <label for="select3"> Select Multiple Rows </label> </p> <p> <select required name="select4" name="select4" multiple size="8"> <option value="" selected="selected">Select One</option> <optgroup label="Group 1"> <option value="s1"> Select Option 1 </option> <option value="s2"> Select Option 2 </option> </optgroup> <optgroup label="Group 2"> <option value="s3"> Select Option 3 </option> <option value="s4"> Select Option 4 </option> </optgroup> </select> <label for="select4"> Size </label> </p> <p> <select required name="select5" name="select5" multiple size="8"> <option value="" selected="selected">Select One</option> <optgroup label="Group 1"> <option value="s1"> Select Option 1 </option> <option value="s2" disabled> Select Option 2 </option> </optgroup> <optgroup label="Group 2"> <option value="s3"> Select Option 3 </option> <option value="s4"> Select Option 4 </option> </optgroup> </select> <label for="select5"> Disabled Item </label> </p> <p> <select required name="select6" name="select6" multiple size="8" disabled> <option value="" selected="selected">Select One</option> <optgroup label="Group 1"> <option value="s1"> Select Option 1 </option> <option value="s2"> Select Option 2 </option> </optgroup> <optgroup label="Group 2"> <option value="s3"> Select Option 3 </option> <option value="s4"> Select Option 4 </option> </optgroup> </select> <label for="select6"> Disabled List </label> </p> </form> </body> </html>
