Save HTML form and values offline for later processing - html

I have an offline HTML form (see example below) which will have several tick options. The user gets the form sent by email, which he has then to fill offline and send the filled form back for later processing. How could this be implemented? I mean saving the html file when filled does not store the value. Any suggestions, ideas?
<form>
<div>
<input type="checkbox" id="check1" name="check1" value="ns">
<label for="check1">Is A correct?</label>
</div>
<div>
<input type="checkbox" id="check2" name="check2" value="ns">
<label for="check2">Is B correct?</label>
</div>
<div>
<button type="submit">Subscribe</button>
</div>
</form>
Best
Muleque

You can use local storage to store the data from the HTML form.
Here is the full implementation example for that.
Html Local Storage Implementation

Related

I need help connecting my textbox to my radio button?

In the web page that I am working on I have to setup a page that allows the user to choose two files and compare them. They are given three choices. One of these choices uses a text box for user input. When I try implementing this I found that the text box was not connected to the intended option. It could be accessed from the other options. I would like help fixing my text box so that it is exclusively connected to the third object "substrings".
<form action="/compare" enctype="multipart/form-data" method="post">
<button> Choose File 1</button><br>
<button>Choose File 2</button><br>
<input type="radio" name="compare" value="lines"> lines<br>
<input type="radio" name="compare" value="sentences"> sentences<br>
<input type="radio" name="compare" value="substrings"> substrings
<input type="number" min="1" placeholder="length of substring n"/><br>
<button type="submit">Compare</button>
</form>

In-page form does not send data to remotely hosted aspx form

I have an html form with the action linking to a remotely hosted aspx form. The html form mimics all the input names, ids, values, etc. of the aspx form.
After submitting the html login form with correct login data, instead of processing the data and redirecting to the target link, the page links to the raw login form with only the username data entered. Upon filling in the correct information again, the user is able to log in.
By checking the function of the other instances of the same login form on the site and encountering the same problem, I surmised that the issue is inherent in the remote aspx file, not the html form.
The form was working until about a week ago, when it promptly started behaving like this without any changes made to the code.
The live site is at http://blinqphoto.com
Thank you for any responses, this has me stumped.
Please find the html form and corresponding aspx form below.
HTML:
<form style="" name="LoginForm" method="post" action="https://acct.blinqphoto.com/loginframe.aspxredirect=http%3a%2f%2fwww.blinqphoto.com%2fmy-albums%2f" id="LoginForm">
<div>
<input name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJMjU0ODEwOTIzZGR61068oyJyEBB4UM9Gc8Fxx4225NLn2XmKWX95/vl6Zg==" type="hidden">
</div>
<div>
<input name="__EVENTVALIDATION" id="__EVENTVALIDATION"value="/wEWBAL1/8vwCgKTqJrlAQKN8oRJAv6M0J8PQkj11RCPtUGzghOj3yic+Mr17E559GJ73UVSHbxO9VE=" type="hidden">
</div>
<span> Email <input name="UserNameTxt" id="UserNameTxt" placeholder="example#gmail.com" type="text"></span>
<br>
<span>Password<input name="PasswordTxt" id="PasswordTxt" placeholder="password" class="password" type="password"></span>
<br>
<input name="LoginButton" value="Sign in" class="LoginButton" type="submit"><br>
</form>
aspx:
<form style="" name="LoginForm" method="post" action="https://acct.blinqphoto.com/loginframe.aspx?redirect=http%3a%2f%2fwww.blinqphoto.com%2fmy-albums%2f" id="LoginForm">
<div>
<input name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJMjU0ODEwOTIzZGR61068oyJyEBB4UM9Gc8Fxx4225NLn2XmKWX95/vl6Zg==" type="hidden">
</div>
<div>
<input name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBAL1/8vwCgKTqJrlAQKN8oRJAv6M0J8PQkj11RCPtUGzghOj3yic+Mr17E559GJ73UVSHbxO9VE=" type="hidden">
</div>
<span> Email <input name="UserNameTxt" id="UserNameTxt" placeholder="example#gmail.com" type="text"></span>
<br>
<span>Password<input name="PasswordTxt" id="PasswordTxt" placeholder="password" class="password" type="password"></span>
<br>
<input name="LoginButton" value="Sign in" class="LoginButton" type="submit"><br>
</form>
I believe this is due to the .NET event validation. If you look closely, the value of the __EVENTVALIDATION form field is not always exactly the same. This is used to validate the postback - to check that it is not coming from another URL for example, which is exactly what you are doing.
You need to disable the event validation for the login.aspx page.
Page.EnableEventValidation = false;
Is there a way to disable Event Validation for an entire page?
Note that disable event validation can possibly make your page more vulnerable.

How can the user save a form and access it later?

I have made a form and I want the user to have this option to type into the form and have the ability to close the page and open it again and see the text they have typed into the form. Do I have to use a database?
Here's my form:
<form action="" name="form1">
<label>Enter the title: </label>
<input type="text" name="title" class="title">
<label>Enter the description: </label>
<textarea name="description" class="description">
<!--Here's the save button-->
<input type="submit" name="submit" value="Save" class="savebtn">
</form>
I'm also not sure if I have to use a submit button.
You can use offline storage capabilities of HTML5.
See Client-Side Storage
Cheers !!
There are a number of different solutions.
The easiest way I would think of is to use a cookie, you can find how to create and manage cookie with easy javascript here
Then with some simple javascript code, when you load the page you just check if there is a cookie, if there is you retrieve the data and populate the form.

multiple form tags in page or one form tag?

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.

Form field data history not retained

I have a form on a page that is shown via https:// as follows:
<form id="memberslogin_form" name="memberslogin_form">
<fieldset>
<legend>Login</legend>
<div>
<label for="membershipId">Membership number</label>
<input type="text" class="field" name="membershipId" id="membershipId""/>
</div>
<div>
<label for="memberPassword">Password</label>
<input size="18" type="password" class="field" maxlength="50" name="memberPassword" id="memberPassword" />
</div>
<div id="button_login">
<input type="button" value="Login" class="button" id="signin" name="signin"/>
</div>
</fieldset>
</form>
The form is uniquely named, as are the inputs.
However, successful logins do not cause the "membershipId" entries to be listed in the input recent entries \ history. This occurs in both FF3.6 and IE6+.
I believe the ability to store field history is browser-based via it's settings, but I cannot retain the input history over https:// forms?
Is this a typo in here only, or in actual page:
<input type="text" class="field" name="membershipId" id="membershipId""/>
See the extra ".
I don't know much about the mechanism of saving form value in FF, but all this time, my form input is saved even if it in https site.
Maybe you can try lastpass that can save a form input for later usage as well as the password securely.