Among the important features
of HTML are: form tags. That is a tag that we use to collect input from users,
this concept is the same as the concept of forms in the real world.
Generally, a website always
has a form feature, the most common examples we often encounter are:
login form
sign-up form
comment form on a blog /
media
Element <form>
The most important is the tag or element <form>. It is a wrapping tag or container that represents a “form” where one form can have multiple fields.
<form>
...........
</form>
The <form> tag itself
does not have any appearance or is invisible to the naked eye, but we still
have to define it so that the form we create can work properly.
Elemen <input>
In HTML, there are many
types of input models ranging from text, files, checklists, and so on which,
God willing, we will discuss in more detail in the next few meetings.
And most of these types of
fill models use <input> tags.
Example
<input
type="text" name="name" value="joe">
Output :
The input tag has 2 basic
attributes, namely:
- type
- and names.
The type attribute is used to define the type of the field, while the name attribute is the name of the field.
Several types of input tag input types such as text (default), radio, checkbox, submit, button and so on:
<input
type="text">
<!-- choice (a, b,
c, d) -->
<input
type="radio">
<!-- type ceklis
-->
<input
type="checkbox">
<!-- button for
submit -->
<input
type="submit">
<!-- button not
for submit -->
<input
type="button">
Text Field
The first is a text field,
it is an input tag with a type="text" attribute that functions to collect
text fields from the user.
Even without writing
type="text", the default type of an input is text.
Example
<form>
<div>
<label for="first-name">First
Name</label> <br>
<input id="first-name"
name="first-name" placeholder="First Name">
</div>
<div style="margin-top:
1rem">
<label for="last-name">Last
Name</label> <br>
<input id="last-name"
name="last-name" placeholder="Last Name">
</div>
</form>
output :
In the code above, we use
the <div> element to wrap the <label> and <input> elements.
The use of the <div> element here only works so that the label and input
are displayed in a new line, so even without using a <div> is fine.
One more thing, because the
<label> and <input> elements are inline elements, we must use a
"certain way" (such as using the <br> tag) so that the label
and input are displayed on a new line.
If you don't use div or br
(as in the example below):
<form>
<label
for="first-name">First Name</label>
<input id="first-name"
name="first-name" placeholder="First Name">
<label for="last-name">Last
Name</label>
<input id="last-name"
name="last-name" placeholder="Last Name">
</form>
The output will be inline:
Element <label>
Take a look at the HTML code
above: we have two <label> elements.
The <label> element
does look like a typical <span> element, but it has a special function:
to label an input field.
Because when a screen reader
reads the content of an HTML page, then finds an input, it will read the
corresponding label.
Another function of the
<label> tag is: when we click on a label, the browser will put focus on
the field associated with it.
We can associate an
<label> and an <input> with the for attribute for the label, and
the id attribute on the <input> with the exact same value.
Consider the following example:
<label
for="input-name">Name</label>
<br>
<br>
<input
id="input-name">
In the code above, the
<input> element has an id of name-field, and the label element has a for
attribute with the same value, namely name-field.
Output :
Radio Button
Next is the field with the
radio type. It is an option type field where we can offer several options to
the user. However, only one option can be selected.
Example
<form>
Gender: <br>
<div>
<input id="ml"
type="radio" name="gender_">
<label
for="ml">Male</label>
</div>
<div>
<input id="fl"
type="radio" name="gender_">
<label
for="fl">female</label>
</div>
</form>
Output:
In the options above, we can
only choose one of each.
The thing to note is that the name attribute of each radio button must have the same value in a set of options. In the example above, we have gender_
Check boxes
Next is the checkbox or
checklist. The difference with radio, we can choose more than one option in a
set of options.
Let's change all type="radio" in the previous code to type="checkbox".
<form>
Gender: <br>
<div>
<input id="ml" type="checkbox"
name="gender_">
<label for="ml">Male</label>
</div>
<div>
<input id="fl" type=" checkbox
" name="gender_">
<label
for="fl">female</label>
</div>
</form>
Output :
In the example above we can select (tick) all the available options.
Element button submit
The next input element that
we will discuss in this form introduction is input type submit.
It is an <input>
displayed in the form of a button. If this input is clicked, the form will be
submitted and the browser will start sending data.
Example :
<form>
<input type="text" name="name"
value="Joe"> <br>
<input type="submit"
value="Submit">
</form>
output :
We can also use element
<button>
<form>
<input type="text" name="name"
value="joe"> <br>
<button>Submit</button>
</form>
Buttons that are in a form
will automatically be considered type="submit". If we want to create
a plain button that doesn't submit <form>, we can add the attribute
type="button"
In the code above, when the "Save" button is clicked, it will not submit the form because it is of type normal button (type="button"), not submit type
How to Process the Form
When a <form> is
submitted, using either a <button> element or an <input
type="submit">, the browser will send the data to the URL defined
in the action attribute in the form tag.
Meanwhile, if the action
attribute is not defined, the browser will use the current URL as the
destination for sending data.
Example :
<form action="/
process-registration ">
...
</form>
In the example above, when
the form is submitted, the browser will send the existing data to the URL
/process-registration