Home

Note...
I have set up - in the <head> section on the form the following style code:-
input:focus {
   background-color: yellow;
}
This makes all the input boxes go yellow when they receive focus.

input:invalid {
   background-color: #CCFFCC;
}
This makes all the input boxes go light green when they have an invalid entry.

For more information on <forms action="" method="GET or POST"> Click Here

A Form should be used to allow the user to provide feedback or send and email
with some comments on.
This is an example of a form...it uses the label/input tags and text area tag (see code)
It also sets the 'Email Address' to be a REQUIRED field

This first part returns me back to a different webpage

Or it would have if I had a different page that made sense, so for now
it will just send me back to this page again (index.html)
It knows where to send me because of the
<form action="index.html" method="post">







NOTE... I also saw code...
<form id="form" >
   <input type="text" id="input" value="" >
   <button id="submit">SUBMIT</button>
</form>
which was a very simple form but because it had <form></form> around the text box & button then when the cursor was in the text box & you pressed ENTER it automatically ran the onclick for the button.
It's not really recommended, you should think about doing this instead (using 'keyup').

This second part takes me to an emailing routine

It's rather basic as you cannot really use just HTML to send a properly formatted email.









Using the 'pattern' command to set a format that is required
eg... pattern="http?://www.+"
? = 0 or 1 chr (so http: or https: is accepted) and . (dot) = any chr and + = 1 or more chr's
Top

A Form's information can be checked before it is actually 'submitted' by using the following example:-

In the <script> area, create a function, eg...
function checkForm(form) {
   if (form.userName.value == "") {
      alert("Error username must be entered");
      form.userName.focus();
      return false;
   }
   reg = /^\w+$/;
   if (!re.test(form.userName.value)) {
      alert ("Error, Invalid chr's in username");
      form.userName.focus();
      return false;
   }
   return true; }

And in the body of the page, where you have your <form> you should add the 'onsubmit()' method
eg
<form onsubmit="return checkForm(this);">


This means my element with the name="userName" in it will get checked for an error before the form gets submitted.

NOTE...
I have used an example of this above (second section), just leave the UserName blank before submitting the form.

Attributes : For and id re input/label elements

Labels on forms must have the for="id" set so when the form is submitted it knows which label goes with which element.
eg...

<input type="radio" id="age1" name="age" value="30">
<label for="age1">0 - 30</label>
<input type="radio" id="age2" name="age" value="60">
<label for="age2">31 - 60</label>
<input type="radio" id="age3" name="age" value="100">
<label for="age3">61 - 100</label>





(Also...using the for attribute on the label means you can click on the label and the relevant input box will get focus)

Top

Some other 'Input' commands below:-


or
Another Check Box

(Use the property .checked to see if the box is ticked or not)




(The password label uses the for attribute - so you can click the label an the password input box will get focus (but not for the others though)).



(Note the first number box steps 1 at a time when using the arrows in the box BUT the second number box steps 2 at a time because I included the attribute step="2")
(Number boxes with no min/max value displays as a long box)

(Number boxes with no up/down arrows)

Grouping of Radio buttons (must have the same name="")
eg...<input type="radio" name="ages" value="30">






This is an example of a type="range"
050 25

There are numerous types of 'input boxes' that can be used :-

button
checkbox
color
date
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week

It's best to look them up in w3shools web site HERE for an explanation of the <input> tag - and a list of applicable attributes (eg pattern, list, max, maxlength, minlength, multiple, required, checked, size etc)

or for the list of different types of input boxes

Top

Some other 'Input' commands below:-




Note: type="week" is not supported in Firefox, Safari or Internet Explorer 12 and earlier versions.




NOTE...
For any field that is invalid (ie a req'd field not answered or a field that has not been entered correctly according to its 'pattern') you could give it a YELLOW background and RED text by adding the following code in the <style> area:-
input:invalid, input:required:invalid, input:focus:invalid {
   background-color: yellow;
   color:red;
}
(There is also a :valid available if you want to change the style for correctly answered boxes ... but why would you? - maybe to easily show completed fields?)

Lining Up Input Boxes

So far putting the TEXT in one div
and the INPUT BOXES in another seem to work well
(Another option & may be better in the long run is using a TABLE instead but, for now, I have used div boxes)...

I created a DIV with two other DIV's inside (one for labels and one for the INPUT Boxes).
Then I could RIGHT-ALIGN the labels (also adjust the line-spacing to make it align with a text box) & LEFT-ALIGN the boxes.

combined with the :focus I can set the background colour whenever I am about to enter text in it.
input:focus {background-color: yellow;}
Eg
Click on each input box below to see it in action









Top

Password input boxes with error checking

(This uses the attribute
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}"
for RegEx checking...NOTE...No opening or closing / / is req'd with pattern.
Coupled with the style input:invalid to make the text red if the pattern format is not matched


(password must be at least 1 number/1 lower case/1 upper case & 6 chr's in length)

If the password does not match the pattern then when you submit the form (using the <input type=submit">) then I think it will tell you there is an error.

Otherwise you could always use your own error checking routine...see the Submit Form section above.

Another way of checking for valid input is by using the .checkValidity() method.

Top Top