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> <!-- CSS --> <style> .myForm { font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size: 0.8em; width: 20em; padding: 1em; border: 1px solid #ccc; } .myForm * { box-sizing: border-box; } .myForm fieldset { border: none; padding: 0; } .myForm legend, .myForm label { padding: 0; font-weight: bold; } .myForm label.choice { font-size: 0.9em; font-weight: normal; } .myForm input[type="text"], .myForm input[type="tel"], .myForm input[type="email"], .myForm input[type="datetime-local"], .myForm select, .myForm textarea { display: block; width: 100%; border: 1px solid #ccc; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size: 0.9em; padding: 0.3em; } .myForm textarea { height: 100px; } .myForm button { padding: 1em; border-radius: 0.5em; background: #eee; border: none; font-weight: bold; margin-top: 1em; } .myForm button:hover { background: #ccc; cursor: pointer; } </style> </head> <body> <form class="myForm" method="get" enctype="application/x-www-form-urlencoded" action="/html/form_handler.cfm"> <p> <label>Text <input type="text" name="text_field" required placeholder="Text field"> </label> </p> <p> <label>Tel <input type="tel" name="phone_field" required placeholder="Phone field"> </label> </p> <p> <label>Email <input type="email" name="email_field" required placeholder="Email address"> </label> </p> <fieldset> <legend>Fieldset & Legend</legend> <p><label class="choice"> <input type="radio" name="radio_field" required value="rb1"> Radio Button 1 </label></p> <p><label class="choice"> <input type="radio" name="radio_field" required value="rb2"> Radio Button 2 </label></p> <p><label class="choice"> <input type="radio" name="radio_field" required value="rb3"> Radio Button 3 </label></p> </fieldset> <fieldset> <legend>Fieldset & Legend</legend> <p><label class="choice"> <input type="checkbox" name="checkbox_field" value="cb1"> Checkbox 1 </label></p> <p><label class="choice"> <input type="checkbox" name="checkbox_field" value="cb2"> Checkbox 2 </label></p> <p><label class="choice"> <input type="checkbox" name="checkbox_field" value="cb3"> Checkbox 3 </label></p> </fieldset> <p> <label>Datetime Local <input type="datetime-local" min="09:00" max="22:00" step="900" required name="datetime_field"> </label> </p> <p> <label>Select List <select required name="select_field"> <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> </p> <p> <label>Text with Datalist (auto-suggestion) <input type="text" name="text_field_2" list="suggestions" required placeholder="Type 'a', 'b', or 'f' to see a suggestion..."> </label> <datalist id="suggestions"> <option value="Airport"> <option value="Beach"> <option value="Fred Flinstone's House"> </datalist> </p> <p> <label>Textarea <textarea name="textarea_field" required maxlength="500"></textarea> </label> </p> <p> <keygen name="keygen_field" challenge="012345" keytype="RSA"> </p> <p><button>Button</button></p> </form> </body> </html>
