Thursday, October 22, 2015

4 Examples of Form Elements to Use with Javascript

Forms are ubiquitous throughout the internet, any individual planning on creating web pages must be well versed in the applications of form inputs and elements. Here are a few that are very useful.

<select>

The <select> tag is used to create a drop-down menu with various options for the end user to choose from. This could be anything from which state they are in, to their profession, or maybe where they heard about the particular company who's webpage they are visiting. A list would be a great choice anytime a designer wished provide/limit the choices of the web page consumer.



<textarea>

The <textarea> tag is used to provide a large area in which the end user can input a large body of text. While small text boxes suffice for input like name or password, if a website designer wished for the end user to leave comments or special instructions, a textarea would definitely be the right choice. Additionally, these boxes can be configured to allow the end user to make the box larger to assist with larger amounts of text.

<input type="checkbox">

The checkbox input is another very useful tool for form design. If the designer wishes to limit an end user's choices but also give them the ability to choose more than one choice, the checkbox is the perfect tool. When implemented the browser inserts it's specific checkbox graphic and the end user can check and uncheck the option as he or she pleases. You can even make checkboxes automatically checked by default, or change the website layout upon check or uncheck and cause a new checkbox to appear or graying out an existing option.


<input type=file>

At times the web page designer may not just want the end users input in the browser, they may also wish for the end user to upload one of their own files that can then be used in a multitude of ways. A common implementation of this is in image sharing sites where a user would upload pictures or educational sites where the user would upload classwork.

No comments:

Post a Comment