×

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 <span> tag

The span tag in HTML is used as an inline container element to mark up a specific or special chunk of a text or a section of a page. If you...

2 minutes read.

HTML <select> tag

This tag helps in making the drop-down list on the web page. This is highly used in HTML forms for taking the input from user. You can use the id attribute...

3 minutes read.

HTML 5 Tutorial

What is HTML5? HTML5 is a programming language which stands for the acronym Hyper Text Markup Language 5. It is program that enables the appearance of web pages to be changed, as well as changes...

5 minutes read.

HTML Unordered List

In HTML, we have <ul> tag which defines the unordered list. And it is also known as bulleted list, because as we know it is not ordered list therefore it...

2 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.

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.

HTML Button Disabled

The HTML <button> element has many attributes, one of them is the disabled attribute. The button on which you apply the disabled attribute will not work, or we can say...

4 minutes read.

HTML Anchor

HTML Anchor The HTML anchor tags define a hyperlink that links to other pages on one page. It can create hyperlinks to any web page and files, locations or any other...

3 minutes read.

Html <colgroup> Tag

A HTML table's column group is specified by the "colgroup" tag. If you want to apply various properties to one or more <col> elements in an HTML table, then you...

4 minutes read.

How to append HTML code to a div using JavaScript?

In HTML, we have a div tag which is used to create a box where we can put a lot of other tags. So it works like a container. So,...

4 minutes read.

HTML5 Button Tag

HTML Button Tag The < button > tag is used on the webpage to construct a clickable button inside the HTML. Within the < button>....</button > tag, we can place content...

2 minutes read.

HTML <sup> Tag

The HTML sup element is used to describe one or more superscript contents. The sup tag shows a text which is presented above the regular line and half the length...

2 minutes read.

How to add Google Translate Button on your Webpage?

Google translator is a multi-language translator used for translating the webpage. Google develops it. In today's digital age, it is essential because information is available worldwide in some specific language...

5 minutes read.

HTML Form Action

The <form> tag has an attribute named action that contains a URL. The HTML action attribute defines the webpage URL on which you want to send the data after submitting...

4 minutes read.

HTML <sub> tag

The sub element in HTML is used to describe one or more subscript texts. If The sub tag shows the text which is presented in a smaller font and below...

2 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 <samp> tag

The Samp tag in HTML is used for defining the sample output from the computer program. This tag is a phrase type tag and a container tag that means the...

2 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 Links

It consist of anchor element which is used to create a link between a source anchor and destination anchor. The anchor tag can be embedded between text, image, video or...

2 minutes read.

HTML <strong> tag

The strong element in HTML is used to display the real significant information in bold so that the user or reader will understand it easily. Syntax: <p> <strong>………… </strong> </p> Example Here, we will demonstrate how to...

2 minutes read.