forms and validation

forms and validation

forms and validation

What is a form?

forms and validation

What is a form?

- html components used for submitting data

forms and validation

What is a form?

• - forms are defined by the <form></form> tag
• - html forms contain form elements

forms and validation

form elements

What are they?

forms and validation

form elements

Example is the input element, written as <input>

The input tag has several variations/types

forms and validation

input tag

• text
• radio
• submit

forms and validation

simple form

<form>
  First name:<br>
  <input type="text" name="firstname"><br>
  Last name:<br>
  <input type="text" name="lastname">
</form>

forms and validation

simple form

<form>
  First name:<br>
  <input type="text" name="firstname"><br>
  Last name:<br>
  <input type="text" name="lastname">
</form>

forms and validation

How will it look in the browser?

forms and validation

radio button input

<form>
  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other
</form>

forms and validation

How will that look on the browser?

forms and validation

What is a form action?

<form action="action_page.py">
  First name:<br>
  <input type="text" name="firstname" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit" value="Submit">
</form>

forms and validation

What is a form action?

the action attribute defines the action to be performed once the form is submitted

a server side script is specified to handle submitted data

forms and validation

What is a form method?

the method attribute specifies the HTTP method/mode to be used when submitting forms 

forms and validation

What is the difference between get and post?

get: is passive and is mostly used for search engine queries

data submitted via this mode is usually not sensitive in nature

forms and validation

What is the difference between get and post?

post: if the form is updating data or submitting sensitive data such as passwords

has better security since it does not post the data to the page address bar

forms and validation

What is the difference between get and post?

post: if the form is updating data or submitting sensitive data such as passwords

has better security since it does not post the data to the page address bar

forms and validation

form with all attributes

<form action="action_page.php" method="post" target="_blank" accept-charset="UTF-8"
enctype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
.
form elements
.
</form>

forms and validation

what are the attributes?

• target: specifies the target of the address in the action attribute
• accept-charset: the character encoding standard used
• enctype: defines the encoding format of the submitted data
• novalidate: specifies that the browser should not validate the form

forms and validation

javascript form validation

what is validation?

forms and validation

javascript form validation script

function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == null || x == "") {
        alert("Name must be filled out");
        return false;
    }
}

forms and validation

function called when form is submitted

<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

forms and validation

what is a regex?

what is their role in form validation?

http://www.regular-expressions.info/

explore them and come up with regexes testing if a user entered a phone number and email address