Input type: Text

  • Defines a one-line input field for text.
  • Syntax: <input type="text">

Example:

<input type="text" placeholder="I am a text input type" size="box-width">

Note: The default maximum length is 20 characters long


Input type: Submit

  • Defines a button.
  • Syntax: <input type="button">

Example:

<input type="button" value="I am a submit button">

Input type: Radio

  • Defines a button similar to checkboxes but only 1 option can be chosen from a pool of choices.
  • Syntax: <input type="radio">

Example:

<input type="radio" name="option" value="A">KMS Gneisenau<br>

<input type="radio" name="option" value="B">KMS Scharnhorst

 KMS Gneisenau
KMS Scharnhorst

Note: To have 2 options selected at the same time, use unique names for each option.


Input type: Checkboxes

  • Defines a button checkboxes that can be selected (multiple or not).
  • Syntax: <input type="checkbox">

Example:

<input type="checkbox" name="optionA" value="A">HMS Illustrious<br>

<input type="checkbox" name="optionB" value="B">HMS Formidable<br>

<input type="checkbox" name="optionC" value="C">HMS Indomitable<br>

<input type="checkbox" name="optionD" value="D">HMS Victorious

 HMS Illustrious
HMS Formidable
HMS Indomitable
HMS Implacable


Other input types

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • Number
  • range
  • search
  • tel
  • time
  • url
  • week

Example:

<input type="color">

Pick your favorite color :>



<input type="date"">

Enter your birthday :>



Action attribute

  • An attribute for the form tag specifying where data will be sent.
  • Syntax: <form action="   ">

POST and GET method

  • POST and GET is how the data will be transmitted to the server.