HTML Elements - Part 3 : Form Inputs
Hey Pretty Brain ...
Please note that this tutorial is part of the Build Your Own Site series of tutorials. Feel free to restart the series.
In the last tutorial, we had a look at the form element and discussed its various HTML attributes. We also discussed to some extent, the fact that the form is a container for input elements. Input elements are used to take user input, like name, messages, email, password etc. In this tutorial; we'll be looking at all these goodies, their attributes, and how to interact with them.
We'll start with the text input:
<input type="text" name="firstname"> form.html, save it in the same folder as the index.html file in our document root "/tutorial/setting-up-development-environment"
load the page : http://localhost/form.html
A white empty page should now load.
Throw this HTML in there ...
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>We're about to put a form under here</h1>
</body>
</html>form.html
<form action="action.php">
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>http://localhost/form.html
Behold the text inputs inside the form. Go ahead type something in those text inputs.
I'm sure you've noticed the attribute 'type="text"' on those "FINE" inputs. This let's you and the browser know that this input should only take text from user.
Essentially we know what type the input is from the "type" attribute. And like wise; the next input we'll be dealing with will be the password field. And yes you've guessed it; it looks like this.
User password:<input type="password" name="psw">form.html file, under the surname text input field, within the form element.
Hey hoolio, save, reload and voila!
Behold the password field/input in all it's glory. Start typing in that field and you'll notice that your input is in asterisk or circles. For obvious reasons, we don't want anyone to see your password .. ssshhhh
Moving on .... Radio buttons and Check boxes
Copy and paste these under the password field above
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Otherhttp://localhost/form.html
Behold the radio buttons in all their glory. Note you can only choose one radio button option, if they have the same "name" attribute. This means, only one of these options, the selected one, will be transferred on form submission.
This is the "checkbox" input:
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a carhttp://localhost/form.html
Aaand voila! Checkboxes in all their glory. Please note that unlike radio buttons, you can choose as many checkboxes as you want and they'll all be selected, and subsequently sent when the form is submitted.
The next input is the submit button. This is used to submit the form, so all the filled up inputs will be collected , and transferred to whatever the action of the form is. In our case the form data will be transferred to the action.php file, which is our "action" attribute value.
The next input is the submit button. This is used to submit the form, so all the filled up inputs will be collected , and transferred to whatever the action of the form is. In our case the form data will be transferred to the action.php file, which is our "action" attribute value.
<input type="submit" value="Submit">http://localhost/
The submit button will try to transfer the form data to "action.php" when clicked. Since there's no action.php file in our current folder; you'll run into a 404 http response. This means the page is not found.
But don't you fret bright one; we'll cover all of this a bit later. For now
"Note you can only choose one radio button option, if they have the same "name" attribute"
The Village Geek
"Alright .. Okay ..." - Denzel Washington
Take a deep breath, back away from the pc, head to the nearest exit, get out, and scream out loud; "I got inputs in my form!!"
In the next tutorial, we'll look at html5's new elements, like video, audio, canvas etc.
Aweehhh ... ciao!
Cape Town, South Africa
