Skip to content
  • Quizes
  • QStack
  • Blog
  • pinterest
  • instagram
  • twitter
  • linkedin
  • facebook
W3 Coding Schools
  • Home
  • HTML
    • HTML Introduction
    • HTML Editors
    • Fundamentals of HTML
    • Elements of HTML
    • HTML Attributes
    • HTML Headings
    • HTML Paragraphs
    • HTML Style Attribute
    • HTML Text Formatting
    • HTML Phrase Tags
    • HTML Comments
    • HTML with CSS
    • HTML Links
    • HTML Images
    • HTML Tables
    • HTML Lists
    • HTML Blocks
    • HTML Class Attribute
    • HTML Id Attribute
    • HTML Iframes
    • HTML JavaScript
    • HTML File Paths
    • HTML Head
    • Computer Code Elements
    • HTML Entities
    • HTML Charset
    • HTML URL Encode
    • HTML and XHTML
    • HTML Layouts
    • HTML Forms
    • HTML Form Elements
    • HTML Form Input Types
    • HTML Input Attributes
    • HTML5 Introduction
    • HTML5 New Elements
    • Semantic Elements
    • HTML5 Migration
    • Style Guide
    • HTML Canvas
  • CSS
    • CSS Introduction
    • CSS Syntax and CSS Comments
    • CSS Selectors
    • How to add CSS to a Webpage
    • CSS Color Basics
    • CSS Background Properties
    • CSS Border Properties
    • CSS Margin and Padding Properties
    • CSS Height and Width properties
    • CSS Box Model
    • CSS Outline Properties
    • CSS Fonts
    • CSS Text
    • How To Add Icons
    • CSS Links
    • CSS List-Style
    • CSS Tables
    • CSS Display Property
    • CSS Position Property
    • CSS Overflow Property
    • CSS max-width Property
    • CSS Float and Clear Properties
    • CSS Alignment
    • CSS inline-block
    • CSS Combinators
    • CSS Pseudo Classes
    • CSS Pseudo Elements
    • CSS Opacity
    • CSS Navigation Bar
    • CSS Dropdowns
    • CSS Image Gallery
    • CSS Image Sprites
    • CSS Attribute Selector
    • CSS Styling Forms
    • CSS Counters
    • CSS Units
    • CSS Specificity
    • CSS Website Layout
    • CSS Rounded Corners
    • CSS Border Image Property
    • CSS Multiple Backgrounds
    • CSS Gradient
    • CSS Shadow Effects
    • CSS Text Effects
    • CSS Web Fonts
    • CSS 2D Transforms
  • Bootstrap 4
    • Bootstrap 4 – Introduction
    • Bootstrap versions
    • Bootstrap 4 Layout
    • Bootstrap 3 Vs Bootstrap 4
    • Bootstrap 4 Grid System
    • Bootstrap 4 Typography
    • Bootstrap 4 Colors
    • Bootstrap 4 Images
    • Bootstrap 4 Tables
    • Bootstrap 4 Jumbotron
    • Bootstrap 4 Figures
    • Bootstrap 4 Alerts
    • Bootstrap 4 Buttons
    • Bootstrap 4 Button Group
    • Bootstrap 4 Badges
    • Bootstrap 4 Spinners
    • Bootstrap 4 Progress Bars
    • Bootstrap 4 Pagination
    • Bootstrap 4 Breadcrumbs
    • Bootstrap 4 List Groups
    • Bootstrap 4 Cards
  • jQuery
    • jQuery Introduction
    • jQuery Download
    • jQuery Selectors
    • jQuery Event Methods
    • jQuery Hide/Show Effects
    • jQuery Fading Effects
    • jQuery Sliding Effects
    • jQuery Animation
    • jQuery Stop and Callback
    • jQuery Get and Set Methods
    • jQuery Chaining
    • jQuery Add
    • jQuery Remove
    • jQuery CSS Classes
    • jQuery Style Properties
    • jQuery Dimensions
    • jQuery Traversing
    • jQuery Ancestors
    • jQuery Descendants
    • jQuery Siblings
  • Javascript
    • JS Introduction
    • JS Where to Put
    • JavaScript Syntax
    • JavaScript Comments
    • JavaScript Variables
    • JavaScript Data Types
    • JavaScript Operators
    • JavaScript Events
    • JavaScript Strings
    • JavaScript Numbers
  • php
    • PHP Introduction
    • Install PHP
    • PHP Syntax and Comments
    • PHP Variables
    • PHP Constants
    • PHP Echo and Print
    • PHP Data Types
    • PHP Strings
    • PHP Operators
    • PHP $ and $$ Variables
  • WordPress
    • WordPress Introduction
    • WordPress History
    • WordPress.com vs WordPress.org
    • How to Install WordPress
    • WordPress Dashboard
    • How to Create a WordPress Website
    • WordPress Posts
    • WordPress Pages
    • WordPress Posts vs Pages
    • WordPress Categories
  • SEO
    • SEO Introduction
    • SEO Tactics and Methods
    • SEO Relevant Filenames
    • SEO Domain Name
    • Website Design and SEO
    • SEO Keywords
    • Meta Tags Optimization
    • Title Tag Optimization
    • Anchor Text Optimization
    • Content Optimization
  • Android
    • Android Introduction
    • Android History and Versions
    • Android Architecture
    • Android Environment Setup
    • Android Application Components
    • Hello World Application
    • Android Activities
  • iOS
    • iOS Introduction
    • iOS Environment Setup
    • iOS Architecture

You Are Here

  • Home
  • Learn HTML
  • HTML Forms

Topics

  • HTML Introduction
  • HTML Editors
  • Fundamentals of HTML
  • HTML Elements
  • HTML Attributes
  • HTML Headings
  • HTML Paragraphs
  • HTML Style Attribute
  • HTML Text Formatting
  • HTML Phrase Tags
  • HTML Comments
  • HTML with CSS
  • HTML Links
  • HTML Images
  • HTML Tables
  • HTML Lists
  • HTML Blocks
  • HTML Class Attribute
  • Id Attribute for HTML
  • HTML Iframes
  • HTML JavaScript
  • HTML File Paths
  • HTML Head
  • HTML Computer Code Elements
  • HTML Entities
  • HTML Charset
  • HTML URL Encode
  • HTML and XHTML
  • HTML Layouts
  • HTML Forms
  • HTML Form Elements
  • HTML Form Input Types
  • HTML Input Attributes
  • HTML5 Introduction
  • HTML5 New Elements
  • Semantic Elements in HTML5
  • HTML5 Migration
  • Style Guide
  • HTML Canvas
  • HTML SVG

Oct Champs & Prizes

  • 1. Pooja Ladda
  • 2. Manjali Kuldharan
  • 3. Pranali Surawar
  • 4. Anjali Kulkarni
  • 5. Vishal Deshmukh

Recent Posts

  • HTML Media
  • jQuery Siblings
  • Bootstrap 4 Cards
  • jQuery Descendants
  • jQuery Ancestors

HTML Forms

The HTML form is a part of the document that contains controls such as input fields, password fields, checkboxes, radio buttons, menus, etc. The HTML form gives the facility to enter data that is to be sent to the server for processing such as name, email, address, password, etc.

Example:

<!DOCTYPE html>
<html>
<body>
<form action="/sample_page.php">
First name:<br>
<input type="text" name="firstname" value="Your First Name"> <br>
Last name:<br>
<input type="text" name="lastname" value="Your Last Name"> <br><br>
<input type="submit" value="Submit">
</form>
<p>On clicking the "Submit" button, the form-data will be sent to a page called "/sample_page.php".</p>
</body>
</html>
Try it

The <form> Element:

The HTML form element provides a section to take input from the user.
The form element provided different types of controls for submitting information to a web server.
<form>
.
form elements
.
</form>

The <input> Element:

The input element is used to create form fields, to take input from the user. We can use different input fields to collect information from the users.
The input element can be displayed in different ways, depending on the type attribute.

Example:

<form>
Enter your name <br>
<input type="text" name="username">
</form>
Try it
Note: You will learn more about input types later in this tutorial.

Text Input:

The type=”text” attribute creates a single-line input field for text input.

Example:

<form>
First Name: <input type="text" name="firstname"> <br>
Last Name: <input type="text" name="lastname">
</form>
Try it
Note: The default width of a text field is 20 characters.

Radio Button Input:

The <input type=”radio”> specifies a radio button.
The radio button is used to choose one option from multiple options.
If you use a radio button for multiple options, you can only select a single option at a time.

Example:

<form>
<label for="gender"> Gender: </label>
<input type="radio" id="gender" name="gender" value="male"> Male
<input type="radio" id="gender" name="gender" value="female"> Female
</form>
Try it

The Submit Button:

The <input type=”submit”>specifies a submit button to submit the form data to form handler.
The form is get submitted when the user clicks on the submit button.

Example:

<form action="/sample_page.php">
First name:<br>
<input type="text" name="firstname" value="First Name"><br>
Last name:<br>
<input type="text" name="lastname" value="Last Name"> <br><br>
<input type="submit" value="Submit">
</form>
Try it

The Action Attribute:

The action attribute of the <form> tag specifies where the form data is to be sent to the server after submission of the form. It is used in the <form> element.
<form action="/sample_page.php">
In the example above, the form data is sent to a page on the server called “/sample_page.php”.
If the action of the form is omitted then the action is set to the current page.

The Target Attribute:

The target attribute is used to specify whether the submitted result will open in the current window, a new tab or on a new frame.
The default value of the target attribute is “_self” which means the form will be submitted is the current window.

Example:

<form action="/sample_page.php" target="_blank">
Try it

Values of Target Attribute:

  • _blank: It will open the link in a new window
  • _self: It will open the linked document in the same frame
  • _parent: It will open the linked document in the parent frameset
  • _top: It will open the linked document in the full body of the window
  • framename: It will open the linked document in the named frame

The Method Attribute:

The method attribute defines the HTTP method used to submit the form.
The values of the method attribute are:
get: In the get method, the submitted data will be visible after the submission of the form. It is the default value while submitting the form, but it is not secure as it displays the data after submission.

Example:

<form action="="="/sample_page.php" method="get">
Try it
post: The post value of the method attribute is used when we want to process the sensitive data as it does not display the submitted data in the URL.

Example:

<form action="="="/sample_page.php" method="post">
Try it

The Name Attribute:

The name attribute specifies the name of the form element, which is used to reference the form data after submitting the form.
You can not omit the name attribute because if you omit the name attribute the data of that input field will not be sent.

Example:

<form action="/sample_page.php">
First name:<br>
<input type="text" name="firstname" value="First Name"><br>
Last name:<br>
<input type="text" value="Last Name"> <br><br>
<input type="submit" value="Submit">
</form>
Try it

Grouping Form Data using <fieldset>:

The <fieldset> element is used to group logically related fields in an HTML form.
The <legend> element is used to define a caption for the <fieldset> element.
You can use the <fieldset> element and <legend> element to make your forms much easier to understand for users.

Example:

<form action="/sample_page.php">
<fieldset>
<legend> Personal information: </legend>
First name:<br>
<input type="text" name="firstname" value="First Name"><br>
Last name:<br>
<input type="text" name="lastname" value="Last name"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
Try it

Post navigation

HTML Layouts
HTML Form Elements

Ask a Question Cancel reply

Your email address will not be published. Required fields are marked *

W3 CODING SCHOOLS © Copyright 2019-20
Privacy policy   Terms of use

We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.Ok