HTML For Beginners Part 3

HTML For Beginners Part 3 Welcome to part 3 of the HTML For Beginners series; this chapter is going to look at some new elements that we can use when creating our HTML pages, specifically the Form elements and how we can use them. If you haven’t read any of our other series, you can so below: HTML For Beginners Part 1 HTML For Beginners Part 2 HTML Forms Most webpages these days offer you some kind of user input area that allows you to give feedback to the website. With HTML, you can do this by using HTML forms. There are many different form tags, so this tutorial will go through a few of them and what they do. To start, you begin by creating a form using the <form> tags:

<body>
<form>
</form>
</body>

(We are including the form tag inside our <body> tag since that is where our page content should be). The <form> tag doesn’t really do anything interesting in terms of outputting, but it does setup our form area for us. We can now add different form elements. Let’s start with the basic <input> tag.

<input type=”text” name=”our_field” value=”Default Text” />

The <input> tag has lots of attributes that we can use to customise our input field. The first input field is type and in the case above we have set it to text. This creates a simple text field that allows us, you guessed it, to type in text. The other attributes are name and value. The name of the field allows us to identify it when we want to access the input field (for example, if you have two text fields, the name attribute is used to give each one a unique identifier.). The value attribute allows us to put predefined text into our text field when the page is loaded. The type attribute is quite important, since it can completely change our input field. Have a look at these examples:

<input type=”password” name=”my_password” />

The above input field is a password type field. When a user enters text into this field, the data shows up as little asterisk symbols (*).

<input type=”checkbox” name=”option1”>

The above is a checkbox type field. A user can click on the field and the little box will become checked.

<input type=”radio” name=”option1”>

Similarly to the checkbox, only radio will only allow you to select one option whereas a checkbox allows you to select many. If you want to allow the user to enter lots of text, we can also use the <textarea> tag which allows the user to enter text on multiple lines.

<textarea name=”big_area” rows=”8” cols=”60”></textarea>

This tag has a opening and closing tag. This is because any text added between the two tags is added inside the textarea when the page loads (much like how the value attribute works on the input tags). The rows and cols attributes allow us to make our textarea tag as big as we like. The rows attributes is the number of lines available on display by default and the cols is how wide the textarea is. If you enter text beyond these numbers (for example ,you use 10 lines in a textarea tag with only 5 rows) the textarea will turn into a scrolling textarea automatically for you. Another type of input is the hidden field. This field isn’t displayed to the user on the browser, and can be used to store data that cannot be modified on the web page.

<input type=”hidden” name=”code” value=”12345” />

Note that you hidden data can still be manipulated if you edit the HTML source or use special tools for web browsers. Buttons One of the important aspects of forms is to have a submit button. When clicked, the form is processed and the data is sent away to some script. We can create our form buttons is a few ways. The first is to use our <input> tag:

<input type=”submit” name=”mybutton” value=”Click Me” />

Change the type attribute to submit will turn the input field into a button that can be clicked. We give our button a name like we do all our input fields, and the value is used to set the text that appears on top of the button. The destination of where the form data goes is discussed in the next section but for now let’s concentrate on the buttons. We can also create a simple button that doesn’t do anything when clicked, such as:

<input type=”button” name=”mybutton” value=”Click Me” />

<button name=”mybutton”>Click Me</button>

Both create a button that doesn’t do anything- the reason we might want to do this is beyond the scope of this guide, but a small example would be to assign some JavaScript code to the button that when clicked does something to the page. Processing Data A HTML form isn’t very useful if the data we enter cannot be used. Unfortunately, HTML doesn’t have the capabilities of using the data on it’s own, so we have to use other programming languages in order to process the form data. One of those would be PHP. In order to send the form data to another page, we need to set the form action attribute to our script.

<form action=”myscript.php” />
</form>

We also need to set the form method, which allows us to send the data via POST or GET. There are two request methods that are used to send data to a script. You don’t really need to worry about this for HTML programming, but in the future, you will be using POST and GET a lot of the time so it’s good to have an idea of what they are.

<form action=”myscript.php” method=”post”>

</form>

In order to process the data in a form, you also need a submit button. Earlier we showed how to use a submit button, so now we are going to create a form that sends someone’s name to a script.

<form action=”myscript.php” method=”post”>
Your Name: <input type=”text” name=”name” /> <input type=”submit” name=”mybut” value=”Send Name” />
</form>

The above code will send the form data to the script myscript.php via a POST request. The script can then handle the data and do what it likes with it. Perhaps we store the name in a database for later, or simply send a message to the user using the name they entered. Hopefully that gives you a small insight into HTML Forms. They can be quite complex and there are lots of different elements to think about. You will surely need to use them though when creating web pages as they are the core parts of websites that want user feedback. Conclusion HTML Forms are just one of the more complicated aspects of the language, but once learned, they are easy to master and learn. The real trick to HTML Forms is learning how to handle the data using another programming language like PHP. Unfortunately that is beyond the scope of this small guide. I’ll leave you with a HTML form that allows you to enter your details. Can you figure out what is going on?

<html>
<head>
<title>Welcome To My Form</title>
</head>
<body>
<p><b>Enter your details in the form below</b></p>
<form action=”myscript.php” method=”post”>
<table>
<tr><td>Your Name:</td><td><input type=”text” name=”name” /></td></tr>
<tr><td>Your Age: </td><td><input type=”text” name=”age” /></td></tr>
<tr><td>Are you happy?</td><td><input type=”checkbox” name=”happy” value=”1”> Yes</td></tr>
<tr><td colspan=”2”><input type=”submit” name=”but” value=”Send” /></td></tr>
</table>
</form>
</body>
</html>

HTML For Beginners Part 3

Enjoyed that? Check These Posts Out

Article Comments

Leave A Comment