Chapter 14. HTML Forms: Getting Interactive

Keyword: form

  • A form is basically a web page with input fields that allows you to enter information.
    When the form is submitted, that information is packaged up and sent off to a web server to be processed by a server script.
    When the processing is done, you get another web page, as a response.
  • The <form> element defines the form, and all form input elements are nested inside it.
  • input type: text radio checkbox textarea select password file placeholder
    HTML5: number range color date mail tel url
    More things that can go in a form: multiple required checked
  • There are two primary methods the browser uses: POST and GET.
    • POST packages up your form variables and sends them behind the scenes to your server
    • GET also packages up your form variables, but appends them on the end of the URL before it sends a request to the server
    • If you use a
  • HTML also provides a <fieldset> element that can be used to group together common elements. <fieldset> makes use of a second element, called <legend>.
  • The action attribute contains the URL of the server script.

 <form action="http://www.starbuzzcoffee.com/processorder.php" method="post">
	<div class="tableRow">
		<p>
          Choose your beans:
		</p>
		<p>
            <select name="beans">
              <option value="House Blend">House Blend</option>
              <option value="Bolivia">Shade Grown Bolivia Supremo</option>
              <option value="Guatemala">Organic Guatemala</option>
              <option value="Kenya">Kenya</option>
            </select>
		</p>
	</div>
	<div class="tableRow">
		<p> Type: </p>
		<p>
            <input type="radio" name="beantype" value="whole"> Whole bean<br>
            <input type="radio" name="beantype" value="ground" checked> 
            Ground
		</p>
	</div>
	<div class="tableRow">
		<p> Number of bags: </p>
		<p> <input type="number" name="bags" min="1" max="10"> </p>
	</div>
	<div class="tableRow label">
		<p> Must arrive by date: </p>
		<p> <input type="date" name="date"> </p>
	</div>
	<div class="tableRow">
		<p> Extras: </p>
		<p>
            <input type="checkbox" name="extras[]" value="giftwrap"> Gift wrap<br>
            <input type="checkbox" name="extras[]" value="catalog" checked>
            Include catalog with order
		</p>
	</div>
	<div class="tableRow">
		<p class="heading"> Ship to </p>
		<p></p>
	</div>
	<div class="tableRow">
		<p> Name: </p>
		<p> <input type="text" name="name" value="" placeholder="Buckaroo Banzai" required> </p>
	</div>
	<div class="tableRow">
		<p> Address: </p>
		<p> <input type="text" name="address" value="" placeholder="Banzai Institute" required> </p>
	</div>
	<div class="tableRow">
		<p> City: </p>
		<p> <input type="text" name="city" value="" placeholder="Los Angeles" required> </p>
	</div>
	<div class="tableRow">
		<p> State: </p>
		<p> <input type="text" name="state" value="" placeholder="CA" required> </p>
	</div>
	<div class="tableRow">
		<p> Zip: </p>
		<p> <input type="text" name="zip" value="" placeholder="90050" required> </p>
	</div>
	<div class="tableRow">
		<p> Phone: </p>
		<p> <input type="tel" name="phone" value="" placeholder="310-555-1212" required> </p>
	</div>
	<div class="tableRow">
		<p> Customer Comments: </p>
		<p>
            <textarea name="comments"></textarea>
		</p>
	</div>
	<div class="tableRow">
		<p></p>
		<p> <input type="submit" value="Order Now"> </p>
	</div>
    </form>

Word list

  • butt
  • snippet
  • bracket
  • valid
  • append
  • colophon
  • sibling
  • bid
  • hipster

20250916 15:15 Finished reading this book!

<
Previous Post
0912 Learning, reading, sleeping
>
Next Post
0916 Finished a book and started reading a new one