I have 4 HTML Pages. In each page I have forms and form elements, but my submit button is only in my 4th page. So how do i try to access the elements i selected in the first three pages without using JavaScript??
For Eg: Consider a feedback form where we have to answer question in 3-4 pages in order to submit the feedback. We click "Submit Feedback" button only in the 4th page so how do the elements from the 1st, 2nd and the 3rd page get submitted to the server??
THIS IS A PROBLEM SHEET FROM MY COLLEGE. HERE IS THE FULL QUESTION
Step 1:
Identify a web architecture that is suitable for a survey website. The survey website will start with a brief introduction about the survey, and followed by the survey questions. Each question webpage will contain at most two survey questions, links to previous and next questions and a test submit button. Note that a server script is created for this lab allowing you to test if data are correctly passed to the server when the ‘Test’ button is clicked. However, no data will be saved at the server.
Step 2:
Use any text editor on your local computer (e.g. NotePad++), create the HTML for the survey website that contains the following HTML 5 elements. The survey form will be placed between the ... tags.
<!DOCTYPE HTML> <html lang="en"> <head>
<meta charset="utf-8"> <meta name="description" content="Web development">
<meta name="keywords" content="HTML (Part 1 – Content - Form)">
<meta name="author" content="put your name here">
<title>Web Development Survey</title>
</head> <body>
<!–- Survey content --> </body>
</html>
Step 3:
Mark up the form content using the elements discussed in Lecture 3. These are
- Form <form> ... </form>
- Form elements such as <label>...</label>, <input ...>, <select> ... </select>, <text area> ... </text area>,<fieldset> ... </fieldset> and <legend>...</legend>
Use other HTML elements discussed in Lecture 2 as needed
- Heading <h#>...</h#>, Paragraph <p>..</p>, Horizontal Rule <hr>
- List <ol>...</ol> or <ul>...</ul>, Table <table>...</table>, Image <img ...> and Anchor <a ... >...</a>
- Special characters
For instance the first question page for the name and sex can be marked up as follows.
<form id="survey" method="post" action="http://mercury.ict.swin.edu.au/cchua/webdev/surveytest.php">
<p><label>Name (optional)</label> <input type="text" name="name" size="20" />
</p> <p>Gender<br />
<label>Male</label> <input type="radio" name="gender" value=”M" />
<label>Female</label>
<input type="radio" name="gender" value="F" /> </p>
<p><input type="submit" value="Test" /> <input type="reset" value="Reset" />
</p>
</form>
Note that XHTML coding style is used in the above sample code
A processing script had been set up at the server with the following URL:
"//mercury.ict.swin.edu.au/cchua/webdev/surveytest.php"
This allows you to test if your form can correctly pass the inputted data to the server. Note that none of the sample data entered will be saved at the server.
You can obtain all the survey information and question at surveydata.txt. Ensure that correct form elements are used for each survey question. For example, checkbox is use for questions that allows multiple answers, while radio button is used for single choice questions.
Step 4:
Create a new folder ‘lab03’ under the unit folder on the mercury server ~/hit1091/www/htdocs. Upload today’s work to this lab03 folder.
Using WinSCP, drag and drop the all the survey HTML files from your local machine to the htdocs/lab03 folder. You can name the survey HTML files using the ‘survey##.htm’ format where ## represent a 2-digit number. For example, the first page can be named as ‘survey01.htm’ and so on.
Step 5: Test and view web pages.
To view the pages through http, use any Web browser and type in the following address,
//mercury.ict.swin.edu.au/hit1091//
The is s< your 7-digit Swinburne ID >. For example
*http://mercury.ict.swin.edu.au/hit1091/s1234567/lab_03/survey01.htm*
When the authorization request dialog pops up, use your SIMS username and password to confirm access.
Step 6: Validate the page(s) and fix any errors displayed and revalidate
To validate HTML file, use the ‘File Upload’ interface at http://validator.w3.org. For webpages pages that requires server pre-processing, validation via ‘URL’ must be used
What you need to do is to submit on every page. Then through some server-side scripting attach the post to the form in your next page until you are ready to process the information.
For example, if you were doing this in PHP you could have something like this on your second page.
<form method="post" action="page-3.html">
<label>Input for page 2</label>
<input type="text" name="page2Input" />
<?php
foreach($_POST as $key => $value) {
echo '<input type="hidden" name="'. $key .'" value="' . $value .'" >'; //Info from page 1
}
?>
<input type="submit" value="To Page 3">
</form>
This will "add" the information from first page into the form for its information to also be send to page 3. Or you could also just put them in a $_SESSION.
There are different ways to do it. This is just one of them. Don't forget to sanitize your input though.
Related
Sometimes I see a form that is wrapped in a form tag
<form action="demo_form.asp" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
</form>
And sometimes there is no form tag, but just a div
<div class="view">
<input class="toggle" type="checkbox">
<button class="destroy"></button>
</div>
<input class="edit" value="<%= title %>">
How come sometimes the form tag is present and other times its not for forms?
Prior to submitting information via AJAX, HTML forms were the standard in sending information to a server from a web page. They include the destination and method in the form attributes. More recently, this can be handled without assigning these attributes in form and sent via Javascript; typically using AJAX. This means the form element isn't necessary but is a good idea to include where possible to be syntactically correct HTML.
The <form> tag is not used specially when developers decide not to submit data in a conventional manner. The <form> tag has the main purpose of wrapping all the inputs that will be submitted to the next page specified on the action attribute of the <form> tag, and these data is sent using either POST or GET method indicated with the method attribute.
<form action="nextpage.php" method="post">
When the inputs are not wrapped by a <form>tag it means that the data is never submitted to another page or it submitted in a different way through javascript.
JavaScript is able to read the values of all the inputs and submit this data to a next page simulating a form or simply send it to the server without changing the page, when the page never changes but the data is sent to the server is when we say it was submitted using AJAX.
Forms input types are not always used to send values, they could be use as controllers, like date difference purposes, ranges or sliders to control alpha chanel, or rotate and image, making calculators, showing or hiding stuff on the page, lots of purposes other than just submitting to other pages
Check this code for a calculator on one of posts couple hours ago, lots of buttons, but not submitting anything
<INPUT TYPE="button" ID="button-cos" VALUE="cos">
Another example using button and input type="text" online image editor tutorial
I am trying to allow users on my website to upload an image with a form.
I have been using formspree (https://formspree.io/)
I receive the name of the image but no image attached to the email.
I'm using:
<label>
Upload Photo
<input type="file" name="uploadField" />
</label>
Has anyone managed to do this?
Formspree currently doesn't support file inputs, but Formsprees FAQ has this advice:
For almost zero work and cheap (or free) prices you can integrate external file upload services into a Formspree form. Uploadcare is one example. If you just create an account and include their widget:
<!-- The best place for this one is your <HEAD> tag -->
<script>UPLOADCARE_PUBLIC_KEY = "demopublickey";</script>
<script
src="https://ucarecdn.com/libs/widget/3.x/uploadcare.full.min.js"
charset="utf-8"></script>
<!-- This is where the widget will be. Don't forget the name attribute! -->
<input type="hidden" role="uploadcare-uploader" name="my_file" />
Per their documentation, you can use that inside the Formspree form and receive the URL of the document in your email address.
Source: https://help.formspree.io/articles/6199-how-to-do-file-uploads-with-formspree
I'm pretty sure the issue is your enctype isn't defined. Here's an example using a basic HTML form (you'll need some PHP/server side code to process the file):
<form action="your_script.php" method="post" enctype="multipart/form-data">
Image: <input type="file" name="uploadField" />
<input type="submit" value="Submit">
</form>
Hey guys i have a question. I am trying to set up something for my insurance website. I want to setup a capture page where the user inputs everything related to their vehicle and their information and once they click submit and proceed it directs them to another page of mine where it autopopulates all this information and gives them a quote. My question is how could i go about doing this?
The most simple solution is to use a Form on one page, that'll be submitted to another page, where the data will be processed and populated.
you can find many examples on the internet.
here's a good example from PHP's DOCS - Dealing With Forms:
HTML form:
<form action="action.php" method="post">
<p>Your name: <input type="text" name="name" /></p>
<p>Your age: <input type="text" name="age" /></p>
<p><input type="submit" /></p>
</form>
and action.php file, where the data will be handled:
Hi <?php echo htmlspecialchars($_POST['name']); ?>.
You are <?php echo (int)$_POST['age']; ?> years old.
you can see that any information sent with a form via the POST method, can be captured in the target php file using the the $_POST variable (a SuperGlobal).
I am trying to make one website for my school and i just started from basic to test
security of our website and it was observed that while getting this output from there
code if we put Name: ../ and Information : (any html code) then it changes that page
into that html code which was injected. Is there any solution how i can prevent this
problem so that i have much higher security.HTML code is
<html>
<head>
<title>Submit your form</title>
</head>
<body bgcolor="Black" text="#FFFFFF" link="#FFF833" vlink="#FFF833">
<center><table width=600 cellspacing=0 cellpadding=0 align="center"><tr><td>
<font face="verdana" size=2><b>Use this form to submit your information to the website.<br /><Br>Note:Information will be stored online immediately but will not be listed on the main page until it has a chance to be looked at.<br /><br />
<form action="submit.php" method="post">Name:<br />
<input type="text" name="name">
<br /><br />Information<br /><textarea rows=15 cols=40 name="text"></textarea>
<br /><br /><input type="submit" value="add text"></form></font>
</b></td></tr></table>
</center>
</body>
</html>
As I have stated twice, it depends entirely on how you're saving this user input... wait, that's three times now XD
I'm going to guess your code is:
file_put_contents("submissions/".$_POST['name']."/index.html", $_POST['text']);
But if $_POST['name'] is ../ then you are saving their submission to submissions/..//index.html... in other words you are overwriting the homepage of the site! And by allowing $_POST['text'] to be dumped in there with no safety just lets anyone do what they want.
Instead, you should be saving these submissions to a database, referencing them by an ID number, and using something like htmlspecialchars to prevent input HTML from being processed.
you need to add some filters with your each field for the input because if you are not doing this then the chances of XSS (corss-site scripting) increases so whether you are taking input from user for suppose usernamd , password , email-ids etc always check is fields must cot contain html tag specially the JAVA SCRIPT tag. If you allowed JAVA script tag with the input it will case session hijacking so please check all thing before lunch on final domain and host . GOOD LUCK
I have just started HTML5 and want to know in general if we should use one <form> tag per web page or multiple form tags.
Maybe it depends on the situation, but here are two different scenarios:
One Sign Up form
A home page with multiple sub forms: Login, Join Mailing List, etc.
Is it bad to have a form tag inside another or is it ok per standards?
Thanks
Edit
Can you please explain in a simple way what the purpose of the form tag is?
I feel like you've already answered your questions.
One sign up form = one form tags.
Multiple forms = many form tags.
Just don't nest them.
EDIT
Form tags are meant to hold a variety of fields (i.e. input tags) that you will eventually pass to a target URL using a GET or POST request.
Take this login form, for example:
<form action="login.php">
<input id="name" type="text" name="name">
<input id="passwd" type="password" name="passwd">
<input type="submit" value="Login">
</form>
This has a login, a password, and a submit button. When the "Login" button (type = "submit") is pressed, the form will take that information and send it to another URL (in this case, "login.php", and that URL will handle the information accordingly (e.g. validate, sign you in, display captcha).
There is no reason why you can't have multiple forms on a single page. You just can't nest forms, because then the forms aren't able to identify which fields are for what.
Conceptually, if you need to have the information for two forms occupy the same section or area on your site (for example, if you were combining your sign-up and email list forms or something), you would use a single form and sort out the information from the POST variable on the other end. So long as you name things in a way that makes sense, you shouldn't even want nested forms to accomplish this.
Edit:
To further answer your question, a form tag, in its most basic use case, is used to submit data to a URL. The URL you choose to submit a form to typically receives that data and processes it in some way before taking action on that data, like storing the data in a database, or creating a new user based on a given username and password.
Putting forms inside forms doesn't make sense, how would you differentiate the fields inside each form now? Are they part of the master form? The child form? Both?
Separate forms for each area that you will need to read input from is best practice. If you have a login area, make a form for it. If you also have a comment area on that page, a separate form should handle that event.
Yes, we can use multiple tags inside one single HTML page. Sometimes we need to submit two distinct data from a single HTML page. To do so we need to use multiple tags. We use a tag to send our data to a particular servlet or JSP (in case of JAVA). We provide information about the client through the . there is an attribute inside the tag called as action="#". We defined the particular servlet name where the data inside the must go.Thus we provide data from a client (HTML) to a servlet (server). Then the servlet manipulates the provided data like inserting the data into the database. The following code can be a help to understand. Here two tags are used for two different task, and also they will be handled by two different servlets.
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Registration | Badhon</title>
<link rel="stylesheet" type="text/css" href="registration.css">
</head>
<body background="images/registration.jpg">
<div class="title">
<h1>Registration</h1>
</div>
<div class="container">
<div class="left">
<div><h1>Choose an image (300*300)</h1></div>
/* First Form tag ---------------------*/
<form name="fileform" method="post" action="uploadImage" enctype="multipart/form-data">
<br> <label for="photo"> Portrait Photo: </label> <input
type="file" name="photo" size="50" placeholder="Upload Your Image"
required /><br>
<br> <input type="submit" value="Save">
</form>
/* End of First Form Tag---------------------*/
</div>
<div class="right">
<div class="formbox">
/* Second Form tag------------------ */
<form action="DonarRegister">
<p>Name</p>
<input type="text" name="name" placeholder="Name">
<p>Username</p>
<input type="text" name="username" placeholder="User_name">
<p>Password</p>
<input type="Password" name="password" placeholder="..........">
<p>Blood Group</p>
<input type="text" name="bloodgroup" placeholder="O positive">
<p>Age</p>
<input type="number" name="age">
<p>Mobile Number</p>
<input type="text" name="mobilenumber" placeholder="......">
<p>email</p>
<input type="text" name="email" placeholder="......">
<p>Address</p>
<input type="text" name="address" placeholder="Village/Thana/District">
<input type="submit" name="" value="Register">
<p> <h5>Have already an account !! Then just login</h5></p>
</form>
/* End of Second form tag ----------------- */
</div>
</div>
</div>
</body>
</html>
database and so on.