How to include an input field in HTML?

HTML Web Development Front End Technology

The HTML <input>tag is used within a form to declare an input element - a control that allows the user to input data.

The following are the attributes −

Attribute	Value	Description
accept	content types	Specifies a comma-separated list of content types that the server accepts
align	left right top middle bottom	Deprecated − Defines the alignment of content
alt	Text	This specifies text to be used in case the browser/user agent can't render the input control
autocomplete	on off	Specifies for enabling or disabling of autocomplete in <input> element
autofocus	Autofocus	specifies that <input> element should automatically get focus when the page loads
checked	Checked	If type = "radio" or type = "checkbox" it will already be selected when the page loads.
disabled	Disabled	Disables the input control. The button won't accept changes from the user. It also cannot receive focus and will be skipped when tabbing.
form	form_id	Specifies one or more forms
formaction	URL	Specifies the URL of the file that will process the input control when the form is submitted
formenctype	application/x-www-form-urlencoded multipart/form-data text/plain	Specifies how the form-data should be encoded when submitting it to the serve
formmethod	post get	Defines the HTTP method for sending data to the action URL
formnovalidate	Formnovalidate	Defines that form elements should not be validated when submitted
fromtarget	_blank _self _parent _top	Specifies the target where the response will be a display that is received after submitting the form
height	Pixels	Specifies the height
list	datalist_id	Specifies the <datalist> element that contains pre-defined options for an <input> element
max	Autofocus	Specifies the maximum value.
maxlength	Number	Defines the maximum number of characters allowed in a text field
min	Number	Specifies the minimum value
multiple	Multiple	Specifies that a user can enter multiple values
name	Text	Assigns a name to the input control.
pattern	Regexp	Specifies a regular expression that an <input> element's value is checked against
placeholder	Text	Specifies a short hint that describes the expected value.
readonly	Readonly	Sets the input control to read-only. It won't allow the user to change the value. The control, however, can receive focus and are included when tabbing through the form controls
required	required	Specifies that an input field must be filled out before submitting the form
size	Number	Specifies the width of the control. If type = "text" or type = "password" this refers to the width in characters. Otherwise, it's in pixels.
src	URL	Defines the URL of the image to display. Used only for type = "image".
step	Number	Specifies the legal number intervals for an input field
type	button checkboxcolor date datetime datetime-local email file hidden image month number password radio range reset search submit tel text time url week	Specifies the type of control.
value	Text	Specifies the intial value for the control.If type = "checkbox" or type = "radio" this attribute is required.
width	Pixels	Specifies the width

Example

You can try to run the following code to implement <input> element in HTML −

<!DOCTYPE html>
<html>
   <head>
      <title>HTML input Tag</title>
   </head>
   <body>
      <form action = "/cgi-bin/hello_get.cgi" method = "get">
         First name:
         <input type = "text" name = "first_name" value = "" maxlength = "100" />
         <br />
         Last name:
         <input type = "text" name = "last_name" value = "" maxlength = "100" />
         <input type = "submit" value = "Submit" />
      </form>
   </body>
</html>

vanithasree

Updated on: 2020-03-03T07:24:01+05:30

394 Views

Kickstart Your Career

Get certified by completing the course

Get Started