Related post

Inheritance in Java programming with example | Zhullyblog

Posted by on
0

How to create a form in HTML - Zhullyblog

Posted by on

Hello, welcome to zhullyblog. If this is your first time here , please Subscribe to Zhullyblog by Email to get latest tutorial.

How to create a Form in HTML
A form is a blank document to be filled by the user.A form is used to create user information. When you build a website, you need to collect information from the user that visits your website such as name, email , address or phone number.


HTML allows you to collect several information from user with the use of several input types. It's just a little code and you are done.

A form contain several controls like submit button, text box, select box etc.
To create a form, you use the <form> tag.
Here is an example of a form.

There are several inputs to a form which means that you need to specify the type of input. It could be password, checkbox and many more. Let's take the inputs types quickly.


Text Fields

Text fields are one line area that allows user to input text. When you need your user to input text such as name, you make use of text fields.
Text field are created using <input> element and the type attribute has the value text.

Now, study the code below.


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Create a form</title>
</head>
<body>
  <form>
    <label for="username">Username</label>
    <input type="text" name="username" placeholder="Your name">
  </form>
</body>
</html>



Output
Add text field to HTML form



Password fields

They are similar to text field but the only difference is that the text or characters are either shown as asterisk or dots. Yunno for security purposes.
Password field are also created using <input> but the type attribute has the value password.
Try this



<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Create a form</title>
</head>
<body>
  <form>
    <label for="user-pwd">Password</label>
    <input type="password" name="user-password" placeholder="Password" id="user-pwd">
  </form>
</body>
</html>


Output
Add password field to HTML form



Textarea

The text area is just like the text field but it allows multiple line of text. This means that the user can enter more than one line of text. You make use of this when you need the user to make a comment or give feedback.

Here is an example




<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Create a form</title>
</head>
<body>
  <form>
    <label for="male">Comment</label>
    <textarea rows="5" cols="30" name="comment" id="comment"></textarea>
  </form>
</body>
</html>


Output
Add text area to a form


Select box

A select box is a drop-down list that allows the user to select one or more option. The select box is used majorly when you need to hide the list but you only want the user to select when they click in it.
The select box are created using the <select> element and <option> element.
Here is an example



<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Create a form</title>
</head>
<body>
  <form>
    <label for="Courses">Courses:</label>
    <select name="courses" id="courses">
      <option value="HTML">Html</option>
      <option value="CSS">CSS</option>
      <option value="Bootstrap">Bootstrap</option>
      <option value="JavaScript">JavaScript</option>
    </select>
  </form>
</body>
</html>


Output
Add select list to HTML form

Radio button

Radio button are used when you have series of options but you want the user to select just one option.
The radio button control is also created using <input> and the type attribute has the value radio.
Here is an example



<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Create a form</title>
</head>
<body>
  <form>
    <label for="male">Male</label>
    <input type="radio" name="gender" id="male">
    <label for="female">Female</label>
    <input type="radio" name="gender" id="female">
  </form>
</body>
</html>



Output
Add radio button to a form



Checkbox

Checkbox are used when you want more than one option to be selected from set of options. It is created using <input> element but the type attribute is checkbox.
Here is an example



<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Create a form</title>
</head>
<body>
  <form>
    <label for="rice">Rice</label>
    <input type="checkbox" name="food" id="food">
    <label for="beans">Beans</label>
    <input type="checkbox" name="food" id="food">
  </form>
</body>
</html>



Output
Add checkbox to HTML form


File select box

This field allows you to select file from your local storage. This means that the user can select file from their computers and attach it to the form data.
Let's take for instance, you want the user to upload their picture, you need to make use of the file select field to enable user perform the action.
To do this, you make use of the <input> element and the type attribute value will be file.
Here is an example



<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Create a form</title>
</head>
<body>
  <form>
    <label for="file-select">Upload</label>
    <input type="file" name="upload" id="file-select"
  </form>
</body>
</html>



Output
File select box in HTML form


Submit button

The submit button is used to send data to the server. Once the user is done filling the form, the submit button will be the next thing they click on.
Here is an example



<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Create a form</title>
</head>
<body>
  <form action="action.php" method="post">
    <label for="name">Name</label>
    <input type="text" name="name" placeholder="Your name">
    <input type="submit" value="Submit"
  </form>
</body>
</html>



Output
Submit button in HTML

There are two attributes in the form tag-- action and method. Read more about that here.
Before the user submits the form, you need to make sure that the user fill the form and does not omit any input. But how exactly do you check? View my post on PHP require file. I have explained it.
Check out my post on how to create a login form.


Follow us on
Please share








Other tutorials


OTHER TUTORIALS


Comments

Post a Comment