Hello everyone,
Michael here, and today’s lesson will be a continuation of the previous HTML forms lesson. In this post, I’ll cover some more neat things you can do with HTML forms.
In the previous lesson, I covered four input types for HTML forms-checkboxes, radio buttons, text boxes, and submit buttons. However, there are several more input types that you can use to make your forms more versatile.
Let’s start by exploring three new elements-tel, email , and password. These three elements allow a user to input their phone number, email, and password into a form, respectively. Here’s here we would incorporate these elements into the form:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>Sign up for membership:</h1>
<form action="Submitted.html" method="POST">
<label for="first">Please enter your first name:</label><br>
<input type="text" id="first" name="first"><br>
<br>
<label for="last">Please enter your last name:</label><br>
<input type="text" id="last" name="last"><br>
<br>
<label for="Email">Please enter your e-mail:</label><br>
<input type="email" id="Email" name="Email" placeholder="email@user.com"><br>
<br>
<label for="pwd">Please create a password:</label><br>
<input type="password" id="pwd" name="pwd" placeholder="password"><br>
<br>
<label for="phone">Please enter your phone number:</label><br>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"><br>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
In this form, I included two text box elements, a submit button, and fields for users to input their e-mail address, password, and phone number.
How exactly did I code out the e-mail address, password, and phone number fields? Let’s take a closer look at each field:
Here’s the code I used for the e-mail field:
<input type="email" id="Email" name="Email" placeholder="email@user.com"><br>To add an e-mail address input field to the form, the input type is email. I also used an optional attribute called placeholder, which allows me to set a placeholder for the email field (in this case, I used email@user.com as the value for the placeholder); the field placeholder will be displayed until the user types something into the field.
- Recall from the previous lesson that you need to set the
idof the input tag to be equal to theforof the corresponding label in order to connect the input field with the corresponding label.
Now let’s take a look at the password field:
<input type="password" id="pwd" name="pwd" placeholder="password"><br>To add a password input field to the form, the input type is password (pretty self-explanatory right?). As with the e-mail field, you can also add a placeholder attribute to the password field (I used password as the placeholder value).
Lastly, here’s the telephone number field:
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"><br>To add a telephone number input field, the input type is tel. However, let’s take a look at the pattern attribute. The pattern attribute allows you to indicate the pattern for the phone number; this is useful since different countries have different phone number patterns. For this example, I’ll use a US phone pattern (three digits-three digits-four digits).
You’ll also notice that I used regular expressions to specify the phone number pattern; I did do a Java lesson on regular expressions a while back, so if you want a refresher, here’s where to go: Java Lesson 18: RegEx (or Regular Expressions).
Now, let’s input data into this form and see what it looks like:
As you can see, the password is shown as a series of black dots so that it can’t be seen by anybody.
Interestingly, the phone number dashes don’t automatically show up in the phone number field.
Now let’s play around with some other input elements-color and number:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>Order your shirt and shoes:</h1>
<form action="Submitted.html" method="POST">
<label for="first">Please enter your first name:</label><br>
<input type="text" id="first" name="first"><br>
<br>
<label for="shirtcolor">What is your favorite shirt color?</label><br>
<input type="color" id="shirtcolor" name="shirtcolor"><br>
<br>
<label for="size">What is your shoe size?</label><br>
<input type="number" id="size" name="size" min="5" max="15"><br>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
In this form, I included a text box element, a submit button, a color picker, a number picker, and a submit button.
How did I create the color picker and number picker inputs? Let’s first take a look at the code to create the color picker:
<input type="color" id="shirtcolor" name="shirtcolor"><br>To add a color picker to a form, set the input type to color.
Now here’s the code to create the number picker:
<input type="number" id="size" name="size" min="5" max="15"><br>To add a number picker to a form, set the input type to number. You can customize the min and max parameters to your choosing; in this example, I set min to 5 and max to 15; this indicates that the number picker I created has a range of 5-15. I could’ve also set a step attribute, which would’ve specified how to increment the numbers in the number picker. For instance, if I used 5 as the value for step, I would’ve only seen 5, 10, and 15 on the number picker since I would only see increments of 5 (starting with 5) on the number picker.
The color picker displays a built-in color picker tool for you to choose a certain color. Pretty self-explanatory right?
For the most part, the color picker should work on any browser (I’m using Google Chrome) but there may be a few browsers that don’t support the color picker.
Anyway, here’s the neat thing about the color picker-you can customize the color you want according to RGB scales, HSL scales, or color hex codes. Let me explain what each of these color scales mean:
- RGB stands for red, green, and blue. R, G, and B can be represented by any number from 0-255, which represent the intensity of the red, green, and blue hues, respectively, in the custom color. A 0 for any parameter of RGB represents the least intense hue of red, green or blue while a 255 for any RGB parameter is the most intense hue.
- HSL stands for hue, saturation, and lightness. H represents a degree on the color wheel and can be represented with any number from 0-360; 0 is pure red, 120 is pure green, and 240 is pure blue. S & L represent a color’s saturation and lightness, respectively; both S & L are represented with percentages from 0-100. For S, 0% represents gray and 100% represents full color. For L, 0% represents black and 100% represents white.
- Color hex codes store colors as six-character hexadecimal codes (recall from Java Lesson 5: Java Numbering Systems that the hexadecimal system encompasses both 0-9 and the letters A-F). Color hex codes can range from #000000 (pure black) to #FFFFFF (pure white).
- Keep your eyes peeled for a future lesson on color and programming color scales.
The number picker allows you choose a number between 5 and 15. Why between 5 and 15? Take a closer look at this line of code:
<input type="number" id="size" name="size" min="5" max="15"><br>In the <input> tag, I set min to 5 and max to 15, thus making the range of numbers you can choose from between 5-15.
Last but not least, let’s play around with some date-time form tools-more specifically, let’s focus on date and time:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>Flight finder:</h1>
<form action="Submitted.html" method="POST">
<label for="datepicker1">Pick the date you want to depart for your vacation</label><br>
<input type="date" id="datepicker1" name="datepicker1"><br>
<br>
<label for="datepicker2">Pick the date you want to return from your vacation</label><br>
<input type="date" id="datepicker2" name="datepicker2"><br>
<br>
<label for="time1">What time would you like to depart? (flights shown within 90 minutes of selected time)</label><br>
<input type="time" id="time1" name="time1"><br>
<br>
<<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>Flight finder:</h1>
<form action="Submitted.html" method="POST">
<label for="datepicker1">Pick the date you want to depart for your vacation</label><br>
<input type="date" id="datepicker1" name="datepicker1" min="2021-03-25" max="2022-03-25"><br>
<br>
<label for="datepicker2">Pick the date you want to return from your vacation</label><br>
<input type="date" id="datepicker2" name="datepicker2" min="2021-03-25" max="2022-03-25"><br>
<br>
<label for="time1">What time would you like to depart? (flights shown within 90 minutes of selected time)</label><br>
<input type="time" id="time1" name="time1"><br>
<br>
<label for="time2">What time would you like to return? (flights shown within 90 minutes of selected time)</label><br>
<input type="time" id="time2" name="time2"><br>
<br>
<label for="layover">How many layovers do you want?</label><br>
<input type="number" id="layover" name="layover" min="0" max="3"><br>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
In this form, I have two date pickers (created with the date input type), two time pickers (created with the time input type), a number picker, and a submit button.
For both of the date pickers, I used the min and max attributes to set a range for the dates; for both date pickers, min is 2021-03-25 and max is 2022-03-25-this means that March 25, 2021 (today) is the earliest date you can pick while March 25, 2022 (a year from now) is the latest date you can pick.
The time pickers allow you to select any time between midnight and 11:59 PM. To select a time on the time picker, you’d need to scroll through the hour and minute sections to pick the hour and minute you want. You would also need to specify whether you want the time to be AM or PM.
- The
dateinput type allows you to create a date picker while thetimeinput type allows you to create a time picker, but if you wanted a date AND time picker, use the input typedatetime-local(you won’t be able to specify a time zone, however).
Thanks for reading,
Michael
