Html input 2 texts

HTML Tag

An HTML form with three input fields; two text fields and one submit button:

Definition and Usage

The tag specifies an input field where the user can enter data.

The element is the most important form element.

The element can be displayed in several ways, depending on the type attribute.

The different input types are as follows:

Look at the type attribute to see examples for each input type!

Tips and Notes

Browser Support

Attributes

Attribute	Value	Description
accept	file_extension audio/* video/* image/* media_type	Specifies a filter for what file types the user can pick from the file input dialog box (only for type=»file»)
alt	text	Specifies an alternate text for images (only for type=»image»)
autocomplete	on off	Specifies whether an element should have autocomplete enabled
autofocus	autofocus	Specifies that an element should automatically get focus when the page loads
checked	checked	Specifies that an element should be pre-selected when the page loads (for type=»checkbox» or type=»radio»)
dirname	inputname.dir	Specifies that the text direction will be submitted
disabled	disabled	Specifies that an element should be disabled
form	form_id	Specifies the form the element belongs to
formaction	URL	Specifies the URL of the file that will process the input control when the form is submitted (for type=»submit» and type=»image»)
formenctype	application/x-www-form-urlencoded multipart/form-data text/plain	Specifies how the form-data should be encoded when submitting it to the server (for type=»submit» and type=»image»)
formmethod	get post	Defines the HTTP method for sending data to the action URL (for type=»submit» and type=»image»)
formnovalidate	formnovalidate	Defines that form elements should not be validated when submitted
formtarget	_blank _self _parent _top framename	Specifies where to display the response that is received after submitting the form (for type=»submit» and type=»image»)
height	pixels	Specifies the height of an element (only for type=»image»)
list	datalist_id	Refers to a element that contains pre-defined options for an element
max	number date	Specifies the maximum value for an element
maxlength	number	Specifies the maximum number of characters allowed in an element
min	number date	Specifies a minimum value for an element
minlength	number	Specifies the minimum number of characters required in an element
multiple	multiple	Specifies that a user can enter more than one value in an element
name	text	Specifies the name of an element
pattern	regexp	Specifies a regular expression that an element’s value is checked against
placeholder	text	Specifies a short hint that describes the expected value of an element
readonly	readonly	Specifies that an input field is read-only
required	required	Specifies that an input field must be filled out before submitting the form
size	number	Specifies the width, in characters, of an element
src	URL	Specifies the URL of the image to use as a submit button (only for type=»image»)
step	number any	Specifies the interval between legal numbers in an input field
type	button checkbox color date datetime-local email file hidden image month number password radio range reset search submit tel text time url week	Specifies the type element to display
value	text	Specifies the value of an element
width	pixels	Specifies the width of an element (only for type=»image»)

Global Attributes

Event Attributes

Related Pages

• Input Button Object
• Input Checkbox Object
• Input Color Object
• Input Date Object
• Input Datetime Object
• Input DatetimeLocal Object
• Input Email Object
• Input FileUpload Object
• Input Hidden Object
• Input Image Object
• Input Month Object
• Input Number Object
• Input Password Object
• Input Range Object
• Input Radio Object
• Input Reset Object
• Input Search Object
• Input Submit Object
• Input Text Object
• Input Time Object
• Input URL Object
• Input Week Object

Источник

How to Create a Multi-Line Text Input Field In HTML

Next, see examples of adding a multi-line text area with a «submit» button.

Example of creating a multi-line input field:

html> html> head> title>Title of the document title> head> body> form action="/form/submit" method="GET"> textarea rows="5" cols="60" name="text" placeholder="Enter text"> textarea> br/> input type="submit" value="submit"/> form> body> html>

You can also create a label for the textarea using the tag:

html> html> head> title>Title of the document title> head> body> form action="/form/submit" method="post"> label for="text">Add Comments: label> br> textarea id="text" name="text" rows="12" cols="50"> textarea> br/> input type="submit" value="Submit"> form> body> html>

Источник

HTML Input Types

This chapter describes the different types for the HTML element.

HTML Input Types

Here are the different input types you can use in HTML:

Tip: The default value of the type attribute is «text».

Input Type Text

defines a single-line text input field:

Example

This is how the HTML code above will be displayed in a browser:

Input Type Password

defines a password field:

Example

This is how the HTML code above will be displayed in a browser:

The characters in a password field are masked (shown as asterisks or circles).

Input Type Submit

defines a button for submitting form data to a form-handler.

The form-handler is typically a server page with a script for processing input data.

The form-handler is specified in the form’s action attribute:

Example

This is how the HTML code above will be displayed in a browser:

If you omit the submit button’s value attribute, the button will get a default text:

Example

Input Type Reset

defines a reset button that will reset all form values to their default values:

Example

This is how the HTML code above will be displayed in a browser:

If you change the input values and then click the «Reset» button, the form-data will be reset to the default values.

Input Type Radio

defines a radio button.

Radio buttons let a user select ONLY ONE of a limited number of choices:

Example

Choose your favorite Web language:

This is how the HTML code above will be displayed in a browser:

Input Type Checkbox

defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited number of choices.

Example

This is how the HTML code above will be displayed in a browser:

I have a bike
I have a car
I have a boat

Input Type Button

defines a button:

Example

This is how the HTML code above will be displayed in a browser:

Input Type Color

The is used for input fields that should contain a color.

Depending on browser support, a color picker can show up in the input field.

Example

Input Type Date

The is used for input fields that should contain a date.

Depending on browser support, a date picker can show up in the input field.

Example

You can also use the min and max attributes to add restrictions to dates:

Example

Input Type Datetime-local

The specifies a date and time input field, with no time zone.

Depending on browser support, a date picker can show up in the input field.

Example

Input Type Email

The is used for input fields that should contain an e-mail address.

Depending on browser support, the e-mail address can be automatically validated when submitted.

Some smartphones recognize the email type, and add «.com» to the keyboard to match email input.

Example

Input Type Image

The defines an image as a submit button.

The path to the image is specified in the src attribute.

Example

Input Type File

The defines a file-select field and a «Browse» button for file uploads.

Example

Input Type Hidden

The defines a hidden input field (not visible to a user).

A hidden field lets web developers include data that cannot be seen or modified by users when a form is submitted.

A hidden field often stores what database record that needs to be updated when the form is submitted.

Note: While the value is not displayed to the user in the page’s content, it is visible (and can be edited) using any browser’s developer tools or «View Source» functionality. Do not use hidden inputs as a form of security!

Example

Input Type Month

The allows the user to select a month and year.

Depending on browser support, a date picker can show up in the input field.

Example

Input Type Number

The defines a numeric input field.

You can also set restrictions on what numbers are accepted.

The following example displays a numeric input field, where you can enter a value from 1 to 5:

Example

Input Restrictions

Here is a list of some common input restrictions:

Attribute	Description
checked	Specifies that an input field should be pre-selected when the page loads (for type=»checkbox» or type=»radio»)
disabled	Specifies that an input field should be disabled
max	Specifies the maximum value for an input field
maxlength	Specifies the maximum number of character for an input field
min	Specifies the minimum value for an input field
pattern	Specifies a regular expression to check the input value against
readonly	Specifies that an input field is read only (cannot be changed)
required	Specifies that an input field is required (must be filled out)
size	Specifies the width (in characters) of an input field
step	Specifies the legal number intervals for an input field
value	Specifies the default value for an input field

You will learn more about input restrictions in the next chapter.

The following example displays a numeric input field, where you can enter a value from 0 to 100, in steps of 10. The default value is 30:

Example

Input Type Range

The defines a control for entering a number whose exact value is not important (like a slider control). Default range is 0 to 100. However, you can set restrictions on what numbers are accepted with the min , max , and step attributes:

Example

Input Type Search

The is used for search fields (a search field behaves like a regular text field).

Example

Input Type Tel

The is used for input fields that should contain a telephone number.

Example

Input Type Time

The allows the user to select a time (no time zone).

Depending on browser support, a time picker can show up in the input field.

Example

Input Type Url

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

Example

Input Type Week

The allows the user to select a week and year.

Depending on browser support, a date picker can show up in the input field.

Источник