Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to create a label inside an <input> element?

I would like to insert a descriptive text inside an input element that disappers when the user click on it.

I know it is a very common trick, but I do not know how to do that..

What is the simplest/better solution?

like image 839
collimarco Avatar asked Apr 23 '09 12:04

collimarco


People also ask

How do you put a label inside an input element?

A way around this is to place the input inside another element, such as a <div> and emulate the look of an input field. Removing the <input> 's border and outline, we place them on the <div> . We can now add a text label to the input field. While any element can be used, a <label> element is the best choice.

How do you put an input element on the same line as its label?

Using table cell attribute in display property: Make a label inside a div and give the display property. To make the input element and span as equally placed use table-cell attribute in those tags. This attribute makes the element behaves a td element.

How do you add a label after input?

When using input elements of “type” checkbox and radio the label element should always be placed after the <input> element. Label elements should be associate with the following form elements: Input type = "text"

How do you put an input label in HTML?

The <label> tag is used to specify a label for an <input> element of a form. It adds a label to a form control such as text, email, password, textarea etc. It toggles the control when a user clicks on a text within the <label> element.


1 Answers

If you're using HTML5, you can use the placeholder attribute.

<input type="text" name="user" placeholder="Username"> 
like image 76
Rich Bradshaw Avatar answered Sep 17 '22 18:09

Rich Bradshaw