×

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

How to Create a Portfolio Gallery using HTML and CSS?

First, before starting this, the user should know some of the basics of HTML and CSS to create a portfolio gallery. To add more functionality to the website, we can also...

7 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 Layouts

HTML Layouts HTML templates provide a way for well-managed, well-structured responsive web pages to be organized. We could say that the HTML layout specifies how web pages can be set up....

4 minutes read.

HTML Audio

HTML AUDIO: HTML5 provides a method to embed the audio file into a webpage by using HTML5. Before HTML5 audio files is used to play on the browser with the help of...

1 minute 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.

Html Wbr Tag

The Line Break Opportunity element A word break opportunity is a place in text from where the browser breaks a line. This opportunity is represented by the element wbr in the...

2 minutes read.

HTML Event Attributes

HTML Event Attributes If a browser responds to the user behavior, an event is called. For example, if we click on the submit button, a box of details will appear on...

4 minutes read.

HTML Text Format

Introduction HTML may format text in two different ways. The HTML tags define a text property to make it appear one way or another. A text element may also be formatted...

7 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 Tutorial

Introduction This HTML tutorial helps beginners and professionals to learn HTML easily. HTML is a widely used web technology for website development. It stands for Hyper Text Markup Language. It is mainly used to...

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

HTML References

BASIC HTML TAGS TAGS DESCRIPTION <!DOCTYPE> Defines Document Type <html> Defines Html document <head> Defines Header of document <title> Defines Title of document <body> Describe all the content of document <h1> to <h6> Defines Html Heading <p> Write Paragraph in this tag <br> Line break <!--...--> Comment in Html FORMATTING TAGS TAGS DESCRIPTION <abbr> Defines...

3 minutes read.

HTML <table> tag

The Table element If we want to show the data and information in a two-dimensional table with rows and columns, then we can achieve this by using the HTML element <table>. Syntax: <body> <table> <thead> <tr> <thcolspan="#">………….</th> </tr> </thead> <tbody> <tr> <td>……….</td> <td>……….</td> </tr> </tbody> </table> </body> Example: <!DOCTYPE...

9 minutes read.

HTML Hide Element

The HTML hide element is used to hide the element. We place the hidden attribute inside those elements which we want to hide. The hidden attribute is a Boolean attribute. The...

3 minutes read.

How to change font in HTML

To give style to the content of your website, you may change the font of the text and make your website look attractive to the user. There are several methods which...

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.

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

HTML means Hyper Text Markup Language, which is most preferred for making Web pages. It explains how a Web page is put together. There are many different elements in HTML,...

3 minutes read.

HTML <style> tag

The section of information that we want to style is contained in html style tag. It includes CSS, which is used to design the text and images in the web page. Syntax: <head> <title>…………....

3 minutes read.

HTML Attributes

HTML Attributes provide the additional information about HTML elements. Attributes are always specified in the start tag. Attributes usually comes in pairs. lang Attribute This attribute helps in declaring the language...

2 minutes read.