I am working on a registration form that requires home and work addresses upon submitting.
The fields are as follows:
<html>
<form>
<input name="street-address" autocomplete="home street-address" required />
<input name="postal-code" autocomplete="home postal-code" required />
<input name="locality" autocomplete="home locality" required /> <!-- or "home city" -->
<input name="organization" autocomplete="organization" required />
<!-- addressee or department withing the organization. optional field -->
<input name="addressee" autocomplete="????????" />
<input name="work-street-address" autocomplete="work street-address" required />
<input name="work-postal-code" autocomplete="work postal-code" required />
<input name="work-locality" autocomplete="work locality" required />
</form>
</html>
I am using http://microformats.org/wiki/hcard and https://html.spec.whatwg.org/multipage/forms.html#attr-fe-autocomplete-organization-title to create a nice browser compatible autofill form.
What I can't figure out is if there is a nice autofill name for the addressee / department field.
Is anyone familiar with this / or any input?
I assume you want to use full street-address. if you just want to use address line 1 then try address-line1.
See MDN Specification here
Also Google Developers page (Note: in this example you could see locality, ... but they are deprecated. use )
Related
I need to collect two different credit cards. Their inputs are placed within a single form.
When I select a credit card from the Google Pay suggestions to autofill, all fields are autocompleted with this card data.
screenshot
I tried different ids, names but it doesn't help. I could only create two different forms to fix it. Is there any way to have those inputs in a single form?
<form name="ccform" action="">
<input id="cc-number1" name="cc-number1" autocomplete="cc-number" />
<input id="csv1" name="csv1" autocomplete="cc-csc" />
<input id="exp1" name="exp1" autocomplete="cc-exp" />
<input id="cc-number2" name="cc-number2" autocomplete="cc-number" />
<input id="csv2" name="csv2" autocomplete="cc-csc" />
<input id="exp2" name="exp2" autocomplete="cc-exp" />
</form>
I have a Sign Up form which contains these input fields (in order):
e-mail (autocomplete="email", type="email")
(user)name (type="text")
(display)name (type="text")
password (autocomplete="new-password",type="password")
password again (type="password")
If the user submits this form, Chrome suggests to save the password but with the names instead of the e-mail field (which will be needed to login). How can I tell Google Chrome (and other browsers) which input fields to remember / which will be the login credentials? (in my case: e-mail and password). Is there some kind of HTML5 code for this?
I have tried so far:
autocomplete="false" , autocomplete="off" and autocomplete="new-password" on the name fields ( Not working)
autocomplete="false", autocomplete="off" on the signup form itself (not working)
give an unrecognizable id and name to the name fields (id="usnm" instead of id="username") (not working)
I need to achieve:
Tell the browser that DO NOT remember the sign up form input values as credentials OR
Tell the browser exactly which data values to remember (e-mail + pass)
Any help is much appreciated!
Thanks to #Stacy-H at UX Forums, I could finally solve this mystery. Here is the solution:
In the HTML I've labeled the email field as "username". ( I guess lack of the labels caused Chrome's confusion on the subject. )
My form looks something like this now:
<!-- Email -->
<label>Username:</label>
<input required autocomplete="email" type="email" name="signup_email" id="signup_email" placeholder="E-mail" />
<!-- Username -->
<input type="text" placeholder="Username" id="signup_username" name="signup_username" />
<!-- Name -->
<input required type="text" autocomplete="name" placeholder="Display Name" id="signup_name" name="signup_name" />
<!-- Password -->
<input required pattern=".{8,}" autocomplete="new-password" placeholder="Password" />
<!-- Confirm Password -->
<input required pattern=".{8,}" autocomplete="new-password" placeholder="Password again"/>
I have a fieldset:
<div class="form-container container">
<form id="contact-form" action="mailto:xyz#email.com" method="post">
<fieldset form="#contact-form">
<legend>Contact Form</legend>
<label class="input-field-name">Name:<br />
<input class="input-field" type="text" name="Name"/>
</label><br />
<label class="input-field-name">Email:<br />
<input class="input-field" type="text" name="Email"/>
</label><br />
<label class="input-field-name">Message Title:<br />
<input class="input-field" type="text" name="Message Title"/>
</label><br />
<label class="input-field-name">Message:<br />
<textarea class="message-field" type="text" name="Message"></textarea>
</label><br />
<button id="submit-button" type="submit">Submit</button>
</fieldset>
</form>
</div>
I want to set it up so that the person who wants to contact me can enter their details and then when the 'Submit' button is clicked I receive an email with the Message Title as the header and the persons Name, Email and Message in the body of the email.
At the moment the mailto:xyz#email.com section will open up an email client successfully but I want it to just send automatically. I have some understanding of js and php but this is the first time I've tried something like this so was looking to be pointed in the right direction. I'm not asking for all the code, just what I need to do then I can work it out for myself.
At the moment the mailto:xyz#email.com section will open up an email client successfully but I want it to just send automatically.
You can't, at least not client-side. The mailto: protocol handler is intended to simply launch the registered e-mail client for the user. Nothing more.
I have some understanding of js and php but this is the first time I've tried something like this so was hoping someone could point me in the right direction
You can send the e-mail server-side with PHP. Don't bother with mail(), which is just a utility function for basic debugging and such. Consider a robust e-mail class like PHPMailer. That way, you can use secured SMTP servers, and also send HTML e-mails with proper multipart MIME encoding.
Normally we have a static form that is posted on the server and since it's static we know the name of the variables.
But let's say I have a dynamic number of form elements that I need to post, what's the best way to handle it in the backend? Can it be done via jersey?
A best example of this, is paypal's implementation when checking out items. They have dynamic number of inputs that is suffixed with _x, where x is a number.
<form>
<input type="text" name="name_1" />
<input type="text" name="amount_1" />
<input type="text" name="quantity_1" />
<input type="text" name="name_2" />
<input type="text" name="amount_2" />
<input type="text" name="quantity_2" />
</form>
How do I read all the input text in the backend?
Thanks,
czetsuya
you can read entity as MultivaluedMap<String, String> form or Form form (which is basically same thing) and iterate all keys or .. whatever you need. See FormParamTest for example.
I'm using happy.js for form validation. When an error occurs, a span with the class "unhappyMessage" will be placed directly before the form element that did not pass validation. The html ends up looking something like this:
<form id="myForm">
<label for="text1">Label 1</label><br />
<span id="text1_unhappy" class="unhappyMessage">Error message</span>
<input id="text1" type="text" />
<br />
<label for="text2">Label 2</label><br />
<span id="text2_unhappy" class="unhappyMessage">Error message</span>
<input id="text2" type="text" />
</form>
The <span>s don't show up until an error occurs. I would like to use css to somehow filter the error messages to the top of the parent, as if it were coded like this:
<form id="myForm">
<span id="text1_unhappy" class="unhappyMessage">Error message</span><br />
<span id="text2_unhappy" class="unhappyMessage">Error message</span><br />
<label for="text1">Label 1</label><br />
<input id="text1" type="text" />
<br />
<label for="text2">Label 2</label><br />
<input id="text2" type="text" />
</form>
Note that I would like to make each .unhappyMessage appear on its own line as well. Is there a css-only way to do this?
Note: for those of you who are wondering, I want to use css only because I would have to do some reverse engineering in order to get this working with javascript, since it seems the only event I'm provided through happy.js is not the only time that error messages are created.
Css wont provide a solution for you. Look for another form validator if you have no easy access into the event delegation. Or look into the code to see if you can figure out a work around.
Edit:
looking at the happy.js page it provides a callback function for you to specify if you wish.
unHappy (function): A callback that gets triggered when form
submission is attempted but any fields fail validation.
So pass a function that prepends all the error messages.