How to create a Basic Form using HTML - Epic Docks

How to create a Form using HTML - Epic Docks 


by re4nightwing.

Step 01:

Create a file with the extension of html (ex: form.html) or save as .htm/.html




Step 02:

Open up the HTML file using a suitable code editor. I'm using Visual Studio Code and it's totally free.(Link is Below)




Step 03:

Type the code below -


<html>
<head>
<title>HTML | Forms</title>
</head>
<body>
<form action="name.php"method="POST">
<h1>Form</h1>
enter your name : <input type = "text" name = "name" /> </br>
enter your age : <input type="text" name="age" /> </br>
Colour :
<select name="color">
<option value="white">White</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="black">Black</option>
</select></br>
Gender :</br>
<input type="radio" name="gender" value="male"/>Male</br>
<input type="radio" name="gender" value="female"/>Female</br>
<input type="radio" name="gender" value="other"/>Other</br>
<input type="submit" name="sub"/>
</form>

</body>
<html>


How to Add a html text field:

<input type = "text" name = "name" /> makes a text field for user to enter data.And as you can see type is set to "text".


How to add a html drop-down list:

There are two parts to consider when creating a drop down list.
1. First one is <select name = "color"> and this tag declares the name of the whole drop down list and starts the drop down list.

2.Second part is <option value="white">White</option> and this option tag creates list items that should be stored inside the drop down list. The value command gives a specific valve for a list item that follows to the server when the form is submitted.



How to add a html radio button:

<input type="radio"name="gender"value="male"/>Male

As you can see this code is very similar to the code of a text field but the type of this one is "radio"
and it has a name and value .
The type radio basically makes the radio button but to get the complete usage you have to give
the same name for the all radio tags. If you don't do that, that'll allow you to select multiple radio
buttons at the same time that's actually the work of the check box.








How to add a html text area:



<textarea name="mytext" rows="20" cols="20">Your text</textarea>



How to add a html password field:


<input type="password" name="pass">



How to add a html Button:


1.Submit button

<input type="submit">
2.Reset button 


<input type="reset">
3.Basic Button 


<input type="button">



How to add a html Check-Box: 

     <input type="checkbox" name="myvehic" value="van"> I have a van



Visual Studio Code Download: Click here

Subscribe to my Youtube channel for Web Development Tutorial Videos: Click Here



Thank you.

Post a Comment

0 Comments