01 - Adding basic html elements

01 - Adding basic html elements

by mattslay

HTML

<!DOCTYPE html>
<html>
<body>

<p>This example shows how to create the basic input conrtols that you'd typically use when creating data oriented forms for a user to enter data or perform some type of interaction with your application.</p>

<hr />

<h2>Please complete the following fields:</h2>

<div>
  First Name
  <input/>
</div>

<br />

<div>
  Last Name
  <input />
 </div>

 <div style="margin-top: 15px;">
     Favorite Sport
     <select>
         <option value="blank"></option>
         <option value="Football">Football</option>
         <option value="Soccer">Soccer</option>
         <option value="Tennis">Tennis</option>
         <option value="Bowling">Bowling</option>
     </select>
 </div>

 <div style="margin-top:15px;">
     Skill Level:<br />
     <input type="radio" name="skill_level" value="Beginner">Beginner<br />
     <input type="radio" name="skill_level" value="Intermediate">Intermediate<br />
     <input type="radio" name="skill_level" value="Expert">Expert<br />
 </div>

<br />

<div>
  <table>
    <tr>
      <td>Notes:</td>
      <td><textarea rows="4" cols="50"></textarea></td>
    </tr>
  </table>
</div>


</body>
</html>

JavaScript

// Note: This is not really much of a functioning page, in that it won't really do anything with 
// the entered data. The intent here is to show you the code used to create these types of 
// input controls (also called form elements").

// If this page were to become a more robust and fuilly functioning page, it would likely wrap all of
// these controls in a <form> element, and it would have a "submit" button which would send the
// form values back to the server for processing. Or, it might use an "ajax" call to submit the
// data to the server, which is one more level of complexity higher than a "form post".