Input Control Elements 2

Input Control Elements 2
Nikhil
Published on 2021-07-02 02:37:28

Input control elements of different type of input and example code:

HTML control element Submit input


<input type="submit" value="Submit">

A submit input creates a button which submits the form it is inside when clicked. You can also use the <button> element if you require a submit button that can be more easily styled or contain other elements:

<button type="submit">
<img src="submit-icon.jpg" /> Submit
</button>

HTML Reset type


<input type="reset" value="Reset">

An input of type reset creates a button which, when clicked, resets all inputs in the form it is contained in to their default state.

  • Text in an input field will be reset to blank or its default value (specified using the value attribute).
  • Any option(s) in a selection menu will be deselected unless they have the selected attribute.
  • All checkboxes and radio boxes will be deselected unless they have the checked attribute.

Note: A reset button must be inside or attached to (via the form attribute) a <form> element in order to have any effect. The button will only reset the elements within this form.

HTML Hidden Input


<input type="hidden" name="inputName" value="inputValue">

A hidden input won't be visible to the user, but its value will be sent to the server when the form is submitted nonetheless.

HTML Tel Input field


<input type="tel" value="+8400000000">

The input element with a type attribute whose value is tel represents a one-line plain-text edit control for entering a telephone number.

HTML Email  Input field


The <input type="email"> is used for input fields that should contain an e-mail address.

<form>
<label>E-mail: <label>
<input type="email" name="email">
</form>

E-mail address can be automatically validated when submitted depending on browser support.

HTML Number Input field


<input type="number" value="0" name="quantity">

The Input element with a type attribute whose value is number represents a precise control for setting the element’s value to a string representing a number.

Please note that this field does not guarantee to have a correct number. It just allows all the symbols which could be used in any real number, for example user will be able to enter value like e1e-,0.

HTML Range Input field


<input type="range" min="" max="" step="" />

A control for entering a number whose exact value is not important.

  • min -Minimum value for range - 0
  • max-Maximum value for range - 100
  • step- Amount to increase by on each increment -1

Search Input field


Input type search is used for textual search. It will add magnifier symbol next to space for text on most browsers

<input type="search" name="googlesearch">

Image Input field


<input type="image" src="img.png" alt="image_name" height="50px" width="50px"/>

An Image. You must use the src attribute to define the source of the image and the alt attribute to define alternative text. You can use the height and width attributes to define the size of the image in pixels.

Week Input field


<input type="week" />

Dependent on browser support, a control will show for entering a week-year number and a week number with no time zone.

Url Input field


<input type="url" name="Homepage">

This is used for input fields that should contain a URL address. Depending on browser support, the url field can be automatically validated when submitted. Some smartphones recognize the url type, and adds ".com" to the keyboard to match url input.

DateTime-Local Input field


<input type="datetime-local" />

Dependent on browser support, a date and time picker will pop up on screen for you to choose a date and time.

Month Input field


Version ≥ 5
<input type="month" />

Dependent on browser support, a control will show to pick the month.

Time Input field


Version ≥ 5
<input type="time" />

The time input marks this element as accepting a string representing a time. The format is defined in RFC 3339 and should be a partial-time such as

19:04:39
08:20:39.04

Currently, all versions of Edge, Chrome, Opera, and Chrome for Android support type="time". The newer versions of Android Browser, specifically 4.4 and up support it. Safari for iOS offers partial support, not supporting min, max, and step attributes.

DateTime (Global) Input field


The input element with a type attribute whose value is "datetime" represents a control for setting the element’s value to a string representing a global date and time (with timezone information).

<fieldset>
<p><label>Meeting time: <input type=datetime name="meeting.start"></label>
</fieldset>

Permitted attributes:

  • global attributes
  • name
  • disabled
  • form
  • type
  • autocomplete
  • autofocus
  • list
  • min & max
  • step (float)
  • readonly
  • required value

Date Input field


Version ≥ 5

<input type="date" />

A date picker will pop up on screen for you to choose a date. This is not supported in Firefox or Internet Explorer.

Example:

<!DOCTYPE html>
<html>
<head>
  <title>Atutorialhub demo title</title>
</head>
<body>
  <form>
    <fieldset>
      <legend>1st field set:</legend>
      Field one:<br>
      <input type="text"><br>Field two:<br>
      <input type="text"><br>
      <input type="date" />
    </fieldset><br>
    <fieldset>
      <p><label>Meeting time: <input type=datetime name="meeting.start"></label>
        <input type="tel" value="+8400000000">
    </fieldset>
    <input type="submit" value="Submit">
    <input type="reset" value="Reset">
  </form>
</body>
</html>

 
output:
 

Atutorialhub demo title

1st field set: Field one:

Field two:

 

Meeting time:

 

ATutorialHub Related Guide

HTML Tutorials Comments (8)

Leave a Comment

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

User Comments

html tutorial comments

panduranga gupta

2021-07-05 07:03:13

good website for learning and help me a lot

html tutorial comments

raju

2021-09-25 14:58:47

The awsome website i am looking like for a long time, good work atutorialhub team keep doing

html tutorial comments

Shivani

2021-09-01 15:03:56

Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience

html tutorial comments

Harshitha

2021-09-10 15:05:45

It is very helpful to students and easy to learn the concepts

html tutorial comments

Sowmya

2021-09-14 15:06:41

Great job Tutorials are easy to understand Please make use of it

html tutorial comments

Zain Khan

2021-09-18 15:07:23

Great content and customized courses.

html tutorial comments

Rudrakshi Bhatt

2021-09-09 15:08:10

Well structured coursed and explained really well!

html tutorial comments

Pavana Somashekar

2021-09-11 15:09:08

Good platform for beginners and learn a lot on this website