I have a form and I need to show the info like this:
Your name Your address
Your email Your password
Submit
Now I got something like this:
<fieldset class="left">
<input type="text" id="name" placeholder="Your Name*"/>
<input type="email" id="email" size="50" placeholder="Your Email*"/>
</fieldset>
<fieldset class="right">
<input type="text" id="tel" size="50" placeholder="Your address*"/>
<input type="text" id="cel" size="50" placeholder="Your password*"/>
<input type="submit" value="Submit"/>
</fieldset>
My class:
.left{float:left;}
.right{float:right;}
But it doesn't work...
Any ideas?
And the demo: http://jsfiddle.net/Nu5fG/
It has to do with the "size" settings of your input fields. Change them all to 20 and they do what you want.
The comment above is minimally helpful, so let me see if I can give you something substantive.
In this case, I don't think table layout is that bad of a thing. The data are "kind-of" tabular.
You'll have to widen your page, or shrink the input elements down to the minimum size possible.
Do you really need two sets of fieldsets?
Can you get away with a small font? Are the fields in a popup?
Related
I have an HTML form with 3 simple inputs and a submit button like this:
<form action="foo.php" method="post" id="form" name="form" target="_blank" autocomplete="on">
<input type="text" value="" name="firstname" id="firstname" placeholder="First Name" autocomplete="firstname" />
<input type="text" value="" name="lastname" id="lastname" placeholder="Last Name" autocomplete="lastname" />
<input type="email" value="" name="email" id="email" placeholder="Email Address" autocomplete="email" />
<input type="submit" value="Submit" name="send" />
</form>
When I click on the First Name input though and select the First Name to auto-complete, the browser doesn't complete the rest of the form (Last Name and Email). Using the Latest Chrome build: 90.0.44
Is that an expected behavior? How can I make the browser to autofill the whole form?
There is a description of autocomplete attributes here. MDN web docs - autocomplete.
"given-name"
The given (or "first") name.
"family-name"
The family (or "last") name.
email is the correct identifier for it tho. try correcting the others and see if that works for you.
Im working on one of my 5 projects in the freecodecamp Responsive Web Design course (the survey project) and I am trying to use the built in required function in html5 in my email input but it isn't working, when I click enter rather than giving the little popup asking for a valid email address with an # in it, nothing happens at all. Im a very new developer so humor me if im asking a dumb question but I can't seem to figure it out on my own.
HTML:
<form id="survey-form">
<label for="name">Full Name</label>
<input type="text" class="form-inputs" id="name" name="firstname" placeholder="Enter Name Here">
<label for="email">Email</label>
<input type="email" class="form-inputs" id="email" placeholder="Enter A Valid Email Adress" required>
</form>
Normally validation doesn't run unless you try to submit the form.
Add a submit button after your input element and try the same code. The end result could be something like this:
<form id="survey-form">
<label for="name">Full Name</label>
<input type="text" class="form-inputs" id="name" name="firstname" placeholder="Enter Name Here">
<label for="email">Email</label>
<input type="email" class="form-inputs" id="email" placeholder="Enter A Valid Email Adress" name="email" required>
<button type="submit">Submit Me</button>
</form>
If you require to send the form to a specific file to do the submission process you could add an action attribute to the form tag but from what you are saying that's outside of what you're currently studying.
EDIT based on Tieson T.'s comment
I added the name="email" to the email input in the code example.
This is a pure semantic question.
On my website, I have a guestbook in which you can post a comment and edit it. For posting or editing your comment, there are two very similar forms. Javascript will choose whether the form for posting or the form for editing will be visible (since all happens asynchronously). These are the two forms:
<form class="comment">
<h1>Comment</h1>
<label>Title: <input type="text" name="title" size="50" maxlength="60" /></label>
<label class="title_error error">Required.</label>
<label>Author: <input type="text" name="author_name" size="25" maxlength="35" /></label>
<textarea name="content" cols="60" rows="8" maxlength="1500"></textarea>
<label class="content_error error">Required.</label>
<input type="submit" value="Comment" onclick="return addComment($(this).parent());" />
</form>
<form class="edit">
<h1>Edit your comment</h1>
<label>Title: <input type="text" name="title" size="50" maxlength="60" /></label>
<label class="title_error error">Required.</label>
<label>Author: <input type="text" name="author_name" size="25" maxlength="35" /></label>
<textarea name="content" cols="60" rows="8" maxlength="1500"></textarea>
<label class="content_error error">Required.</label>
<input type="hidden" name="id">
<input type="submit" value="Edit" onclick="return editComment($(this).parent());" />
</form>
First off, I'd like to optimize these forms so that they are the best HTML5 semanticly. So What do you think, should everything within a form be wrapped in fieldset and why? Shouldn't h1 be legend or label? And the error messages, is it legit that they are now a label or should they rather be span?
But my main question is: since these forms are so similar, I could do three things with it:
keep the forms separate and make javascript hide one and show the other at the right time (as in the code above)
combine the forms in one form, giving some tags class="only_for_commenting" and others class="only_for_editing" (as in the code below)
combine the forms in one form, wrapping the tags in fieldsets according to when they should be shown (as in the code at the very bottom)
combined using classes:
<form>
<h1 class="only_for_commenting">Comment</h1>
<h1 class="only_for_editing" style="display:none;">Edit your comment</h1>
<label>Title: <input type="text" name="title" size="50" maxlength="60" /></label>
<label class="title_error error">Required.</label>
<label>Author: <input type="text" name="author_name" size="25" maxlength="35" /></label>
<textarea name="content" cols="60" rows="8" maxlength="1500"></textarea>
<label class="content_error error">Required.</label>
<input class="only_for_editing" type="hidden" name="id">
<input class="only_for_commenting" type="submit" value="Reageer" onclick="return addComment($(this).parent());" />
<input class="only_for_editing" type="submit" value="Wijzig" onclick="return editComment($(this).parent());" style="display:none;" />
</form>
combined using fieldsets: Edit: I've been conviced that this solution is the worst
<form>
<fieldset class="only_for_commenting">
<h1>Comment</h1>
</fieldset>
<fieldset class="only_for_editing">
<h1 style="display:none;">Edit your comment</h1>
</fieldset>
<fieldset class="for_both">
<label>Title: <input type="text" name="title" size="50" maxlength="60" /></label>
<label class="title_error error">Required.</label>
<label>Author: <input type="text" name="author_name" size="25" maxlength="35" /></label>
<textarea name="content" cols="60" rows="8" maxlength="1500"></textarea>
<label class="content_error error">Required.</label>
</fieldset>
<fieldset class="only_for_editing">
<input type="hidden" name="id">
<input type="submit" value="Wijzig" onclick="return editComment($(this).parent());" style="display:none;" />
</fieldset>
<fieldset class="only_for_commenting">
<input type="submit" value="Reageer" onclick="return addComment($(this).parent());" />
</fieldset>
</form>
So which option is the best semantically?
Edit: so I'm still thinking of three different solutions. I could have two separate forms (first block of code), or these two forms in different fieldset tags enclosed in one form tag, or I could have one combined form with classes for every input so javascript can hide one class and show the other (second block of code). In order to be able to choose between them, I'd like some advice. Which one of the three options is true:
The comment and edit form are two totally different forms semantically
The comment and edit form are different fieldsets of one same form
The comment and edit form are in fact to be seen as one and the same form
Well semantics is always debatable, but i think what you could try is that wrap both the forms in different field sets as the purpose of both the forms are different and according to me that is the point of semantics. You could give both the forms different class names and switch accordingly.
And regarding the error message query you should use a label as if a screen reader is in place its more likely to detect the error than a non-label element.
But as i said semantics are always debatable, you could at the end choose what makes more sense to you.
I've had this weird situation just popup where I'm unable to use my mouse on a form I'm creating. It's requiring me to tab through the text fields. if I click on the second field it just pushes me back to the first field, i have to tab!
this is the form totally simple, it has something to do with the labels but I have never had issues before.
BTW: no JS or CSS in this form or page
my example:
<form>
<label for="username"*Username label>
<input type="text" name="username" tabindex="1" id="username">
<label for="password"*Password*label*>
<input type="password" name="password" tabindex="2" id="password">
<input type="submit" class="button" value="Login" name="submit" >
</form>
This is the proper way to format inputs with labels. This should fix your problem.
<label for="username">*Username*<input type="text" name="username" tabindex="1" id="username"/></label>
<label for="password">*Password*<input type="password" name="password" tabindex="2" id="password"/></label>
demo: http://jsfiddle.net/ZFZgt/
My form is attached below, and I have tried many things I've found in other forums, but to no avail. I cant get the browser to prompt a 'Save Password'. Where am I going wrong. Hope someone can help. Thanks.
<form id="frmlogin" action="/index" method="post" enctype="application/x-www-form-urlencoded" autocomplete="on">
<label id="landing_username" class="required" for="username">Username/Email</label>
<input id="landing_username" name="username" type="text" value="" name="username" />
<label id="landing_password" class="required" for="password">Password</label>
<input id="landing_password" name="password" type="password" value="" name="password" />
<submit id="loginbtn" onclick="LoginFun()" type="submit" name="loginbtn">Login</submit>
</form>
Try to clean the HTML a bit, maybe it helps:
<form id="frmlogin" action="/index" method="post">
<label id="landing_username" class="required" for="username">Username/Email</label>
<input id="username" name="username" type="text" />
<label id="landing_password" class="required" for="password">Password</label>
<input id="password" name="password" type="password" />
<input id="loginbtn" onclick="LoginFun()" type="submit" name="loginbtn" value="Login" />
</form>
the form attribute enctype is by default application/x-www-form-urlencoded so you don't need to specify it
the labels for attribute should contain the id, not the name of the associated input
element IDs should be unique
the attribute name is defined twice for both password and username
the attribute autocomplete is by default on
the input value is not required, so you don't need to add it to the inputs with an empty string
the submit button should be an input of type submit
Some of these changes are only optimizations and the code could work fine without them, but others, such as ensuring the unique id of each tag, are fixes and they are strongly recommended even if the browser displays the form properly.