How to add titles above input and textarea?

Question

How to add a title above input and text-area and add space between them?

Ex.:

The title you would like to do is represented by "Your text" and the input by "Text here".

Answer 1

The titles of <input>, <select>, <textarea> and others are known as label (Etiquette, in free translation into Portuguese).

Can be declared in HTML in the following ways:

1. Using for=" " : We referenced the id of the element within the attribute for of the element label:

   <label for="name">Nome:</label>
   <input type="text" id="name">
     

2. Using Element inside label : In this second way, you don’t need to use the for and not even have a id defined for the input (or select, textarea, etc). We just add the element within the label:

   <label>Nome:
     <input type="text">
   </label>
     

---

Tips and Tricks:

1. In addition to the semantics added to the code, another positive point regarding the use of Labels is the improvement of usability. When the user clicks on the text of label the cursor is automatically placed inside the element by most browsers, which is very useful for input type=radio for example that usually have small clickable area.

2. In addition to the visual usability described above, another point that can also be improved is portability for screen readers. There are the properties of WAI-ARIA which are very interesting at this point and for the case of Abels we can use the attribute Aria-labelledby to reference the id of label at the element:

   <label for="input-name" id="label-name">Name:</label>
   <input labelledby="label-name" id="input-name" type="text">
     

3. A last interesting point to highlight is the line breaking between the text of label and the element. Preferably avoid using the tag <br>, this is a tag used to break text (text Node) according to MDN documentation. To make this "break" using CSS just add display: block to the input, as in the example below:

   input {
     display: block;
   }
     

   <label>Nome:
     <input type="text">
   </label>
     

Answer 2

As for putting a title on top of inputs/textareas you can use any text tag, but preferably label, and as for the spacing below use margin-bottom of 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 set applies both to inputs as regards the textareas, simply set a width for them with the width and the spacing with margin-bottom.

I recommend that you study a little about css for formatting your HTML pages, follow some links.

http://www.caelum.com.br/apostila-html-css-javascript/introducao-a-html-e-css/

https://developer.mozilla.org/en-US/docs/Aprender/Getting_started_with_the_web/CSS_basico

There are several other sites that teach you how to use css, just search our dear Google and have fun.

I hope I’ve helped.