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 fieldset { border: none; padding: 1em 0 3em; } .myForm legend { font-size: 1.2em; font-weight: bold; } .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 input { font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size: 0.9em; display: inline-block; border: 1px solid limegreen; border-radius: 5px; margin-right: 2em; } .myForm label { display: inline-block; vertical-align: middle; } .myForm label.choice { display: inline; } .myForm input[type="text"], .myForm input[type="tel"], .myForm input[type="email"], .myForm input[type="search"], .myForm input[type="url"], .myForm input[type="password"], .myForm input[type="number"], .myForm input[type="date"], .myForm input[type="datetime"], .myForm input[type="datetime-local"], .myForm input[type="time"], .myForm input[type="month"], .myForm input[type="week"], .myForm input[type="range"], .myForm input[type="file"], .myForm select { width: 60%; padding: 0.6em; } .myForm input[type="radio"], .myForm input[type="checkbox"], .myForm input[type="color"], .myForm input[type="range"] { border: none; } .myForm input[type="button"], .myForm input[type="submit"], .myForm input[type="reset"] { padding: 1em; border-radius: 0.5em; background: white; font-weight: bold; } .myForm input[type="button"]:hover, .myForm input[type="submit"]:hover, .myForm input[type="reset"]:hover { background: limegreen; color: white; cursor: pointer; } </style> </head> <body> <form class="myForm" method="get" enctype="application/x-www-form-urlencoded" action="/html/form_handler.cfm"> <fieldset> <legend>Textual Input</legend> <p> <input type="text" name="text_field" id="text_field" required placeholder="Text field"> <label>Text</label> </p> <p> <input type="text" name="text_field_2" id="text_field_2" list="suggestions" size="40" required placeholder="Type 'a', 'b', or 'f' to see a suggestion..."> <label>Auto-Suggestion Text</label> <datalist id="suggestions"> <option value="Airport"> <option value="Beach"> <option value="Fred Flinstone's House"> </datalist> </p> <p> <input type="tel" name="phone_field" id="phone_field" placeholder="Tel field"> <label>Telephone</label> </p> <p> <input type="email" name="email_field" id="email_field" placeholder="Email field"> <label>Email Address</label> </p> <p> <input type="search" name="search_field" id="search_field" placeholder="Search field"> <label>Search</label> </p> <p> <input type="url" name="url_field" id="url_field" placeholder="URL field"> <label>URL</label> </p> <p> <input type="password" name="password_field" id="password_field" placeholder="Password field"> <label>Password</label> </p> <p> <input type="number" name="number_field" id="number_field" placeholder="Number field"> <label>Number</label> </p> </fieldset> <fieldset> <legend>Dates & Times</legend> <p> <input type="time" min="09:00" max="22:00" step="900" name="time_field" id="time_field"> <label>Time</label> </p> <p> <input type="date" name="date_field" id="date_field"> <label>Date</label> </p> <p> <input type="datetime" name="datetime_field" id="datetime_field"> <label>Datetime</label> </p> <p> <input type="datetime-local" name="datetime-local_field" id="datetime-local_field"> <label>Datetime Local</label> </p> <p> <input type="month" name="month_field" id="month_field"> <label>Month</label> </p> <p> <input type="week" name="week_field" id="week_field"> <label>Week</label> </p> </fieldset> <fieldset> <legend>Radio Buttons</legend> <p><label class="choice"> <input type="radio" name="radio_field" id="radio_field" required value="rb1" checked> Radio Button 1 </label></p> <p><label class="choice"> <input type="radio" name="radio_field" id="radio_field" required value="rb2"> Radio Button 2 </label></p> <p><label class="choice"> <input type="radio" name="radio_field" id="radio_field" required value="rb3"> Radio Button 3 </label></p> </fieldset> <fieldset> <legend>Checkboxes</legend> <p><label class="choice"> <input type="checkbox" name="checkbox_field" id="checkbox_field" value="cb1" checked> Checkbox 1 </label></p> <p><label class="choice"> <input type="checkbox" name="checkbox_field" id="checkbox_field" value="cb2"> Checkbox 2 </label></p> <p><label class="choice"> <input type="checkbox" name="checkbox_field" id="checkbox_field" value="cb3"> Checkbox 3 </label></p> </fieldset> <fieldset> <legend>Range Fields</legend> <p> <input type="range" name="range_field" id="range_field"> <label>Range</label> </p> </fieldset> <fieldset> <legend>Color Fields</legend> <p> <input type="color" name="color_field" id="color_field" value="#00ff00"> </p> </fieldset> <fieldset> <legend>File Upload Fields</legend> <p> <input type="file" name="file_field" id="file_field" value=""> <label>File</label> </p> </fieldset> <fieldset> <legend>Hidden Fields</legend> <p> <input type="hidden" name="hidden_field" id="hidden_field" value=""> <label>Hidden fields are not displayed in the browser, but you can still grab the code from here.</label> </p> </fieldset> <fieldset> <legend>Buttons</legend> <p><input type="button" name="button_button" id="button_button" value="Button"></p> <p><input type="submit" name="submit_button" id="submit_button" value="Submit"></p> <p><input type="reset" name="reset_button" id="reset_button" value="Reset"></p> </fieldset> </form> </body> </html>
