z

TEXT PROSEDURE
how to make a form in html

( cara membuat form pada html )

GURU PEMBIMBING :

RETNA NINGSIH S.P.D

PENYUSUN :

ECHA ANA ZACKHY XI RPL 2

z

One way to retrieve information from visitors is to use forms.

Forms on the web can be likened to forms in the real world.

The form can be filled in, then processed with a specific program.

How to Create a Form in HTML

We can create forms in HTML with the <form> tag.

This tag has several attributes that must be provided, such as:

- action to specify the action to be performed when the data is sent;

- data transfer method

Example :

For the ‘action’ attribute, we can fill it with the URL address of the endpoint that will process the
form.
In simple terms,—in the example above—we will tell the ‘process.php’ file to process the form
data.
We will learn this later in PHP.
The HTML code above, will produce nothing
Because we haven't created the field yet.

what is field?
Fields are fields that can be filled with data.

Example fields:
z

The field has several attributes that must be provided:

- ‘type’ is the type of the field.

- ‘name’ is the name of the field that will be the key and variable in the program.

Before that, the first step we have to do is,

- Open the application to create a program, here I use visual studio code, like the picture below

- once opened press this logo to create a new file

- After clicking, a screen like this will appear

- if it's like that then we have to save this file, how ctrl+s
z

- after that it's up to you to put it in any folder and give it a name “form.html

- then the file type is changed “HTML”

- then click "save"

Practice: create a login form

As an exercise, let's create a login form.

In the login form, there are several fields and elements:

- Field to input username or email;

- Field for password input;
- Checkbox to remember me;
- Button to login.
- Here is the code:

- the next step type according to the following code :

z
z

Result :

In the code above, we created four fields:

- input ‘username’ with type text;
- input ‘password’ with password type;
- input ‘remember’ with checkbox type;
- input ‘submit’ with type submit;

Then these three fields are wrapped in <fieldset> tags.

Inside the <fieldset> tag, we create a <legend> tag to add text to the fieldset.

Then, also pay attention to the attributes used in each field.

- ‘Placeholder’ attribute to display temporary text (placeholder);

- The ‘value’ attribute is used to provide a default value for the field.
We wrap each field in a <p> tag to make it look neat and we also give a label with the <label>
tag.

Practice: Create a contact form

z

Next exercise, we will create a contact form. This form serves to contact or contact the admin.

Please follow the following code:

Result :
z

In the example above, we provide type="email" for the email field, so that this field must be filled with
email only.

Just try to fill it with something else, then click Send…then a warning message will appear.

Practice: create a registration form

The more practice, the better.
z

Next we will try to create a registration form.

This form contains fields for:

- Input nama lengkap;
- Input username;
- Input email;
- Input password;
- Input jenis kelamin;
- Input Agama;
- Input Biografi.
Let's make…
z
z

Result :

What are the new fields in the form?

- radio fields;
- <select><option> fields;
- <textarea> field.
What is the difference between radio and checkbox?

If we want visitors to choose one, then we use the radio.

But if we want visitors to choose more than one, then we use checkboxes.

Then for <select></option>, the nature is the same as radio. Only he looks different.

Then to input long text, we use the <textarea> tag.

What we learned in this tutorial are the basic—and frequently used—tags and fields in form
creation.

There are many more field types that we haven't tried yet. Such as: meter, color, time, etc.

Therefore, please keep practicing…