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 Form Input Types

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 Form Input Types

The HTML form input types i.e <input type=” “> is an important element of HTML form.
The “type” attribute of the input element can be various types, which defines the information field.

HTML Form Input Types:

Input Type Text:

The <input type=”text”> is used to define a single-line input text field.

Example:

<form>
First name:<br>
<input type="text" name="firstname"> <br>
Last name:<br>
<input type="text" name="lastname"> <br><br>
<input type="submit">
</form>
Try it

Input Type Password:

The <input type=”password”> allow a user to enter the password securely on a webpage.
The text entered in the password field is converted into “***” or “…”, so that is cannot be read by other users.

Example:

<form>
Enter User Name:<br>
<input type="text" name="username">
Enter Password:<br>
<input type="password" name="psw">
</form>
Try it

Input Type Submit:

The <input type=”submit”> defines a submit button to submit the form to the form-handler.
The form-handler is a server that processes input data and it is specified in the action attribute.

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
If you can not write the value attribute of the submit button then the button will get the default text.

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">
</form>
Try it

Input Type Reset:

The <input type=”reset”> is defines as a button when the user performs a click event, it reset the all inputted values by default.

Example:

<form>
<label> User Id: </label>
<input type="text" name="user-id" value="user">
<label>Password: </label>
<input type="password" name="pass" value="pass"><br><br>
<input type="submit" value="login">
<input type="reset" value="Reset">
</form>
Try it

Input Type Radio:

The <input type=”radio”> defines the radio button, which allows selecting an option between a set of related options. It lets a user select only one option at a time.

Example:

<form>
<p> Select one Technology </p>
<input type="radio" name="technology" value="html"> HTML <br>
<input type="radio" name="technology" value="css"> CSS <br>
<input type="radio" name="technology" value="javascript"> JavaScript <br>
<input type="radio" name="technology" value="bootstrap"> Bootstrap <br>
<input type="submit" value="submit">
</form>
Try it

Input Type Checkbox:

The <input type=”checkbox”> defines a checkbox, that is displayed as square boxes and can be checked or unchecked to select the options.

Example:

<form>
<label> Enter your Name: </label>
<input type="text" name="name">
<p> Select your favourite Country </p>
<input type="checkbox" name="country1" value="India"> India <br>
<input type="checkbox" name="country2" value="USA"> USA <br>
<input type="checkbox" name="country3" value="Canada"> Canada <br>
<input type="checkbox" name="country4" value="Egypt">Egypt
<input type="checkbox" name="country5" value="Italy"> Italy <br><br>
<input type="submit" value="submit">
</form>
Try it

Input Type Button:

The <input type=”button”> dedfines a button which can control functionality on any event such as click event.

Example:

<form>
<input type="button" value="Clcik me " onclick="alert('Learn HTML')">
</form>
Try it

Input Type File:

The <input type=”file”> is used to select one or more files from user device storgae. Once you choose the file and after submission, this file can be uploaded to the server.

Example:

<form>
<label> Select file to upload: </label>
<input type="file" name="newfile">
<input type="submit" value="submit">
</form>
Try it

HTML5 Input Types:

HTML5 added some new input types:

Input Type Color:

The <input type=”color”> is used to define an input field that contains a color. It allows a user to specify the color on the browser.
The “color” type only supports color value in hexadecimal format, and the default value is #000000 (black).

Example:

<form>
Select your favorite color:
<input type="color" name="favcolor" value="#ff5722">
<input type="submit">
</form>
Try it

Input Type Date:

The <input type=”date”> is used to generate an input field that allows a user to input a date in a given format. The date can be entered by the text field or by the date picker interface.

Example:

<form>
Select the Date:
<input type="date" name="date">
<input type="submit">
</form>
Try it
You can also use the min and max attributes to add restrictions while selecting the date.

Example:

<form>
Enter a date before 1970-01-01:
<input type="date" name="bday" max="1969-12-31"><br><br>
Enter a date after 2002-01-01:
<input type="date" name="bday" min="2002-01-02"><br><br>
<input type="submit">
</form>
Try it

Input Type Datetime-local:

The <input type=”datetime-local”> is used to generate an input field that allows a user to select the date as well as local time in the hour and minute with no time zone information.

Example:

<form>
Select the meeting date and time:
<input type="datetime-local" name="meeting">
<input type="submit" value="Send">
</form>
Try it

Input Type Email:

The <input type=”email”> is used to create an input field that allows a user to enter the e-mail address. The submitted e-mail address can be automatically validated after submission. The multiple attribute allows the user to enter more than one email address.

Example:

<form>
<label> Enter your Email-address </label>
<input type="email" name="email">
<input type="submit"> <br><br>
<label> Enter multiple Email-addresses </label>
<input type="email" name="email" multiple>
<input type="submit">
</form>
Try it

Input Type Month:

The <input type=”month”> is used to create an input field that allows a user to select month and year.

Example:

<form>
<label> Enter your Birth Month-year: </label>
<input type="month" name="newMonth">
<input type="submit">
</form>
Try it

Input Type Number:

The <input type=”number”> is used to create an input field that allows a user to enter the numeric values. You can also set the restrictions to enter a minimum and maximum values using min and max attributes.

Example:

<form>
<label> Enter your age: </label>
<input type="number" name="num" min="20" max="50">
<input type="submit">
</form>
Try it

Input Type Range:

The <input type=”range”> is used to control a number entered by user whose exact value is not important. You can set restrictions on which numbers are accepted with the min and max attributes. Its default range is 0 to 100. The input type “range” is displayed as a slider control.

Example:

<form>
<label> Points: </label>
<input type="range" name="points" min="0" max="50">
<input type="submit">
</form>
Try it

Input Type Search:

The <input type=”search”> is used to create an input field that allows a user to enter a search string.

Example:

<form>
<label> Search:</label>
<input type="search" name="searchhere">
<input type="submit" value="search">
</form>
Try it

Input Type Tel:

The <input type=”tel”> is used to create an input field that allows entering the telephone number. It does not have a default validation like email, because the pattern of a telephone number can vary worldwide.

Example:

<form>
<label> Enter your Telephone Number: </label>
<input type="tel" name="telephone" pattern="[0-9]{3}-[0 -9]{3}-[0-9]{4}" required>
<input type="submit"><br><br>
</form>
Try it

Input Type Time:

The <input type=”time”> is used to select a time (no time zone).

Example:

<form>
<label> Select a time: </label>
<input type="time" name="your_time">
</form>
Try it

Input Type Url:

The <input type=”url”> is used to create input fields that should contain a URL address. The URL field can be automatically validated after submission, depending on browser support.

Example:

<form>
<input type="url" name="website" placeholder="http://example.com"><br>
<input type="submit" value="Submit">
</form>
Try it

Input Type Week:

The <input type=”week”> allows a user to select a week and year from the drop-down.

Example:

<form>
<input type="week" name="week-name">
<input type="submit" value="Submit">
</form>
Try it

Post navigation

HTML Form Elements
HTML Input Attributes

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