HTML Form Elements

Continuing from the previous post where we saw how to make a form, we move on with its elements.

In the previous post, we built a login form; here we'll see what a registration form could look like.

In this example, we will work with plain HTML, so we won't use any CSS styles.

1 - Input Element in HTML

The input element is the most important of all the elements we can use inside forms. It allows us to create a text box and, depending on its type, can accept different values.

Usuario: <input type="text" name="usuario"/><br/>
Password: <input type="text" name="Pass"/><br/>
Edad <input type="number" name="edad"><br/>

By default, it is of type text, which accepts any text, but we have many other options:

• button : will create a button
• submit : will be the final button of the form, used to submit it to the server
• number: only accepts numbers
• email: allows us to add an email, with the functionality to open the email application
• tel: similar to email, allows us to enter a phone number that can be called directly; on mobile it is especially useful as the user doesn't have to copy and paste.
• hidden: hides a form element

and many more

1.1 - Radio button in HTML

Another type within inputs is the radio button.

This allows us to give several options to the user, but they can select ONLY ONE, as long as the elements share the name attribute:

sexo: <br/>
<input type="radio" name="sexo" value="masculino"> masculino <br/>
<input type="radio" name="sexo" value="Femenino"> Femenino <br/>
<input type="radio" name="sexo" value="otro" > Otro <br/>

1.2 - Checkbox in HTML

Another very commonly used element is the checkbox, which is the little box you check.

It is often used, for example, to accept the terms and conditions right before submitting the form.

<input type="checkbox" name="termsAndConds" value="Terminos y condiciones"> acpeto los terminos y condiciones<br>

1.3 - Files and Documents in HTML Forms

When we want to provide a space for users to upload images, documents, etc., we use the input type file. Don’t forget to specify the enctype="multipart/form-data" attribute in the form.

This type of input is commonly seen when uploading a profile picture.

Imagen de perfil: <input type="file" name="imagende perfil"><br>

When we create a file input, the browser automatically converts the text box into a button for browsing files on your PC.

2 - Select Element in HTML

When we create a select element, the browser automatically converts it into a dropdown list.

We should assign the name attribute to the select tag, and each option should have a value attribute, which is the value sent in the form.

We mark options with the option tag; we can set a default value as selected with the selected attribute in one of the options.

Idiomas hablados <Br>
<select name="idiomas" multiple>
    <option value="en">Inglés</option>
    <option value="es" selected>Espanol</option>
    <option value="fr">Francés</option>
    <option value="it">Italiano</option>
</select>

As we can see, the select tag has a multiple attribute, which allows us to select several values. To select multiple values, hold the Ctrl key while clicking.

3 - Textarea Element in HTML

The textarea element is similar to input type="text" except it allows us to have more than one row of content. It also lets us specify the number of rows and columns using the rows and cols attributes.

comentario adicional<br/>
<textarea name="comentario" rows="10"></textarea>

4 - Datalist Element in HTML

The datalist element is similar to select, but with datalist, you can start typing in the input.

When defining a datalist, you should use an input without a type, but with a list attribute referring to the datalist that holds the options.

This datalist must have an id matching the list attribute previously mentioned, and for each option, use the option value.

idioma materno: 
<input list="idiomamaterno">
<datalist id="idiomamaterno">
    <option value="Inglés">
    <option value="Espanol">
    <option value="fr">Francés</option>
    <option value="Italiano">
</datalist>

The value will be what the option tag contains in the value attribute, but you can also add content like in select and both will be shown.

Conclusion

In this post, we have covered the main elements of a form in HTML.