Html input text index

HTML Tag

To associate text with a specific element, we use the tag which sets a text label for it.

Syntax

The tag is empty, which means that the closing tag isn’t required. But in XHTML, the () tag must be closed ().

Example of the HTML tag:

html> html> head> title>Title of the document title> head> body> form action="/form/submit" method="get"> input type="email" name="user_email" placeholder="Enter your email" /> input type="submit" value="Submit" /> form> body> html>

Example of the HTML tag with the HTML tag:

html> html> head> title>Title of the document title> head> body> form action="/form/submit" method="get"> label>Your Name: label> input type="text" name="first_name" /> br/> br/> label>Your Surname: label> input type="text" name="last_name" /> br/> br/> label>Enter Your E-Mail: label> input type="email" name="user_email" /> br/> br/> input type="submit" value="Submit" /> form> body> html>

Result

input tag example

Attributes

The main attribute that determines the type of input field is type . If the attribute is missing, the default value is «text».

Values of the type attribute

Value Description
button Defines the active button.
checkbox Check the boxes (the user can select more than one of the options).
color Specifies a color palette (user can select color values in hexadecimal).
date Defines the input field for calendar date.
datetime Defines the input field for date and time.
datetime-local Defines the input field for date and time without a time zone.
e-mail Defines the input field for e-mail.
file Sets the control with the Browse button, clicking on which you can select and load the file.
hidden Defines a hidden input field. It is not visible to the user.
image Indicates that an image is used instead of a button to send data to the server. The path to the image is indicated by the src attribute. The alt attribute can also be used to specify alternative text, the height and width attributes to specify the height and width of the image.
month Defines the field of selecting a month, after which the data will be displayed as year-month (for example: 2018-07).
number Defines the input field for numbers.
password Defines a field for entering a password (the entered characters are displayed as asterisks, dots or other characters).
radio Creates radio button (when choosing one radio button all others will be disabled).
range Creates a slider to select numbers in the specified range. The default range is from 0 to 100. The range of numbers is specified by the min and max attributes.
reset Defines a button for resetting information.
search Creates a text field for search.
submit Creates a button of submitting the form data (“submit” button).
text Creates a single line text field.
time Specifies a numeric field for entering time in a 24-hour format (for example, 13:45).
url Creates an input field for URL.
week Creates a field for selecting the week, after which the data will be displayed as year-week (for example: 2018-W25).
Читайте также:  File input operation java

How to style tag?

Common properties to alter the visual weight/emphasis/size of text in tag:

  • CSS font-style property sets the style of the font. normal | italic | oblique | initial | inherit.
  • CSS font-family property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.
  • CSS font-size property sets the size of the font.
  • CSS font-weight property defines whether the font should be bold or thick.
  • CSS text-transform property controls text case and capitalization.
  • CSS text-decoration property specifies the decoration added to text, and is a shorthand property for text-decoration-line, text-decoration-color, text-decoration-style.

Coloring text in tag:

  • CSS color property describes the color of the text content and text decorations.
  • CSS background-color property sets the background color of an element.

Text layout styles for tag:

  • CSS text-indent property specifies the indentation of the first line in a text block.
  • CSS text-overflow property specifies how overflowed content that is not displayed should be signalled to the user.
  • CSS white-space property specifies how white-space inside an element is handled.
  • CSS word-break property specifies where the lines should be broken.

Other properties worth looking at for tag:

  • CSS text-shadow property adds shadow to text.
  • CSS text-align-last property sets the alignment of the last line of the text.
  • CSS line-height property specifies the height of a line.
  • CSS letter-spacing property defines the spaces between letters/characters in a text.
  • CSS word-spacing property sets the spacing between words.

Источник

Оцените статью