Working with HTML Text Input Fields

Now that we have our form skeleton in place, let's see how to add some text input fields.

In this section, we won't focus too much on styles or CSS, rather we'll look at the core functionality. Let's start with taking input for the variable "name". Remember, how we had input type as "Submit" for our submit button? Here, we'll have text as the input type to denote a text field.

Name: <input type="text" name="name">

The name for this text field is "name". Don't get confused here, the name in blue is the attribute while the "name" in quotes is the value for that attribute.

We're going to have another attribute called email, and have the name attribute set to a value "email."

After this, your output should look like this:

medium

Though this looks neat, I don't prefer to type in the words "name" and "email". Instead, let's use HTML labels. All that we have to do is have a <label> tag, and have the text placed between the opening and closing tags, like this:

<body>
  <form action="contact_form.php" method="get">
    <label form="name">Name:</label>
    <input type="text" name="name"><br>

    Email: <input type="text" name="email"><br>

Nothing would appear to have changed in the browser. However, if you hover over the label, it'll turn into a cursor, and when you click on it, most browsers will activate the input field. If you hover over the text "email", nothing will change though. That's the key difference between using labels and normal text. This difference can be particularly important for mobile devices.

Now, let's make the same change for email too.

Moving on, let's say you want users to know what kind of information to type in each field. You can put placeholders in each field, with this code:

<label form="name">Name:</label>
<input type="text" name="name" placeholder="Jon Snow, etc"><br>

<label form="name">Email:</label>
<input type="text" name="email"><br>

If you see, the name "Jon Snow, etc" will be the default value in the name field, and this will go away when you start typing the value you want.

medium

This can be particularly helpful when you want users to enter a value in a specific format. For example, if you want users to enter their last name first followed by their first name, this placeholder can act as a guide.

This placeholder is different from another attribute called value. While placeholder is to suggest the right format, value is the default value that'll be present in a text field. This is the code for both,

<label form="name">Name:</label>
<input type="text" name="name" placeholder="SNOW,JON"><br>

<label form="name">Email:</label>
<input type="text" name="email" value="jon@snow.com"><br>

And this is the difference in the browser.

medium

One more parameter that we'll talk about in this video is required. It does not take any parameters, and as the name suggests, it makes a particular field mandatory for the user.

In other words, if the user doesn't enter a value in this field, then he or she cannot submit the form.

Let's add this attribute to our name and email fields.

<body>
  <form action="contact_form.php" method="get">
    <label form="name">Name:</label>
    <input type="text" name="name" placeholder="SNOW,JON" required><br>

    <label form="name">Email:</label>
    <input type="text" name="email" value="jon@snow.com" required><br>

The output will be:

medium

Though the above parameter is convenient, it's not enough to truly validate your form. You also need code on your server side to protect against validations.

Let's say we didn't do any validation on our server side. You can right-click on your browser page and select "Inspect". In the code that pops up, you can always remove the required field, and submit it directly.

large

This way, you can change your browser code to the way you want. This is also why it's important to have server-side validations too.