Web Forms

Today I learned how to create a web form. I learned the basics in my online web development class, and decided to take it up a notch and explore real-life applications and created this awesome form!

Here is the application in it’s basic form that I started out creating:

Screen Shot 2015-07-23 at 10.21.05 AM

And here’s what I did with it! I used HTML5 solely on this form. It’s a silly concept, and hopefully a program like this does not exist, but it was a fun idea to come up with.

Screen Shot 2015-07-23 at 10.29.20 AM

Here’s a closer look at the code I used:

<!DOCTYPE html>
<html>
<head>
<title>Cat-Share Kitty Delivery</title>

<meta charset=”utf-8″ />
<meta http-equiv=”Content-type” content=”text/html; charset=utf-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1″ />

</head>

<body>
<div>
<h1>
Thanks for signing up with Cat-Share! </h1>
<p>Please fill out the following application to determine your eligibility for a shipment of cats:
</p>
<ol>
<li> Name: <input type=”text” placeholder=”type here…” /> </li>
<li> Date Available: <input type=”text” placeholder=”type here…” /> </li>
<li> Email: <input type=”text” placeholder=”type here…” /> </li>
<li> Phone Number: <input type=”text” placeholder=”type here…” /> </li>
</ol>
<br>
<option>Your favorite type of cats:</option>
<input type=”text” />

<br />
<br><option>Describe yourself:</option>
<textarea></textarea>

<br />
<br>
<option>Describe your interest in cats:</option>
<textarea></textarea>

<br />

<br>
<select>
<option>Choose a litter type</option>
<option value=”1″>Domestic short-hair</option>
<option value=”2″>Domestic long-hair</option>
<option value=”3″>Endangered short-hair</option>
<option value=”4″>Endangered long-hair</option>
<option value=”5″>Large wild cats</option>
</select>
<br />

<br>
<option>Are you okay with the following:</option>
<input type=”checkbox” /> Fur all over the furniture
<input type=”checkbox” /> Possible male cat spray
<input type=”checkbox” /> Unpredictable aggressive behavior
<input type=”checkbox” /> Refusal of snuggles

<br />

<br>
<option>How would you like your box of kitties delivered:</option>
<input type=”radio” name=”options” /> Pickup from store (preferred method)
<input type=”radio” name=”options” /> Home delivery (must be home to give consent)
<input type=”radio” name=”options” /> Dropped off at your local crazy neighbor’s house
<br />

<br>
<p>
By signing your full name below, you accept all terms of service and you will love and keep the cats throughout their lives.

<option></p><input type=”text” /></option>

<input type=”submit” value=”Submit Application”>
</div>
</body>
</html>


Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s