Html input title style

How to Apply CSS Style to the Element Name

You can apply a CSS style to the element name by using attribute selectors that match elements based on their attributes.

Solutions with attribute selectors

In the example below, we style the name attribute of the element with the CSS background, width, height, and border properties.

Example of applying some CSS styles to the element name:

html> html> head> title>Title of the document title> style> input[name="username"] < background: #76d67e; width: 200px; height: 25px; padding: 0 5px; border: 2px solid #cccccc; > style> head> body> input type="text" name="username" autofocus> body> html>

Result

Let’s see another example, where we use two elements, one of them with the name attribute, which must be styled.

Example of applying a CSS style to the element name:

html> html> head> title>Title of the document title> style> input[name="age"] < width: 50px; > style> head> body> h1>Example of applying a CSS style to the element name: h1> form> input type="text" placeholder="Name"> input type="number" name="age" min="0" placeholder="Age"> form> body> html>

Источник

HTML Input Attributes

The type attribute defines the type of the input control.
There are many types, for example text, button, radio, checkbox, and others. Three elements with these types: text, submit, and reset.

The name Attribute

The name attribute assigns a name to an input field.
When a form is submitted the name and value of the input element are sent to the server. Two fields with name attributes.

The value Attribute

The value attribute holds the value of the input field.
The value can be a string or a number. An field with a value attribute.

The id Attribute

The id attribute assigns an identifier to the input control.
The value must be unique on the web page.

The class Attribute

The class attribute assigns one or more CSS classnames to the input control.
Classes affect the appearance of the control.

The style Attribute

The style attribute assigns an inline style to an input control.
The style affects the appearance of the control.

The data-* Attribute

The data-* attribute assigns a custom value to an input control.
The * part is replaced with a lowercase string, such as data-id , data-cost , or data-location .

The hidden Attribute

The hidden attribute hides the input element, i.e., makes it invisible.
Even though the control is invisible, its value is included during form submission.

An element with a hidden attribute. The control is not visible.

The title Attribute

The title attribute adds tooltip text to an input control.
Hovering a mouse over the textbox displays a tooltip.

The tabindex Attribute

The tabindex attribute assigns a keyboard tab order relative to the other controls.
This attribute indicates the order in which elements receive focus using the tab key.

The checked Attribute

The checked attribute checks (i.e. selects) a radio button or checkbox.
Clicking the element will toggle, i.e. check or uncheck, the item.

 
Product Rating
 
 High 
 Medium High 
 Medium 
 Medium Low 
 Low 
 

The placeholder Attribute

The placeholder attribute provides a hint about the expected data.
Placeholders are displayed as dimmed background text when an input field has no value.

Did you know?

Placeholders can be styled with CSS

With the CSS ::placeholder selector (or ::-webkit-input-placeholder ) you can control the appearance of a placeholder.

This example changes the color of the placeholder to teal using CSS.

The maxlength Attribute

The maxlength attribute sets the maximum number of characters the field will hold.
By default, the maximum is 524,288 characters.

The required Attribute

The required attribute make a field mandatory.
A value must be entered before submitting the form.

The readonly Attribute

The readonly attribute makes the input field read-only.
A readonly element cannot be modified, but its value is included during form submission.

The disabled Attribute

The disabled attribute disables the input field.
A disabled element appears dimmed and its value is not sent during form submission.

The autofocus Attribute

The autofocus attribute specifies that the input field should receive focus when the page loads.
Only one element on a page can have the autofocus attribute.

An tag with an autofocus attribute.
Note: autofocus is disabled on this page. Click the ‘Try It live’ button to see autofocus in action.

Try it live Tip: When a control has focus, it means that any user input will go to that control.

The autocomplete Attribute

The autocomplete attribute specifies to the browser that input can be autofilled.
When autocomplete is on, the browser provides input values based on previous values the user has entered.

Two tags with autocomplete turned on.
Note: Chrome ignores HTML autocomplete settings.

Источник