top of page

How To Build A Website: Part VIII—HTML Forms; Relationships Among Form Elements

Updated: Mar 11, 2021

The HTML <form> is used to send data to a server for processing. The form data is determined by the values of the elements inside it. These elements are usually <input>, often with a <button> to submit. When the form is submitted, the data is sent to the specified file. A form collects data, then sends the data to a server script that processes the data and responds accordingly. The form has several defining attributes. The method="" attribute specifies how the form data should be sent. This can have two options, GET or POST. GET is generally URL-appended, making it more insecure, as well as limiting the data it can hold. POST is generally the best method to use, as the data is unlimited and more secure. Another important attribute is the action=“” attribute. The value of this attribute is the path to a server script to process the data, often a PHP file. An optional attribute is enctype=“”, which defines the encryption type of the form.

A form can contain any type of <input> group, or any HTML element for that matter. The <input> tags must have a name=“” attribute to be passed on to PHP, however. The form does not send its data to the server until submitted by the user or JavaScript. For user submission, either use a <button> or an <input type=“submit”>. In JavaScript, it is possible to use formID.submit;. A hidden input group can be used to preserve data in the form. Its value must be set with value=“”, as the user cannot interact with it.

When a form is submitted, its contents are sent to the file specified in the action="" attribute. I will use PHP as the referenced file, but other file types can be used. When the content reaches the file, you need to extract it. PHP has a built-in variable that contains the request sent: $_POST[ ] for POST requests and $_GET[ ] for GET requests. To recall form data, you use the value of the name="" attribute as the value of an item within $_POST:

===========================================================

THE HTML FILE

<form method="post" action="somewheres.php">

<input type="email" name="email">

<!-- This field will accept an email address, but not ordinary text -->

<input name="name">

<input type="hidden" name="session" value="uyfYJTFDTfTR56ev57feV%7546%&">

<!-- Hidden input fields rely on the value="" attribute to contain data -->

<button>Submit</button>

</form>


===========================================================

THE PHP FILE

<?php

$email = $_POST['email'];

$name = $_POST['name'];

$sessionID = $_POST['session'];

//puts the posted data into PHP variables based on the element that contained the data.


//Do something with the data, like put it in a database


header("Location: nextPage.html");

//This will send the user on to the specified file after the script is completed. Change the file path after 'Location:' to the file you use.

?>

Form data is foundational to user-specific experiences, as you do not know who the user is until they say so. Next time, we will build a simple (but insecure) login page.


__RESOURCES__

A blank PHP file —Write PHP code

A blank HTML file —Write HTML code




16 views0 comments

Recent Posts

See All

Comments


Post: Blog2_Post
bottom of page