Lessons:

  • 24. HTML – Introduction to Forms
  • 25. HTML Form Tags and Attributes
  • 26. HTML Forms – Post vs. Get
  • 27. HTML Forms – Input Text Fields
  • 28. HTML Forms – Select Menus
  • 29. HTML Forms – Check Boxes and Radio Buttons
  • 30. HTML Forms – Text Areas and Buttons

HTML Codes:


<!doctype html>

<html>

	<head>
		<title>Table Tutorial</title>
		<meta charset="utf-8">
	</head>


<body>

<form name="employment" action="send.php" method="post">
 <table width="600" border="1" cellspacing="2" cellpadding="2">
    <tr>
      <td>Employement Application</td>
      <td></td>
    </tr>
    <tr>
      <td>First Name</td>
      <td><input type="text" name="fname" maxlength="50" /></td>
    </tr>
    <tr>
      <td>Last Name</td>
      <td><input type="text" name="lname" maxlength="50" /></td>
    </tr>
    <tr>
      <td>Position</td>
      <td>
		  <select name="position">
			  <option value="AC">Accountant</option>
			  <option value="RE">Receptionist</option>
	  		  <option value="AD">Administrator</option>
			  <option value="SU">Supervisor-</option>
		  </select>
		</td>
    </tr>
    <tr>
      <td>Experience Level</td>
      <td>
		<select name="experience">
			  <option value="EL">Entry Level</option>
			  <option value="SE">Some Experience</option>
	  		  <option value="VE">Very Experienced</option>
		  </select>
		</td>
    </tr>
    <tr>
      <td>Job Type</td>
       <td>
		<input type="checkbox" name="ft"/>Full-time
		  <input type="checkbox" name="ft"/>Part-time
		  <input type="checkbox" name="ft"/>Contract
		</td>
    </tr>
    <tr>
      <td>Employment Status</td>
      <td>
	      <input type="radio" name="estatus" value="employed"/> Employed
		  <input type="radio" name="estatus" value="unemployed"/> Unemployed
		  <input type="radio" name="estatus" value="student"/> Student
		</td>
    </tr>
    <tr>
      <td>Additional Comments</td>
      <td>
		<textarea name="comments" cols="45" rows="5"></textarea>
		</td>
    </tr>
    <tr>
      <td></td>
      <td>
		<input type="submit" name="submit" value="submit"/>
		  <input type="reset" name="reset" value="reset"/>
		</td>
    </tr>
  </table>
	</form>


</body>
</html>

Compiled:

Table Tutorial
Employement Application
First Name
Last Name
Position
Experience Level
Job Type Full-time Part-time Contract
Employment Status Employed Unemployed Student
Additional Comments

Link:

Form.html