html-form

Posted on Edited on In ,

Overview

An HTML form is used to collect user input. The user input is most often sent to a server for processing.

Form

Form always has a <form> element and several input elements and submit button inside this form, when user clicks the submit button, user input is sent to server, but Form fields(input, select etc)do not necessarily have to appear in a form tag. You can put them anywhere in a page. Such form-less fields cannot be submitted (only a form as a whole can).

how data is sent depends on form attributes. there are several form attributes

  • action: specify where to send the form-data when submitted.

  • method: specify how to send form-data (the form-data is sent to the page specified in the action attribute).The form-data can be sent as URL variables (with method="get") or as HTTP post transaction(body) (with method=”post”).

    Get Method Note

    • Appends form-data into the URL in name/value pairs
    • The length of a URL is limited (about 3000 characters)
    • Never use GET to send sensitive data! (will be visible in the URL)
    • Useful for form submissions where a user wants to bookmark the result
    • GET is better for non-secure data, like query strings in Google

    Post Method Note

    • Appends form-data inside the body of the HTTP request (data is not shown in URL)
    • Has no size limitations
    • Form submissions with POST cannot be bookmarked

  • enctype: specifies how the form-data should be encoded when submitting it to the server, can be used only if method=”post”. as for ‘get’ it’s encoded with application/x-www-form-urlencoded

    • application/x-www-form-urlencoded: Default. All characters are encoded before sent (spaces are converted to “+” symbols, and special characters are converted to ASCII HEX values)
    • multipart/form-data: No characters are encoded. This value is required when you are using forms that have a file upload control
    • text/plain: Spaces are converted to "+" symbols, but no special characters are encoded

  • target: Specifies where to display the response that is received after submitting the form. by default a new page

Submit

After the button is clicked, the ‘submit’ event is triggers, the default submit handler collects all input element with its name and value, encodes them and sends them to server, after gets the response from the server, it opens a new page with response display in that page, this is the default behavior, if you do not like this way, you want to handle the response by yourself, you can overwrite the submit handler, in your own handlers, send the form data by ajax by yourself, something like this.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//with Jquery helper

function postcode(event) {
  //prevent default
  event.preventDefault();
  /*
    get attr from form
    get all inputs name and value by

    serialize() URL-encoded(jquery object API) or serializeArray() json format
    this here is Dom element, not Jquery object!!!
  */
  //convert to jquery object
  var form = $(this);
  $.post(form.attr('action'), form.serialize(),
    function (res, textStatus, jqXHR) {
        //handler response here
    });
}
//get the form by ID, reset submit event
$('#code-form').submit(postcode);

File Upload

If form has file input, method must set with post and encode with multipart/form-data

1
2
3
4
5
6
7
8
9
<form method="POST" action="/upload-profile-pic" enctype="multipart/form-data">
  <div>
    <label>Select your profile picture:</label>
    <input type="file" name="profile_pic">
  </div>
  <div>
    <input type="submit" name="btn_upload_profile_pic" value="Upload">
  </div>
</form>

Uppy.js

Use Uppy.js which is more powerful than form way.

1
<div id="drag-drop-area"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
var uppy = Uppy.Core({
  //lots of option you can set, refer to official site
  id: "uppy",
  autoProceed: false,
  //upload more files
  allowMultipleUploads: true,
  debug: false,
  restrictions: {
    // file limition
    maxFileSize: 5000000,
    minFileSize: null,
    maxNumberOfFiles: 5,
    minNumberOfFiles: null,
    allowedFileTypes: ["image/*"]
  }
});

//Use Dashboard.
uppy.use(Uppy.Dashboard, {
  inline: true,
  height: 570,
  target: "#drag-drop-area"
});
//use multipart/form-data encoding
  uppy.use(Uppy.XHRUpload, {
    endpoint: '/upload-profile-pic',
    method: 'POST',
    // set the name field that could be used by server
    // like <input name='profile_pic' />
    formData: true,
    fieldName: 'profile_pic'
});

uppy.on("complete", (result) => {
  console.log(
    "Upload complete! We’ve uploaded these files:",
    result.successful
  );
});