Skip to content

Instantly share code, notes, and snippets.

@vaniadimova
Created January 13, 2020 15:42
Show Gist options
  • Save vaniadimova/cd3ddcdca7a021595954d2e34ac96dd1 to your computer and use it in GitHub Desktop.
Save vaniadimova/cd3ddcdca7a021595954d2e34ac96dd1 to your computer and use it in GitHub Desktop.
<form>
<p>First name (required):<br><input type="text" name="first_name" required></p>
<p>Last name (required):<br><input type="text" name="last_name" required></p>
<p>Email, required to recieve email confirmation:<br><input type="email" name="email"></p>
<p>Phone (required):<br><input type="tel" name="phone" required></p>
<p>Street Address or P.O. Box (required):<br><input type="text" name="address" required></p>
<p>Apartment, Suite, or No.:<br><input type="text" name="address_2"></p>
<p>City (required): <input type="text" name="city" required></p>
<p>State: <select name="state" required><option value="AL">AL</option><option value="AK">AK</option>
<option value="AZ">AZ</option><option value="AR">AR</option><option value="CA">CA</option><option value="CO">CO</option>
<option value="CT">CT</option><option value="DE">DE</option><option value="FL">FL</option><option value="GA">GA</option>
<option value="HI">HI</option><option value="ID">ID</option><option value="IL">IL</option><option value="IN">IN</option>
<option value="IA">IA</option><option value="KS">KS</option><option value="KY">KY</option><option value="LA">LA</option>
<option value="ME">ME</option><option value="MD">MD</option><option value="MA">MA</option><option value="MI">MI</option>
<option value="MN">MN</option><option value="MS">MS</option><option value="MO">MO</option><option value="MT">MT</option>
<option value="NE">NE</option><option value="NV">NV</option><option value="NH">NH</option><option value="NJ">NJ</option>
<option value="NM">NM</option><option value="NY">NY</option><option value="NC">NC</option><option value="ND">ND</option>
<option value="OH">OH</option><option value="OK">OK</option><option value="OR">OR</option><option value="PA">PA</option>
<option value="RI">RI</option><option value="SC">SC</option><option value="SD">SD</option><option value="TN">TN</option>
<option value="TX">TX</option><option value="UT">UT</option><option value="VT">VT</option><option value="VA">VA</option>
<option value="WA">WA</option><option value="WV">WV</option><option value="WI">WI</option><option value="WY">WY</option>
</select>
<p>Date of Arrival (required): <input type="date" name="arrival" required></p>
<p>Date of Departure (required): <input type="date" name="departure" required></p>
<fieldset>
<legend>Party Details</legend>
<p>So that we may select the best room for your stay, please tell us a little about your party.</p>
<p>Number of guests in your party (required): <input type="number" name="party_size" required></p>
<p>Have you stayed with us before?<br>
Yes <input type="radio" name="stayed" value="yes"><br>
No <input type="radio" name="stayed" value="no">
</p>
<p>Amenities you plan to use (select all that apply):<br>
Room service <input type="checkbox" name="room_service"><br>
Sofa Bed <input type="checkbox" name="sofa_bed"><br>
Swimming Pool <input type="checkbox" name="swimming"><br>
Spa <input type="checkbox" name="spa"><br>
Fitness Room <input type="checkbox" name="fitness"><br>
Wireless Internet <input type="checkbox" name="wifi"><br>
</p>
<p>Preferred Bed Arrangment:
<select name="beds">
<option value="one king">One King Bed</option>
<option value="one queen">One Queen Bed</option>
<option value="two double">Two Double Beds</option>
<option value="two queen">Two Queen Beds</option>
<option value="two king">Two King Beds</option>
</select>
</p>
</fieldset>
<p>Special requests<br>
<textarea placeholder="Is there anything else you'd like to let us know about your stay?" rows="6" cols="60" name="comments"></textarea>
</p>
<p>Would you like to receive an occasional email with discount coupons and special offers? If so, select the following box to join our email list.
<br><input type="checkbox" name="opt_in" value="yes">
</p>
<input type="submit">
</form>
Step 1: Clean Up and Organize HTML
When we originally created this form we used paragraph elements and line break to create an acceptable visual appearance. However, now that we're going to use CSS to format the appearance of the form we will be better served to use spans and to remove the HTML line breaks. We will place any field composed of a short bit of text and an input element inside of span tags and remove all hard line breaks.
<!--Original Code-->
<p>First name (required):<br><input type="text" name="first_name" required></p>
<p>Last name (required):<br><input type="text" name="last_name" required></p>
<!--With Line Breaks Removed and Paragraphs Replaced-->
<span>First name (required): <input type="text" name="first_name" required></span>
<span>Last name (required): <input type="text" name="last_name" required></span>
Read more: https://html.com/forms/form-styling-design/#ixzz6AvSFg9cf
@vaniadimova
Copy link
Author

sign in form for customers form from the resort website

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment