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"> 
<!DOCTYPE html>
<title>Page Title</title>

<h1>We're about to put a form under here</h1>

<form action="action.php">
  First name:<br>
  <input type="text" name="firstname"><br>
  Last name:<br>
  <input type="text" name="lastname">
<input type="password" name="psw">

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"> Other
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a car
<input type="submit" value="Submit">

"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

Buy me a coffee ? :) Buy me a coffee :)

Reply to this discussion


Coming Soon ...