HTML Forms

tutorial and example
tutorial and example

Forms are required when we want to collect data from the user. Html forms consists of different fields to take user inputs such as: input, text area, checkbox, password, radio button etc. Many languages are embedded with html forms to fully gain the potential use of it.

  • Html: Create forms with different fields to accept user data.
  • CSS: It enhances the style and presentation.
  • JavaScript: It provide validations for form inputs.
  • Server side languages: Like PHP. JAVA, .NET etc. different languages are used to process the data.

Syntax:

  1. <form attributes>
  2.     Form elements like: input, text area, checkbox, password, radio button
  3. </form>

Form Attributes:

  • action: It allows user data to be processed by running backend script.
  • method: It is used to upload data by 2 methods GET & POST.
  • target: It specify the target window where result is to be displayed.
  • enctype: It specifies the browser on how to encodes the data before it sends to the server.

HTML Form Controls

  • Input Controls: When user input the text then the text can be single line or multiple line thus we apply control.
  1. Single Line I/P Control: It is used when user required to enter only single line text as input such as in user name, search box etc. Syntax: <input>? tag.
  2. Multi Line I/P Control: When user details require multi-line or more than single line input. We use <textarea> tag.

Try Now

Output:

First name:
Last name:
Enter description here…
  • Checkbox Control: It is used when user has to select more than one option i.e. multiple options.

Example: In case of Subject Selections, Song selection etc.

  1. <form>
  2. <input type = “checkbox” name = “maths” value = “on”>Maths
  3. <input type = “checkbox” name = “physics” value = “on”> Physics
  4. </form>

Try Now

Output:

Maths Physics

  • Radio Button Control: It is used when out of many option we have to select one options. It is a one to many relations. Example: In case of Gender selection etc.

Try Now

Output:

Male Female

  • Select Box Control: It is also known as drop down box where it provides a list and can select any single value from the list. Example: Selection of state, city etc.

Try Now

Output:

  • Button Controls: Button controls are the integrated attribute of  tag with which we can create clickable buttons. Example: Submit button, Reset Button etc.
  1. <form>
  2. <input type = “submit” name = “submit” value = “Submit”>
  3. <input type = “reset” name = “reset” value = “Reset”>
  4. <input type = “button” name = “ok” value = “OK”>
  5. </form>

Try Now

Output:

  • File Upload Box: It allows user to upload file to some websites. It is also embedded with