How to add a title above input and text-area and add space between them?
Ex:
Thetitleyouwouldliketodoisrepresentedby"Your text" and the input by "Text here".
How to add titles above input and textarea?
1
asked by anonymous 07.09.2015 / 17:35
2 answers
6
The titles of <input> , <select> , <textarea> and others are known as label , in free translation into Portuguese)
They can be declared in HTML in the following ways:
Using for element:
>
<label for="name">Nome:</label>
<input type="text" id="name">
Using Element within label : In this second way, you do not need to use id not even have a% set_default for the input (or select , textarea , etc). We just add the element within the label :
<label>Nome:
<input type="text">
</label>
Tips and Tricks :
In addition to the semantics added to the code, another positive point regarding the use of labels is in improving usability. When the user clicks on the label text, the cursor is automatically placed inside the element by most browsers, strong> input type = radio for example that usually have small clickable area.
In addition to the visual usability described above, another point that can also be improved is the portability for screen readers. There are WAI-ARIA properties that are very interesting at this point and for the case of labels we can use the aria- labelledby to reference the for of label to element :
<label for="input-name" id="label-name">Name:</label>
<input labelledby="label-name" id="input-name" type="text">
One last interesting point to note is the line break between the label text and the element . Preferably avoid using the for tag, this is a tag used to break text ( text node ) Second MDN documentation . To do this "break" using CSS just add display: block to input , as in the example below:
input {
display: block;
}
<label>Nome:
<input type="text">
</label>
15.10.2015 / 23:51
1
As for putting a title above inputs/textareas you can use any text tag, but preferably label , and for the space below use% css%.
textarea,
input {
width: 300px;
margin-bottom: 20px;
}<label for="txt">Seu Texto</label>
<br>
<input type="text" id="txt" />
<br>
<label for="txt2">Seu Texto</label>
<br>
<textarea id="txt2"></textarea>The rule I put applies to both% w and% w,%, simply set a width for w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w today
I recommend that you study a little about CSS for the formatting of your HTML pages, follow some links.
There are several other sites that teach you how to use css, just search our beloved Google and have fun.
I hope I have helped.
08.09.2015 / 16:20