Introduction to Forms
Photo By Jackson Sophat on Unsplash
Have you ever registered on a website? For instance, we register for email, Facebook, and so on. Well, that’s a form, and in this article, Mangcoding will discuss an introduction to forms.
Or perhaps, you have simply filled out a form to log in to a social networking site?
Most likely, we all have done that. The information we enter into a website via the provided form can be referred to as an input.
After submission, the input we send can be processed and stored by the system before being outputted or printed.
In short, a form is used to collect user inputs. Typically, a form can consist of a group of text fields, radio buttons, checkboxes, submit buttons, and many more.
Form Element Table
To make it clearer, here are some common HTML form elements:
| Element | It means |
|---|---|
<form></form> |
Opening and Closing Forms |
<input type="text" /> |
Creating text input (single line) |
<input type="radio" /> |
Creating a Single Choice Input Choice |
<input type="checkbox" /> |
Creating Input Options in the form of checkboxes (Multiple Choice) |
<input type="password" /> |
Create a password input option (Hide Area) |
<input type="date" /> |
Create input in date format |
<input type="file" /> |
Create input in file form (upload file) |
<input type="submit" /> / <button type="submit"> |
Create a submit button |
<input type="reset" /> / <button type="reset"> |
Reset the completed form |
<select><option></option></select> |
Create input options in the form of a select box |
<textarea></textarea> |
Creating text input (multiple lines) |
<label> |
To label the input |
<fieldset> |
Grouping elements on a form |
<legend> |
Provide a caption (name) for the fieldset |
<optgroup> |
Grouping input options in a select box |
Simple Form Example
Here’s a simple example of how a form might look:
<form>
<p>
<label>Nama</label>
<input type="text" />
</p>
<p>
<label>Alamat</label>
<textarea></textarea>
</p>
<p>
<label>Jenis Kelamin</label>
<input type="radio" name="LK" value="L" /> Laki-laki
<input type="radio" name="LK" value="P" /> Perempuan
</p>
<p>
<label>Jenis Kelamin</label>
<select>
<option value="Laki-laki">Laki-laki</option>
<option value="Perempuan">Perempuan</option>
</select>
</p>
<p>
<button type="submit">Submit</button>
</p>
</form>Example Using Form & Style
In addition to basic forms, you can also apply styling with CSS. This makes your forms more attractive and user-friendly.
Form Elements Attributes
Just like other HTML elements, form elements also have attributes that provide additional information and settings. These attributes allow us to control size, hints, behavior, and restrictions.
For example, in the previous section, we used attributes such as placeholder, max, and min.
Here are more common form attributes you should know:
| Attribute Elements | It Means |
|---|---|
| Value | Provides value (result) to input |
| Name | Give a name to the input |
| Readonly | Used so that input cannot be changed (read only) |
| Disabled | Used to prevent input from working |
| Size | Specifies the number (in characters) for the input field. |
| Maxlength | Jumlah maksimal karakter yang bisa di input |
| Required | Maximum number of characters that can be input |
| Autofocus | It is used so that when we open the page we go straight to the input |
| Placeholder | Gray text as a hint or instruction for input |
| Min and max | Minimum and maximum values(int) of an input |
| Height and width | Change the width and height of an input |
Conclusion
To sum up, forms are a fundamental part of any website because they allow users to interact and send information.
Therefore, understanding form elements and their attributes is essential for building interactive and user-friendly websites.
That’s the article Mangcoding is sharing. Hopefully, it is useful and can provide new knowledge for you.
Finally, if you have any constructive criticism or suggestions, feel free to comment or send them through Mangcoding’s email or social media.