HTML Forms

Forms

<form>
    <input name="firstName"/>
    <button type="submit">Send</button>
</form>
  • Allow users the enter data in various standard controls
  • Allow basic submition of that data to the server

Forms - input tag

  • value - the value of the control
  • type - it's purpose
    • submit
    • button
    • text
    • email
    • password
    • color
    • radio
    • checkbox
    • file
    • hidden
    • ...

Forms - select tag

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Forms - other tags

<label for="description">some text</label>
<textarea id="description">
    some text
</textarea>



<textarea rows="10" cols="30">
    some text
</textarea>

<button type="button">Click Me!</button>

form attributes

  • method - the HTTP method
  • action - the url to submit to

form attributes

  • method - the HTTP method
  • action - the url to submit to

Exercise

  1. Use the DevTool selection tool to inspect various elements on a page
  2. Which do you think is block and which is inline ?

End

Made with Slides.com