HTML Forms and Inputs

If you want to enter data into your website. You need to know a seperate langugae called PHP

Revise Zone will in time offer PHP tutorials

PHP is very easy actually and it with it you can accept data entered by the user and handle the request as you want

A simple example would be - when a user enter his login details, the website takes the details and matches it with its internal protected database. Then the server gives the user the corresponding access rights

Web development is not easy and so when a website is constructed using PHP there is greater risk for hacking and data breaches

HTML forms

In Html, we will learn the elements used to create the interface or the structure for the user to enter data

Html does not handle any data entries! It is not a programming language

HTML Form Elements/Tags

The form element is used to group related input elements or tags together

The form element is used to define to which PHP file the form entered data must be sent to.

It also sets the method in which data is supposed to be transmitted - either GET or POST

We will see a very general example for you to understand

Run

Creating and styling forms is very easy but, for them to work is super complicating

The <input> tag is used to display a data entry field. The type attribute defines what kind of data should be added and so the HTML forms can carry out some validations

The type attribute can take many values but you don't need to know everything by heart. It's good to remember the important ones

Here is the list:

type="button" - used to add a button which acts as a submit button

type="checkbox" - used to add small check boxes for example - remember me

type="color" - able to select a limited number of colors

type="date" - used to enter the date

type="datetime-local" - used to enter the date and time

type="email" - used to enter an email

type="file" - used to upload a file

type="hidden" - not visible but can carry data to the PHP file

type="image" - the image acts a submit button and the coordinates clicked is sent

type="month" - to enter the month

type="number" - to enter a number

type="password" - to enter a password

type="radio" - same as checkbox but circles instead

type="range" - to enter a value using a range widgjet

type="reset" - when clicked resets all the values in each field

type="search" - same as text but used for searching purposes

type="submit" - to submit the form to a PHP file

type="tel" - used to enter a telephone

type="text" - used to add any kind of string

type="time" - used to enter the time

type="url" - used to enter a url (used by SEO optimising websites)

type="week" - to enter the week

We will see an example for each one this

<!DOCTYPE html>
<Html>
<body>
<h1>Sign up</h1>
<form action="example.php" method="POST" id="login">
<p>Enter only date</p>
<input type="date">
<br>
<p>Enter both date and time</p>
<input type="datetime-local">
<br>
<p>Enter only email</p>
<input type="email">
<br>
<p>Upload a file - requires proper validation!</p>
<input type="file">
<br>
<p>Hidden is not shown<p>
<input type="hidden">
<br>
<p>Submits using an image</p>
<input type="image" src="image.png">
<br>
<p>Enters a month</p>
<input type="month">
<br>
<p>Enter a number</p>
<input type="number">
<br>
<p>Enter a password</p>
<input type="password">
<br>
<p>Check me</p>
<input type="radio">
<br>
<p>Choose a value</p>
<input type="range">
<br>
<p>Enter a telephone</p>
<input type="tel">
<br>
<p>Enter any text</p>
<input type="text">
<br>
<p>Enter your time</p>
<input type="time">
<br>
<p>Enter an url</p>
<input type="url">
<br>
<p>Enter a week</p>
<input type="week">
<br>
<p>Remember me</p>
<input type="checkbox">
<br>
<input type="color">
<input type="search" plaseholder="SEARCH">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
<input type="button" form="login" value="Submit">
</form>
</body>
</html>

Run

We have not linked to a proper PHP file so when you submit the form it will not work.

HTML Textarea tags

This can also act as a input field. The textarea is used to enter large amounts of text

This is usually used for commenting and blogging purposes where you need to type in large amounts of data

We will see an example

This textarea is designed using CSS

Run

HTML Form attributes

As we have seen there are some attribute which the <form> element can take

action - directs the form details to a PHP file

method - how data is to be transmitted - GET or POST. Discussed below

autocomplete - provides suggestion(usually this is default for most browsers

enctype - encoding to be used with POST

id - used to identify the form element

We will see an example
<!DOCTYPE html> <Html> <body> <h1>Sign up</h1> <form action="" method="GET" autocomplete="on" id="signup" enctype="multipart/form-data"> <label for="email">Email</label> <input type="email" placeholder="example@email.com" name="email" id="email"> <label for="password">Password</label> <input type="password" name="password" id="password"> <input type="submit" value="Sign up"> </form> </body> </html> Run
We will disuss each attribute in detail

ENCTYPE attribute

HTML forms provide three methods of encoding.

1. application/x-www-form-urlencoded (the default)

2. multipart/form-data

3. text/plain

When data is supposed to be tranmitted you could chose the encoding type. This is always used with the method="POST"

You don't need to know every type in detail. Just remember to use either 1 or 2

Never use 3 as it has no protection

Multipart/form-data is the most secure encoding type!

Action attribute

The action attribute tells the webpage to which website of PHP file you want to send the details to

Sometimes it could be to the same website. So then we use action=""

We will learn a bit how the PHP files read data from these fields

Form Method

The form attribute can take two values - either GET(default) or POST

More will be talked about GET and POST in the next chapter

Form Autocomplete

The autocomplete provides suggestions such as email address and usernames

Form Id

The form Id is very useful especially when you want to link a <input> element to a form element even when the input element is outside the form element

We will see an example

Run

So even if the input elements are outside the form element. The form attribute could be used to link to a particular form element

Back Next

Revise Now

Cambridge AS levels

Programming and coding

More

What do you want
to do?

HTML Basics

HTML Intermediate

HTML Advance

SEO Tips & Others

HTML Forms and Inputs

HTML forms

HTML Form Elements/Tags

HTML Textarea tags

ENCTYPE attribute

Action attribute

Form Method

Form Autocomplete

Form Id

Revise Now

Cambridge AS levels

Programming and coding

More

What do you want to do?

HTML Basics

HTML Intermediate

HTML Advance

SEO Tips & Others

HTML Forms and Inputs

HTML forms

HTML Form Elements/Tags

HTML Textarea tags

ENCTYPE attribute

Action attribute

Form Method

Form Autocomplete

Form Id

What do you want
to do?