Scribd
Upload
32 views14 pages

Where and How To Send Data?: Action Method

There are 4 main methods that can be used to send data from a form to a server: GET, POST, PUT, and DELETE. The GET method puts parameters in the URL, POST sends data in the body of the request, and PUT and DELETE are used for creating/updating or deleting resources. Form data can be sent over HTTP(s) with the client sending a request to the server, which then processes the data and returns a response. Files can be uploaded by setting the form's method to POST, enctype to multipart/form-data, and including file picker widgets. JavaScript can also be used to send form data to a server.

Uploaded by

Muhammad Hammad
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
32 views14 pages

Where and How To Send Data?: Action Method

There are 4 main methods that can be used to send data from a form to a server: GET, POST, PUT, and DELETE. The GET method puts parameters in the URL, POST sends data in the body of the request, and PUT and DELETE are used for creating/updating or deleting resources. Form data can be sent over HTTP(s) with the client sending a request to the server, which then processes the data and returns a response. Files can be uploaded by setting the form's method to POST, enctype to multipart/form-data, and including file picker widgets. JavaScript can also be used to send form data to a server.

Uploaded by

Muhammad Hammad
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 14

Where and How to send data?

<form action="http://foo.com" method="get">


</form>

We can use 4 methods here


 get
 post
 put
 delete
Form Data Submission
Client Send the request the data to server
over HTTP(s) protocol

Server Processes the incoming data and


send the appropriate response back to
client.
Sending Files To Server
If you want to send files, you need to take three extra steps:
1. Set the method attribute to POST because file content
can't be put inside URL parameters.
2. Set the value of enctype to multipart/form-data because
the data will be split into multiple parts, one for each file
plus one for the text data included in the form body (if
text is also entered into the form).
3. Include one or more File picker widgets to allow your
users to select the file(s) that will be uploaded.

<form action="http://foo.com/handleFile.php"
method=“post“ enctype=“multipart/form-data”>
<input type=“file” name=“user_profile_image” />
</form>
Sending Form Data Through Javascript
Available Input Types
<input type=“text” name=“some_value” />

• text Advanced Field Types


• email • number
• password • range
• search • date
• tel • datetime-local
• url • month
• radio • color
• checkbox
• submit
• reset
Auto complete box
<label for="myFruit">What's your favorite fruit?</label>
<input type="text" name="myFruit" id="myFruit"
list="mySuggestion">
<datalist id="mySuggestion“>
<option>Apple</option>
<option>Banana</option>
<option>Blackberry</option> <option>Blueberry</option>
<option>Lemon</option>
<option>Lychee</option>
<option>Peach</option>
<option>Pear</option>
</datalist>
Progress
Meters and progress bars are visual representations
of numeric values.

<progress max="100"
value="75">75/100</progress>

in HTML5 there is also available a more advanced


tag named as “meter”. For better understanding
of meter tag please refer to the reference page
https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/The_native_form_widgets
Constraint Validation
HTML 5 has some built in form validation
constraints, like, type=“email” will automatically
check for email(this constraint does not verify
correctly), type=“number” will not allow user to
submit anything other than numbers and
“required” attribute will not allow user to submit
the form field with an empty value etc.
Here are the complete details of these constraints.
https://developer.mozilla.org/en-
US/docs/Web/Guide/HTML/HTML5/Constraint_valida
tion
Create Amazing Forms
https://developers.google.com/web/fundamentals/design-and-ux/input/forms/

Forms are hard to fill out on


mobile. The best forms are the
ones with the fewest inputs. We
will cover designing efficient forms,
validating them effectively, and
keeping the user informed along
the way.
Design efficient forms
• Use existing data to pre-populate fields and be
sure to enable auto fill.

• Use clearly-labeled progress bars to help users get


through multi-part forms.

• Provide visual calendar so users don’t have to


leave your site and jump to the calendar app on
their smart phones.
Choose the best input type
• Choose the most appropriate input type for your
data to simplify input.

• Offer suggestions as the user types with


the datalist element.
Label and name inputs properly
• Always use labels on form inputs, and ensure
they're visible when the field is in focus.

• Use placeholders to provide guidance about what


you expect.

• To help the browser auto-complete the form, use


established name's for elements and include
the autocomplete attribute.
Provide real-time validation
• Use the browser's built-in validation attributes
like pattern, required, min, max, etc.

• Use JavaScript for more complex validation


requirements. (Remember Regular expressions?)

• Show validation errors in real time, and if the user


tries to submit an invalid form, show all fields they
need to fix.
Thank You
Lets Start
JavaScript Test

You might also like