Skip to content

Instantly share code, notes, and snippets.

@tbennett

tbennett/form_example

Last active April 5, 2022 20:41
Show Gist options
  • Save tbennett/4fb424cd40f8e22ecad8 to your computer and use it in GitHub Desktop.
Save tbennett/4fb424cd40f8e22ecad8 to your computer and use it in GitHub Desktop.
Download ZIP
HTML5 Example Form
Raw
form_example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Example Form: Kitchen-Sink</title>
</head>
<body>
<!-- the enctype attribute is used only when we are using the file input type to allow for file uploads via the form -->
<form id="res_form" action="" method="get" accept-charset="utf-8" enctype="multipart/form-data">
<!-- these fields can be used to pass special information to the server, like cookie data. -->
<input type="hidden" id="refer" name="referrer" value="" />
<input type="hidden" id="acc_number" name="account_number" value="" />
<input type="hidden" id="acc_name" name="account_name" value="" />
<!-- fieldsets are used to organize and structure complex forms. All forms should have at least one -->
<fieldset>
<legend>Guest Information<span class="right">* Indicates required field</span></legend>
<!-- lists (ul or ol) are a good structure to use to further structure and organize a form.
I use lists because a form is essentially a list of inputs, typically filled out in order. -->
<ol>
<li>
<label for="first">* First Name</label>
<input type="text" id="first" name="first_name" required autofocus maxlength="40" />
</li>
<li>
<label for="last">* Last Name</label>
<input type="text" id="last" name="last_name" required maxlength="80" />
</li>
<li>
<label for="phone_num">* Phone Number <span id="phone-format">(123-456-7890)</span></label>
<input type="tel" id="phone_num" name="phone" class="phoneUS" required />
</li>
<li>
<label for="time">* Best Time to Call</label>
<select id="time" name="when2call" required title="Please select a time of day.">
<option value="">Pick a time of day</option>
<option>Morning</option>
<option>Afternoon</option>
<option>Evening</option>
</select>
</li>
<li>
<label for="user_email">* Email Address</label>
<input type="email" id="user_email" name="email" required maxlength="80" />
</li>
<li>
<label for="st_address">Home Address</label>
<input type="text" id="st_address" name="address" />
</li>
<li>
<label for="city_name">City</label>
<input type="text" id="city_name" name="city" maxlength="40" />
</li>
<li>
<label for="state_us">State/Territory</label>
<select id="state_us" name="state" title="Please select a state or territory.">
<option value="">select your location</option>
<optgroup label="----">
<option value="AL">Alabama</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="PR">Puerto Rico</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="VI">US Virgin Islands</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</optgroup>
</select>
</li>
<li>
<label for="zip_code">Zip Code</label>
<input type="text" id="zip_code" name="zip" required pattern="\d{5,5}(-\d{4,4})?" title="" />
</li>
<li>
<label for="num_adults">Adults</label>
<select id="num_adults" maxlength="2" name="adults">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="This is starting to get kinky!">over 10</option>
</select>
</li>
<li>
<label for="num_children">Children</label>
<select id="num_children" maxlength="4" name="kids">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="Are you kidding?">10 and over</option>
</select>
</li>
</ol>
<fieldset id="days">
<legend>Favorite Days of the Week</legend>
<input type="checkbox" name="week_days[]" value="1" />
<label for="sun">Sun</label>
<input type="checkbox" name="week_days[]" value="2" />
<label for="mon">Mon</label>
<input type="checkbox" name="week_days[]" value="3" />
<label for="tues">Tues</label>
<input type="checkbox" name="week_days[]" value="4" />
<label for="wed">Wed</label>
<input type="checkbox" name="week_days[]" value="5" />
<label for="thurs">Thurs</label>
<input type="checkbox" name="week_days[]" value="6" />
<label for="fri">Fri</label>
<input type="checkbox" name="week_days[]" value="7" />
<label for="sat">Sat</label>
</fieldset>
</fieldset>
<fieldset class="check_in">
<legend><label for="now">Check In and Check Out</label></legend>
<ol>
<li>
<label for="check_in">Preferred Check In Date:</label>
<input type="date" id="check_in" name="checkIn" placeholder="MM/DD/YYYY" class="date" />
</li>
<li id='out'>
<label for="check_out">Check Out Date: </label>
<input type="date" id="check_out" name="checkOut" placeholder="MM/DD/YYYY" />
</li>
</ol>
<input id="now" type="radio" name="now" value="book now" /><span>Select your dates now and save an additional $20,000,000!</span>
<p>
<input id="later" type="radio" name="now" value="book later" checked /><span>Confirm this special rate now and book your dates anytime within the next six months</span>
</p>
</fieldset>
<fieldset id="special_requests">
<legend><label for="special">Special Requests</label></legend>
<textarea id="special" name="requests" rows="7" cols="38"></textarea>
<div>
<label for="pic">ID Photo: </label>
<input type="file" id="pic" name="photo" />
</div>
</fieldset>
<fieldset>
<legend><label for="accept">* Details of Participation</label></legend>
<input type="checkbox" id="accept" name="legal" value="accepted" required checked />
<span>I acknowledge by selecting this checkbox, I accept the legal mumbo jumbo and owe you $10.</span>
<fieldset>
<input type="reset" value="Clear" />
<input type="submit" value="Submit" />
</fieldset>
</fieldset>
</form>
</body>
</html>
<!--
Example output using GET method
Some fields are left empty.
All special characters have been URLEncoded (e.g. @ = %40 and [] = %5B%5D space = +)
referrer=&account_number=&
account_name=&
first_name=troy&
last_name=bennett&
phone=1234567890&
timeofday=Morning&
email=tb%40tb.tb&
address=&
city=&
state=AL&
zip=12345-1234&
adults=2&
children=1&
week_days%5B%5D=1&
week_days%5B%5D=2&
week_days%5B%5D=3&
check_in=2022-04-05&
check_out=2022-04-21&
now=book+later&
special=spwcial+text+here&
pic=&
accept=accepted
-->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment