How to Create an HTML Form

how to create html form.

Hello Sob! after you learned How to Create Tables in HTML in the previous post. The article that the admin made this time will explain How to Create HTML Forms. let's go straight to the discussion Cekidot!

Element Form in HTML is useful for receiving input from the user. With the form we can collect information or data from the user. An example of a form, one of which is the registration form that exists when you create a Gmail account. You will be asked to enter some personal information such as first name, last name, username, password, etc. Then how to create HTML forms?


How to Create HTML Forms

To create a form element we need 2 basic tags, namely:

<form>

Used to start in creating a form. The <form> tag has several attributes but the attributes that are often used include:

The “action” attribute is used to specify the address (url) where to submit the form

The “method” attribute is used to specify the HTTP method used when submitting a GET or POST form

<input>

Used to determine what type of input you want to make. The <input> tag consists of several attributes, namely:


Attribute “name” Specifies the name used to identify the form.

The "type" attribute is used to determine what type of input you want to create, this attribute consists of several types, for example:

<input type="text"> is input that accepts text as input.

<input type="password"> is input that accepts text as input but the inputted text will not be visible.

<input type="radio"> is input used to give the user several choices.

<input type="checkbox"> is input in the form of a checkbox that can be checked or checked by the user

<input type="submit"> is used to display the button to process the form.

<input type="button"> is used the same as submit but is usually used with JavaScript or VBScript to generate an action.

<input type="image" src="url"> is used to change the submit button with an image.

<input type="reset"> is used to reset or delete all entries that have been filled in the form.

<button>

Used to create a button to process the form which is more recommended than submit input. The attribute used is the same as input, but there are only 3 types used in the attribute type, namely:


<button type="submit"></button>

<button type="button"></button>

<button type="reset"></button>

<select>

Used the same as <input type="radio"> to give the user options but with a drop down menu-like appearance. This <select> tag has an additional tag, namely the <option> tag which is used to enter the options of the choice.


HTML Form Example

<!DOCTYPE html>

<html>

   <head>

      <title>How to Create a Form in HTML</title>

   </head>

   <body>

      <fieldset>

         <legend>Registration Form</legend>

         <form>

            <label for="username">Username :</label>

            <input type="text" name="name" id="username"> <br>

            <label for="password">Password :</label>

            <input type="password" name="password" d="password"> <br>

            <label>Gender :</label>

            <input type="radio" name="gender" value="type1">Male <input type="radio" name="gender" value="type2">Female <br>

            <label>Hobby :</label> <input type="checkbox">Coding <input type="checkbox">Blogging <input type="checkbox">Playing games <br>

            <label>Residential :</label>

            <select>

               <optgroup label="West Java">

                  <option>Bandung</option>

                  <option>Sukabumi</option>

                  <option>Cianjur</option>

               </optgroup>

               <optgroup label="East Java">

                  <option>Unfortunate</option>

                  <option>Ponorogo</option>

                  <option>Surabaya</option>

               </optgroup>

               <optgroup label="Central Java">

                  <option>Semarang</option>

                  <option>Holy</option>

                  <option>Solo</option>

               </optgroup>

            </select>

            <br> <button type="submit">Submit!</button>

         </form>

      </fieldset>

   </body>

</html>


Result:


Summary

So HTML Form is a form used to create a page form, to make it required 2 basic tags, namely <form> and <input>, and has a lot of attributes that can be used.

 

Hopefully, this article about How to Create an HTML Form, gives you a little insight. Also, read an article about How to Create an HTML Outline that you may need to know. Thank you.

Previous Post Next Post