Forms

Forms require the following attributes:

  • action: tells where to send the form:https://wp.zybooks.com/form-viewer.php can be used for testing form submission.
  • method: tells what method to use to send form -method='post' or method='get'
    • post: sends data in the body of the request, not visible in the URL (most common)
    • get: sends data in the URL, visible to users
  • enctype='multipart/form-data': only if the form requires file uploads
  • Attribute name is used to identify the input on the backend - e.g., name='firstName'
<form action='submit.html' method='post'>
  <label for='name'>Name:</label>
  <input type='text' id='name' name='name' required /><br>
  <input type='submit' value='Submit' />
</form>

Input Types

  • <input type='' id='inputId'>: possible types: text, email, tel, file, submit, radio, checkbox, number, date
  • <label for='inputId'>: label for the <input>; links the label to input's id
  • <fieldset>: container element to group related inputs

Input Attributes

  • name
  • id
  • value
  • required
  • autofocus
  • max/min/step
<label for='nameId'>First Name:</label>
<input type='text' name='name' id='nameId' />

  • The label element is tied to the input element using for and id

<label for='myEmailId'>Email Address:</label>
<input type='email' name='myEmail' id='myEmailId' />
<label for='myPW'>Password:</label>
<input type='password' name='myPW' id='myPWid' />
<label for='birthDate'>Birth Date:</label>
<input type='date' name='birthDate' id='birthDateId' />

Radio Buttons

Best Contact Time

<fieldset>
  <legend>Best Contact Time</legend>
  <!-- Only one radio button can be selected because they share the same name='contactTime' -->
  <input type='radio' name='contactTime' id='morningId' value='morningTime'>
  <label for='morningId'>Morning</label><br>
  
  <input type='radio' name='contactTime' id='eveningId' value='eveningTime'>
  <label for='eveningId'>Evening</label><br>
  
  <label for='contactTimeId'>Time:</label>
  <input type='time' name='contactTime' id='contactTimeId'>
</fieldset>

  • Only one radio button can be marked at a time if they share the same name.

Checkboxes

Checkboxes
<fieldset>
  <legend>Checkboxes</legend>
  <input type='checkbox' name='demoCheckBox' id='demoCB1' value='1'>
  <label for='demoCB1'>One</label>

  <input type='checkbox' name='demoCheckBox' id='demoCB2' value='2'>
  <label for='demoCB2'>Two</label>

  <input type='checkbox' name='demoCheckBox' id='demoCB3' value='3'>
  <label for='demoCB3'>Three</label>
</fieldset>

  • Multiple checkboxes can be marked at the same time.

<label for='mySelectId'>Select Element:</label>
<select name='mySelect' id='mySelectId'>
  <option value='1'>Option 1</option>
  <option value='2'>Option 2</option>
  <option value='3'>Option 3</option>
</select>
<label for='myTA'>Text Area:</label>
<textarea name='myTA' id='myTA' cols='20' rows='4'></textarea>
<label for='myFileId'>Upload File:</label>
<input type='file' name='myFile' id='myFileId'>

Reset/Submit Buttons

<input type='reset' name='resetBtn' id='resetBtn' value='Reset Form'>
<input type='submit' name='submitBtn' id='submitBtn' value='Submit Form'>

Notes

  • The reset button will clear all fields of the form element it's in

  • The submit button will submit the fields to the link specified in action