×

HTML Forms

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.
<form>  
         First name: <input type = "text" name = "first_name" /><br>  
         Last name: <input type = "text" name = "last_name" /><br>  
<textarearowstextarearows = "5" cols = "50" name = "Description">  
            Enter description here...  
</textarea>  
</form>
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>
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.
<body>  
<form>  
<input type = "radio" name = "male" value = "male"> Male  
<input type = "radio" name = "female" value = "female"> Female  
</form>  
</body>
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.
<form>  
<select name = "dropdown">  
<option value = "State" selected>State</option>  
<option value = "Assam">Assam</option>  
<option value = "Bihar">Bihar</option>  
</select>  
</form>
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>
Output:

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

Related Topics

Html &lt;center> Tag

The term HTML refers to Hyper Text Markup Language. The most widely used markup language for making web pages is HTML. A structure of web page is described in HTML....

3 minutes read.

HTML SVG

HTML SVG: SVG stands for Scalable Vector Graphics which defines the graphics for the web. It is a language for describing 2-D graphics in XML. Each drawn shape in SVG is...

1 minute read.

HTML Nested Table

HTML nested table refers to a table that is created inside another table. The table is in the form of rows and columns. From left to right are called horizontal rows,...

5 minutes read.

HTML Reset Button

The HTML reset button is used to reset all values in the form. It clears all input fields. Reset is the value of the type attribute of the button element. The...

6 minutes read.

HTML Font Size

The HTML <font> tag uses the size attribute to specify the size of the text. We can set the size attribute’s value from 1 to 7. The default size of...

4 minutes read.

HTML5 Attribute

HTML Attribute HTML attributes are special words that provide additional information about the HTML element or attributes.The element or tags have attributes, which define the element's behavior.It also adds attributes with a start...

3 minutes read.

HTML Lists

HTML List HTML lists are used to specify data sets. All lists can include one or more elements from the list. HTML lists are available in three different types: Ordered List or...

4 minutes read.

HTML Data Tag

HTML Data Tag: The HTML < data > tag is used to transmit its content to a machine-readable version. The data are presented in a particular format. It is useful...

3 minutes read.

What does HTML stand for?

HTML stands for Hyper Text Markup Language. We use this markup language to design a web page. Web browsers use this language to showcase text, videos, images, audio and other...

6 minutes read.

HTML Background Image

Inserting image in HTML An image (technically digital image) in HTML or even in general technical aspects, is a binary representation of visual information. By visual information we mean, in the...

8 minutes read.

Responsive HTML5 and CSS3 Tutorial

Introduction to HTML5 Tutorial HTML5 is the latest and upgraded version of HTML. HTML is a hypertext markup language. Technically, it is not a programming language. It is a markup language. HTML...

17 minutes read.

HTML Video

HTML VIDEO: HTML5 has introduced the <video> tag to embed video into the webpage directly without using the plug-ins.   Syntax: <video attributes >     <source src="address" type="video/mp4">     Your browser does not support the video tag.   </video> <video width="320" height="240" controls>     <source src="mountain.mp4" type="video/mp4">     Your browser does not support the video tag.   </video> Output: ← Prev ...

1 minute read.

HTML Paragraphs

In html, there are some elements which starts with new line and one of them is paragraph. Which is said to be a block of text. In html <p> tag...

4 minutes read.

HTML <strike> tag

The HTML <strike> tag is used to specifies strikethrough text. The tag is deprecated now and <del> tag is used in HTML files instead of it. All the global and...

2 minutes read.

HTML <br> tag

HTML is referred to as Hyper Text Markup Language, which is the most popular language for creating Web pages. HTML explains the construction of a Web page. It contains a...

4 minutes read.

HTML City tag

HTML <City> tag HTML < cite > tag specifies a citation, a reference or title to a creative work, quoted content, books, websites, a research paper, a blog post, a painting,...

3 minutes read.

Font tag in HTML

HTML stands for Hypertext Mark-up Language and is used to create web pages and other information that can be later displayed in a web browser. It also consists of a...

4 minutes read.

Caption Tag in HTML

Caption Tag in HTML: The < caption > tag in HTML describes the heading of a table in the HTML text. Browsers typically make the text found above the table...

4 minutes read.

How to insert spaces/tabs in text using HTML/CSS

What is HTML? HTML or HyperText Markup Language is used to design web pages. It was released in 1993. The file extension name for HTML file is “.html”. An HTML file...

4 minutes read.

HTML <section> tag

The section element in HTML is used to define sections in a document. Syntax of Section Tag: <body> <h1>……….</h1> <section> <h2>……….</h2> <p> …………………………</p> </section> <section> <h2>………..</h2> <p>…………………………. <p> </section> </body> Examples of Section Tag Example 1: In this example, we use the HTML "section" element...

3 minutes read.