Forms are used so much almost in all modern applications to allow users to provide information. Forms come in various formats like passwords, dates, text, textareas, radio buttons, checkboxes, etc. To get started with forms, let us get the code snippet below (focus only on the code inside the body element)
See the Pen Forms by bmutebi (@bmutebi) on CodePen.
To create a form in HTML, we use the <form> element. The action attribute can be left blank for now (we shall look at it later when we need to send information to the database. Inside the form element, we have various types of form elements. We start with a self-closing <input> element. It is followed with type attribute. In the start, we said we have various types of inputs in HTML for example, text, password, color, number, date, email, tel, search, url, checkbox, radio, among others. (You can check out the complete list of these elements on this page). You can try out the various input types and see how they work by specifying them in the type attribute. After the type, we have have placeholder attribute. This is an optional attribute but so important in case we need to guide the user on what the input field is meant to do without necessarily using the <label> element.
The required attribute in the first input is used to help in enforcing simple data validations. When we need each user to provide information in a given field, we put required attribute in the input. When it is done, there is no way a user can submit the form information without filling in the details for the required field.
After the input, we have <textarea> element. This is most cases used to enable user provide much information like on the contact page when the user is providing feedback. It is a very important form element.
Finally we have the <button> that is used to enable the user submit information in the database. We shall get back to this later.
For now, you have learnt how to create forms. Proceed by trying to create a GMail sign up page here. Enjoy the ride âď¸
