I am studying to become a Software Developer, and as a coder I am exposing the 'pink elephant' of the web; which is that almost everything we input data into online, is most likely a form. Hopefully, you are curious about that statement just as I was, and decided to check its validity. I suspected that this very text area I am typing into, is a form; I was not wrong.
Check for yourself: for Chrome browsers, right click on the screen, select "inspect", and to the right, a new panel displays with a lot of code. Scrolling through all the code, you should see a <form> tag that has a class inside of it. To be more precise, this field is the <textarea> section of the form.
All those posts, and tweets you created, be it on a timeline, reviews, replies, the "contact us", the profile creations, and online applications to name a few, almost all of the things you have input data into have been a form 😱.
For experienced developers and coders, this may not be anything shockingly new to you, but for us newbies (or is it noobs?), I think its worth a walk through on how to construct a typical basic form. This will be just the bare bones (HTML portion); the actual functionality(JavaScript part) of a form will be in another blog.
Constructing a form in HTML is a bit involving, but not hard--well not really hard 😅. You decide. Let's start with the this element:
<form> </form> and ...ta daaa! All Done! No wait, that's not quite it.
Before we actually code our form, let's take a moment to think about what kind of form we want this to be. Questions like: what is the purpose of this form? what kind of data do we want to allow (be entered) into this form, are important. By having those answers you plan out in advance, and that helps to know what additional elements and attributes will be needed within the form element.
So, I will demo a "simple" contact/comment form that will include a field for : Name, Phone, Email, and Message, and the button to send(submit)the form (once it functional of course😁)will get coded.
Here are the elements we will use to get this task done: <form>, <input> <label> <textarea>
Between the two form tags, is where we type the other elements listed above. The element contains a type attribute which tells the computer what kind of 'input' (or data) will be in this field, or how the data will appear and behave 🤓.
Here's the format and syntax: <input type= "text"> this allows a single line of text for this input field, that consist of about 20 max characters. Let's finish off the <input> part of the code for the Name field of our form.
This is what the completed input line of code looks like:
<form>
<input type= "text" id="name" name="user_name">
</form>
An id was added to easily select this input element when needed, and the name attribute defines the attribute type as soon as the form is submitted, so we kinda of need it 🤓). Also, input is an empty element--its self closing and doesn't require a closing tag.
Theres another line of code needed for our Name: field. Every form displays a label on screen, and that is what the label element does. It uses the attribute "for", which can take the value of the id from the input label:
<label for="name"> Since label is not an empty element, it requires a closing tag. Let's insert the text label we want to display on the screen, and close out the element.
<label for="name">Your Name:<label>
All together for the Name: field, our code is:
<form>
<label for="name">Your Name:<label>
<input type= "text" id="name" name="name">
</form>
If you just want single line name fields, then repeating the above will do. To properly show the control a coder has with form creating and acceptance of data type, I selected email, phone and message to demonstrate what changes are needed.
The Email: field code looks like this:
<label for="emailAddy">Your Email:<label>
<input type="email" id="emailAddy" name="your_email">
Can you spot the differences? Since this next field is for email, the type has to be email, which sets the standard of only an email address to be entered into this field. Let's think for a moment: Have you ever mistakenly(or not 😈) typed your home address instead of email, or typed anything other than the correct email format, and couldn't proceed with form completion due to an error?
This helps the user enter the correct data type and format of what the form master (I just made that title up 🥸)wants.
I feel that the person reading this is quite intelligent; and has already figured out what the type value will be for phone. But life always full of surprises...so I will say that you were "close".
<input type="tel" id="phone" name="phone">
Because technically, the word phone is short for "telephone" 🤓 hence, 'tel'. And there is one more thing missing from this code; we are asking our user to input numbers, not text. And we want to make sure that only numbers, and not alphabets are accepted inside this field. This level of control requires the 'pattern' attribute:
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">
Of course we want numbers for a phone , and with the pattern attribute, the coder is establishing what is acceptable. Inside the brackets[]'s numeric values 0-9 are acceptable. And inside of the curly braces {}, we indicate how many digits in this set is allowed, here we are saying only 3 digits are acceptable. Then we have a dash - , to indicate that character is also acceptable in the phone number format. In the next set of {}'s only 3 digits will be allowed, followed by another - , and in the last set of {}'s only 4 digits will be allowed.
This is how you control the form's input.The above is also the phone number format used in the 'States, so adjust according to your target users and/or country code.
Additionally, 'pattern' can be used as a way to ensure that the proper values you want the user to use is what is only accepted, you as the coder/developer/form master have that control based on what you place inside the " " (quotations) of the attribute pattern.
Now, let's finish off this section with adding the label for the phone field.
<label for="phone">Your Phone Number:</label>
Whew, this is a bit huh? No? Good! Here is the last part of constructing this form, the message box. Let's just jump right in!
<textarea id="msgArea" name="usersMsg"></textarea>
<label for="msgArea">Your Message:</label>
Did you notice it? Remember that the input element only allows one line of text, and about 20 characters. A message box allows more lines of text and characters. Also, the textarea element requires a closing tag. Aside from that, everything else should look familiar.
If you have been coding along, or decided to scroll to the end for the final product 🤭, here are the goods:
<form>
<label for="name">Your Name:</label>
<input type= "text" id="name" name="name">
<label for="emailAddy">Your Email:</label>
<input type="email" id="emailAddy" name="your_email">
<label for="phone">Your Phone Number:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">
<label for="msgArea">Your Message:</label>
<textarea id="msgArea" name="usersMsg"></textarea>
</form>
Lastly, notice that label is always above input, I wont tell you why, but play around with it and see. There are so many layouts and attributes and functionality of forms, this was barely a taste. Some resources I use include W3Schools, MDN, and when you're ready to style your forms, check out CSS Grid CSS Selectors
Thanks for reading and coding along, I hope this helped someone!😁
Top comments (0)