How to Create a Fill-In Form for a Web Page
Forms provide your website readers with the ability to submit information from the website to your email or database server. Create a web form for readers to fill in using simple HTML. Each form element is defined and entered into the web page, and the control you choose determines what type of information is submitted. There are four main form elements including text boxes, drop-down boxes, check boxes and the "Submit" button.
Other People Are Reading
Instructions
-
-
1
Start the form using the "<form>" tag in your code. All HTML text seen by the user is located within the "<head>" and "</head>" tags in your HTML code. Place the form tag within these two head tags. The following code starts the HTML form:
<form method="post" action="myProcessPage.php"> </form>
All form elements are located within these two HTML tags. The "method" property determines how the form input is sent to the processing page. Most forms use post, but "get" is also an option. "Get" sends the form input using the query string in the browser's navigation text box. The "myProcessPage.php" in this example is the page that processes the user input. Enter your form process page in the "action" property.
-
2
Add a text box to the form. A text box is used in most HTML forms, because it allows users to enter text for input. The following code is an example of a text box that prompts the user to enter a first name:
<form method="post" action="myProcessPage.php">
First Name: <input type="text" ID="first_name">
</form> -
-
3
Add a drop-down box to the form. A drop-down box is also popular on web forms. The below example creates a drop-down list box that asks the user for a selection:
<form method="post" action="myProcessPage.php">
First Name: <input type="text" ID="first_name">
Do you like this website? <select name="selection">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</form> -
4
Add a check box. A check box allows the user to select several answers for a question. The following code is an example of check box form elements:
<form method="post" action="myProcessPage.php">
First Name: <input type="text" ID="first_name">
Do you like this website? <select name="selection">
<option value="Yes">Yes</option>
<option value="No">No</option>
What are your favorite colors? <input type="checkbox" name="favorite" value="Blue">
<input type="checkbox" name="favorite" value="Red">
</select>
</form> -
5
Add a submit button. Add one or several form elements such as text boxes, drop-down lists and check boxes to your web form. At the end of the form, a submission button is required. The button sends the form to a processing page, which can be on your website or an external domain. The following code is an example of the final form element:
<form method="post" action="myProcessPage.php">
First Name: <input type="text" ID="first_name">
Do you like this website? <select name="selection">
<option value="Yes">Yes</option>
<option value="No">No</option>
What are your favorite colors? <input type="checkbox" name="favorite" value="Blue">
<input type="checkbox" name="favorite" value="Red">
</select>
<input type="submit" value="Submit Your Answers!">
</form>
-
1
References
- Photo Credit legal form image by max blain from Fotolia.com
