Introduction
Form controls are the principal means by which an HTML page receives user input. This area of the website provides an introduction to web forms. The contents are:
Any questions or comments should be directed to: The creator's email
Form controls are the principal means by which an HTML page receives user input. This area of the website provides an introduction to web forms. The contents are:
Any questions or comments should be directed to: The creator's email
The typical web form contains a form tag and is then followed by a set of form controls.
Traditionally, a web form needed a form action and a form method.
However, because we will focus on using AJAX, JSON and REST in this class,
those elements of a web form are no longer needed.
The standard web form thus looks like:
For more information on forms, go here.
Any questions or comments should be directed to: The creator's email
Text boxes are represented in HTML by various kinds of <input> tags. The kind of input is specified by the type argument. The following are input type arguments:
Like other form controls, text boxes normally have labels attached to them. In HTML, clicking on a label activates the form control. You create a label with the <label> tag using the for attribute to link the label to the text box.
For more information on text boxes and labels, go here and here respectively.
Any questions or comments should be directed to: The creator's email
To force a textbox to have a default value, set the value in the value argument.
In the example below, the default value of the textbox is set to "-put a value here-."
For more information on textboxes, go here.
Any questions or comments should be directed to: The creator's email
JavaScript is a programming language that is processed on the client computer. It is principally used to manage things to present to the client. Data manipulation is often done on the server side by a server side language like PHP rather than JavaScript.
JavaScript is written inside the <script> tag. We often, but not necessarily, put JavaScript scripts in the head section. We then link our JavaScript to the form via events.
In the example below, JavaScript which adds text to a paragraph is linked to a button onclick event.
For more information on JavaScript, start here.
Any questions or comments should be directed to: The creator's email
Javascript is an untyped language, which means it only has one data type- var.
Constants in Javascript are identified with const.
To return a result in a Javascript function use return.
Operations and equivalence testing in JavaScript are the same as other languages in the BCPL family (e.g., C, C++, Java, C#).
The below example uses Javascript to add two numbers.
Any questions or comments should be directed to: The creator's email
The three most common Javascript events on textboxes are the blur, keydown and keyup events.
The below example demonstrates using JavaScript with the onblur and keyup events. Observe how the error messages change based on your input.
Any questions or comments should be directed to: The creator's email
Because Javascript is untyped, we need to test and make sure what we have is a number before using it. To test if something is a number, use the isNaN (is not a number) function.
To convert a Javascript variable into an integer, use parseInt. Note parseInt will do everything it can to make the thing into an integer.
To convert a Javascript variable into a decimal number, use parseFloat. Note parseFloat will do everything it can to make the thing into a decimal.
The below example illustrates isNaN, parseInt and parseFloat.
Any questions or comments should be directed to: The creator's email
Use the <button> tag to create a button. Always declare a button with type="button". If you don't, HTML will treat your button as a submit button. We won't use submit buttons in this class, because the concept has been replaced by AJAX.
The common event for buttons is the click event.
Any questions or comments should be directed to: The creator's email
As with most other languages in the BCPL family, the concatenation operator in Javascript is +. Because + is both the addition and concatenation operator, and because Javascript is untyped, this can lead to ambiguity in expressions involving numbers. When you want to add, make sure you use parseInt and parseFloat. When you want to concatenate, and the string could be a number, preface your concatenation expression with a concatenation of an empty string. See the example below for an illustration.
Any questions or comments should be directed to: The creator's email
You can call a specific HTML object in Javascript by giving it an ID or a name. HTML IDs must be unique within a document. HTML names can be shared by multiple HTML objects.
If you give an object an ID, you can call it directly from Javascript with ID name dot argument. You can also call the object indirectly using document.getElementById. You can reference a name indirectly using document.getElementsByName.item(x) (note plural) where x refers to which object with that name you are referring to.
In old-style web development using the submit button, names were important because they were used to communicate with the server-side code. IDs could not be used with server-side code. However, with AJAX, we feed information to the server-side code with parameters.
Observe the different ways we reference an object in the code below.
A discussion on IDs and names can be found here.
Any questions or comments should be directed to: The creator's email
The .length attribute tells you how many items there are in an array. As strings are arrays, it also tells you the length of a string.
To create an object in Javascript, use document.createElement, which takes the type of the new object (e.g., tr is a table row) as an argument. Then find an existing part of the document to attach to, and use appendChild to attach there. At the very least, you can attach your element to the body tag.
The subelements of an HTML tag are identified by .children.
To delete an element from HTML, use .removeChild.
The example below illustrates how to calculate the length of a string and create and delete table rows.
For more information:
Any questions or comments should be directed to: The creator's email
To check if a text string matches a particular value, you can use the JavaScript RegExp class. This class is used to do regular expressions (pattern matching). RegExp is incredibly powerful, but it is likewise quite complicated to define the pattern you want. The easiest way to define patterns is to use square brackets.
For example [0-9] means the first character in the string must have a value between 0 and 9. [a-z] means the first character must be a small letter. [0-9a-z] means the first character can be any value between 0 and 9 or between a and z.
A * denotes 0 or more characters. Thus [0-9]* means the values ‘’,’0’,’10’, etc. are all valid. A + means one or more characters. A number in curly braces (e.g., {3}) beside a character means that many of that character.
There are also special reserved characters like \w (a character that can go into a word), \d (a digit- basically the same as [0-9]. So, \d+ means a number. [0-9]{3}-[0-9]{2}-[0-9]{4} is the pattern for social security numbers (i.e., 999-99-9999). \w+@\w+ is basically an email address (two things separated by @).
To use RegExp, you would var myregexp=new RegExp("the pattern you want to use") or say \the pattern you want to use\ and then test by using the .test method.
Upper and lowercase in Javascript are handled by the .toUpperCase and .toLowerCase methods.
The attribute disabled turns off a form field. Disabled is accessible in Javascript as a boolean attribute.
The example below illustrates the above concepts by turning on a pushbutton when a valid ethernet ID has been entered. It automatically capitalizes text as you type.
For more information:
Any questions or comments should be directed to: The creator's email
Use the <textarea> command to create a free text box.
For more information on textareas go here.
Any questions or comments should be directed to: The creator's email
Instead of disabling a form control, you can choose to set it to read only. Read only fields do not employ the disabled color scheme and data from the fields are still available to Javascript. The below example illustrates the visual differences between disabled and read only. When the ID is filled, the ID becomes read only, and all the form fields become enabled. When the clear button is pressed, the ID field is available for data entry and the other fields are disabled.
For more information on readonly go here.
Any questions or comments should be directed to: The creator's email
Hidden form fields are HTML structures that hold data but can't be seen. They are useful structures for holding data, especially data passed between forms. They are defined with <input type="hidden"> The below example shows how data can be stored and retrieved from a hidden form field.
For more information on hidden form fields go here.
Any questions or comments should be directed to: The creator's email
To set up custom error messages, use JavaScript's setCustomValidity() method. Use the reportValidity() method
to produce the error message. For example:
<script>
function checkpos()
{
if (posinput.value<=0){
posinput.setCustomValidity("Only positive values are allowed!");
posinput.reportValidity();
}
}
</script>
<label style="font-weight: bold;" for="posinput">A number box that only accepts positive values:</label>
<input type="number" id="posinput" onblur="checkpos();" style="width: 50px;"/>
For more information on setCustomValidity and reportValidity, go here.
Any questions or comments should be directed to: The creator's email