HTML5 and CSS3 Fundamentals – Form Basics

An Introduction to Html Form Basics

Let’s start out with a bigger picture in this class. Why do we need forms in HTML?

The arrival of new standards in technology which have led to the growth of the internet has dramatically changed the way we use our websites. It’s no longer the case that you’ll just use your website for sharing information that you have with your end users. For you to get the most out of your website, you must consider user experiences.

That means, you must have a mechanism to collect user input experiences. It’s the only way that you can connect with your website visitors. That’s where the HTML forms come in. An HTML form can act as a communication channel between your company and your visitors and vice versa.

Therefore, for you to make a successful website, you must include the forms on such a website to help you collect information from your clients or visitors. Having said that, let’s dive in and learn how we can construct HTML forms.

The <FORM> element is used to define an HTML form in a web page. There are two basic attributes for <FORM> element. These are:

  • Action. It specifies where the data that has been collected is sent when the submit button is clicked.
  • Method. The method indicates how the data that has been collected on the form is sent. There are two types of methods. The “GET” value attaches the form data input to the URL when the submit button has been clicked. The “POST” value of the method property is used to send the form data input as an HTTP transaction which is more secure.

Here’s an example:


<FORM action="index.php" method="post">

</FORM>

So, what’s placed between the <FORM> and </FORM> tags? Different types of input data elements such as text boxes, checkboxes, radio buttons, submit buttons, drop down boxes are placed between the <FORM> and </FORM> tags to help you collect data from your website visitors.

Here’s how you will use the input data elements

The <INPUT> Element

It has many variations that are applied depending on the type of data that you’d like to collect. Here are examples of how you can use the <INPUT> element:

The <INPUT TYPE=”text”> is used to define a one line input field for collecting a text input from a user.

The <INPUT TYPE=”radio”> is used to specify the radio button—where a user has the option of selecting one out of many alternative options.

The <INPUT TYPE=”submit”> is used to specify a button that users will click on so that their form data can be sent to the server.

The example below shows how the three <INPUT> elements can be used:


<FORM ACTION="action.php">

First Name :<BR>

<INPUT TYPE="text" name="firstname" value="namisiko">

<BR>

Last Name :<BR>

<INPUT TYPE="text" name="lastname" value="last">

<INPUT TYPE="radio" name="sex" value="Male">Male

<BR>

<INPUT TYPE="radio" name="sex" value="female">Female

<BR><BR>

<INPUT TYPE="submit" value="Send">

</FORM>

This marks the end of part one of our discussion on forms. Keep practicing so that you improve your skills in forms creation.

GET YOUR FREE PYTHON EBOOK!

(Visited 62 times, 1 visits today)

Comments