Form (1), a Simple View from Front

Submits user’s data and sends data to a server.

Quick demo

<form action="/my-handling-form-page" method="post">
    <div>
        <label for="name">Name:</label>
        <input type="text" id="name" name="user_name">
    </div>
    <div>
        <label for="mail">E-mail:</label>
        <input type="email" id="mail" name="user_mail">
    </div>
    <div>
      <button type="submit">Send your message</button>
    </div>
</form>

In this demo, the form will send 2 pieces of data named user_name and user_email. Data will be sent to the URL /my-handling-form-page using the HTTP POST method.

<form> Attribute Details

action

  • is the ocation that the data should be sent to
  • Must be a valid URL. Can be absolute or relative URL
  • If not provided, the data will be sent to the URL of the page containing the form
  • <form action="#">: before HTML5, action is required. It indicates data send to current page

method

method="GET" - method by default is “GET” - Data is appended to the URL - Url is like: www.foo.com/?user_name=moss&user_mail=haha@haha.com - enctype attribute will be ignored

method="POST" - Data provided in the body of the HTTP request - No data appened to URL - enctype attribute by default is application/x-www-form-urlencoded

POST / HTTP/1.1
Host: foo.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 38

user_name=moss&user_mail=haha@haha.com

Attributes inside of <form>

<label> Attributee

<!-- probably a better one -->
<div>
  <label for="user_name">Name: <abbr title="required">*</abbr></label>
  <input id="user_name" type="text" name="username">
</div>

When user click on the label, the input with id="user_name" shall be activated. It is especially useful for radio buttons and checkboxes.

<input>Attribute

  • button: A push button with no default behavior
  • date: HTML5 year, month, and day, with no time
  • email: HTML5 A field for editing an e-mail address.
  • hidden: not displayed, but value is submitted to the server
  • password: Use the maxlength and minlength attributes to specify
  • range: HTML5 number range
  • datetime: HTML5 will be removed, don’t use

See more: MDN Web Docs for Input

<button>

  • type="submit": A click will submit data
  • type="reset" : A click will reset data in form
  • type="button" : A click does nothing! It’s useful when customizing buttons with JavaScript

<button> VS <input>

  • type attribute specifies what kind of button is displayed
  • <input type="submit" /> produces a button, however it only allows plain text as its label
<!-- full html support-->
<button type="submit">
    This a <br><strong>submit button</strong>
</button>

<!-- only allows plain text -->
<input type="submit" value="This is a submit button">

Submit a form

AJAX

<button type="button" onclick="sendData({test:'ok'})">Click Me!</button>
function sendData(data) {
  var XHR = new XMLHttpRequest();
  var urlEncodedData = "";
  var urlEncodedDataPairs = [];
  var name;

  // Turn the data object into an array of URL-encoded key/value pairs.
  for(name in data) {
    urlEncodedDataPairs.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
  }

  // Combine the pairs into a single string and replace all %-encoded spaces to 
  // the '+' character; matches the behaviour of browser form submissions.
  urlEncodedData = urlEncodedDataPairs.join('&').replace(/%20/g, '+');

  // Define what happens on successful data submission
  XHR.addEventListener('load', function(event) {
    alert('Yeah! Data sent and response loaded.');
  });

  // Define what happens in case of error
  XHR.addEventListener('error', function(event) {
    alert('Oups! Something goes wrong.');
  });

  // Set up our request
  XHR.open('POST', 'https://example.com/cors.php');

  // Add the required HTTP header for form data POST requests
  XHR.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

  // Finally, send our data.
  XHR.send(urlEncodedData);
}

form not submitting in Microsoft Edge

In HTML5, a <button> has a form attribute.

<form id="form1" method="get" action="/">
     <input type="text" name="firstname" />
</form>
 
<button type="submit" form="form1" value="Submit">Submit</button>

However, it doesn’t work on IE and Edge. Since submit button is a type of control, the submit must appear inside a <form>.

You can use JavaScript onclick event.

<form id="form1">
	<input type="text" name="firstname" />
</form>
 
<button id="submit-button">Submit</button>
 
<script type="text/javascript">
	document.getElementById("submit-button").onclick = function() {
		document.getElementById("form1").submit();
	}
</script>

FormData Object

FormData sends a set of key/value pairs using XMLHttpRequest

var formElement = document.querySelector("form");
var formData = new FormData(formElement);
var request = new XMLHttpRequest();
request.open("POST", "submitform.php");
formData.append("serialnumber", serialNumber++);
request.send(formData);

Form Validation

When user enter data, form checks if it’s correct. It won’t allow invalid data to be submited, using HTML5 validation, Javascript and 3rd party library.

<input> HTML5 Valid

A quick demo with email validation. Show red dashed border when input is invalid.

<form>
  <label for="user_mail">What is your name?</label>
  <input id="user_mail" type="email" name="user_name" required>
  <button type="submit">Submit</button>
</form>
input:invalid { border: 2px dashed red; }

input:valid { border: 2px solid black; }

<input> Regex Valid

<input> has a pattern attribute, using regex to match text strings.

In this demo, it only accepts “man” or “woman”.

<form>
  <label for="gender">What is your phycical gender?</label>
  <input id="gender" name="gender" required pattern="man|woman">
  <button>Submit</button>
</form>

Javascript Validation

  • Use novalidate to provent the default form validation and let your JS validation take control
<form novalidate>
  <label for="mail">
    <span>Please enter an email address:</span>
    <input type="email" id="mail" name="mail">
    <span class="error" aria-live="polite"></span>
  </label>
  <button>Submit</button>
</form>
// There are many ways to pick a DOM node; here we get the form itself and the email
// input box, as well as the span element into which we will place the error message.

var form  = document.getElementsByTagName('form')[0];
var email = document.getElementById('mail');
var error = document.querySelector('.error');

email.addEventListener("input", function (event) {
  // Each time the user types something, we check if the
  // email field is valid.
  if (email.validity.valid) {
    // In case there is an error message visible, if the field
    // is valid, we remove the error message.
    error.innerHTML = ""; // Reset the content of the message
    error.className = "error"; // Reset the visual state of the message
  }
}, false);
form.addEventListener("submit", function (event) {
  // Each time the user tries to send the data, we check
  // if the email field is valid.
  if (!email.validity.valid) {
    
    // If the field is not valid, we display a custom
    // error message.
    error.innerHTML = "I expect an e-mail, darling!";
    error.className = "error active";
    // And we prevent the form from being sent by canceling the event
    event.preventDefault();
  }
}, false);

3rd party library validation

Find more: MDN Constraint Validation

References

Tags: ,

Updated: