Create Your Own Forms!

Earlier, I mentioned that you could use JavaScript to interact with forms created in HTML. “What are forms?” you may ask. Well, you just used one to log into WordPress. They’re those awesome little input/output boxes that let you talk directly to your web page (or someone else’s web page). Without forms, your web experience would be one-sided and ultimately boring. Today, we’ll quickly introduce forms by taking  a look at the Gmail login page.

Gmail Login Prompt

Below is a snippet from the source code of gmail’s login page. Clearly, I’ve removed some of the error checking and privacy settings, but the real purpose of the login page remains.

<form>             

     <label>

            <strong class=”email-label”>Username</strong>

             <input type=”text” spellcheck=”false”  name=”Email” id=”Email” value=””>

     </label>

     <label>

              <strong class=”passwd-label”>Password</strong>

              <input type=”password” name=”Passwd” id=”Passwd”>

     </label>

</form>

If any or all of it is confusing, hang in there. It’s much less complex than it appears. Let’s break it down.

We already know that any object in an HTML page, whether it be a paragraph, list, etc. requires an opening and a closing, denoted by and .  The case with forms is no different. Although, notice that we can group forms together into one form and give each unique object a different name, which can be referenced in JavaScript. Each unique text form within the larger form is created within a <label> object, which allows the text box form to be selected either by clicking the label title or by clicking the text box form itself. Take the gmail login page as an example: If you click on the text “Username” or “Password,” their corresponding text box is highlighted, just as if you were to click the text box itself.

Each label also has a few attributes that have been given, like the class name (“passwod-label” and “email-label”), input type(“text” or “password,” which censors the text you enter), and the name and id (“Passwd” and “Email,” which will allow us to reference the forms in JavaScript). It is also worth noting that the form type could easily be changed to a button, checkbox or submit button (like the “Sign In” button) by changing the type to equal something else (e.g. type=”button”). Form is just a general term that refers to objects in a web page which are interactive.

Now that the HTML code has been established, we can reference them within a couple <script> tags in the source code. In the code below, we perform the simple operation of getting the text from each text box and saving them to a variable.

<script>

      function printEmail(form) {

           var text = form.Email.value;

           alert(“Email: ” + text);

      }

</script>

This basic script creates a function which takes a form as a parameter, gets the value typed into the form (using the form Class) and creates an alert which will pop up on the screen and print the message “Email: stuffYouTyped.” In order for it to actually pop up on the screen, we have to reference the function somewhere. To keep things relatively simple, we’ll just create a simple button form below our text forms and call the printEmail() function every time the button is clicked.

         <input type=”button” name=”button1″ value=”Display Email” onClick=”printEmail(this.form)”>

Essentially, we’ve created a button, named it, given it a value (which will show up as a label for the button as in the “Sign In” button), and called our function printEmail() whenever the button is clicked. The onClick is just a feature of HTML that lets us reference our script from within HTML tags. It’s what gives your JavaScript and HTML the ability and desire to talk to each other, and good communication is essential for any relationship. Am I right? The printEmail function created earlier takes in a form as a parameter, and for this reason, we have to use the reference “this.form,” which is a simple as it appears to be. It refers to the form which is calling the function printEmail(). Now, every time you click button1, your web page will display an alert which will print whatever is entered into the Email text box. Congratulations, JavaScript has just breathed life into your web page.

Ok, so maybe it’s not all that simple, but I promise it gets easier with practice. JavaScript has the potential to make your web page interactive and unique, not to mention downright nifty. Spend a little time with it and you’ll be coding in no time.


					
Advertisements


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s