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.
Related
I need to pass this so a hardware engineer can do his work but it's not working. Any suggestions?
http://wfbscd13.cadence.com/cgi-bin/motd.cgi?msg=3&cmd=replace&text="
Here is my code...
<div class="messageform">
<fieldset>
<legend>Title 1</legend>
<form action=http://wfbscd13.cadence.com/cgi-bin/motd.cgi?msg=1&cmd=replace&text=" method="post">
<label for="mestext1"></label>
<input type="text" size="100" maxlength="80">
<div class="floatright">Titles can be up to 80 Characters... upload file if beyond 80 chars  <input type="submit" name="button1" id="button1" value="Replace"></div><br>
I thought I was good on this code but it's not working right, any ideas? Did I miss something?
Better like this:
<div class="messageform">
<fieldset>
<legend>Title 1</legend>
<form action="http://wfbscd13.cadence.com/cgi-bin/motd.cgi" method="GET">
<input type="hidden" name="msg" value="1">
<input type="hidden" name="cmd" value="replace">
<label for="mestext1"></label>
<input type="text" id="mestext1"" name="text" size="100" maxlength="80">
<div class="floatright">Titles can be up to 80 Characters... upload file if beyond 80 chars
<input type="submit" name="button1" id="button1" value="Replace">
</div>
</form>
</fieldset>
</div>
You need to be more careful with closing quotes and tags.
If a URL has a '?' in it, it probably means they want it as a GET not a POST.
Use hidden variables for the fixed params.
Don't repeat the text param.
The for of a <label> needs to point to the id of a tag.
If this is your entire code, then its not working probably because the code is not well-formed , i.e. there are places where you have missed to close the tags.
I have this form in html5:
<form method="post" action="form.php" >
<input id="fname" name="fname" type="text" value="" required/>
<input id="lname" name="lname" type="text" value="" required/>
<input id="submit" name="submit" type="submit" value="" />
</form>
Sometimes i receive empty fields. Can you tell me why?
It is best practice to include the aria-required attribute too:
<form method="post" action="form.php" >
<input id="fname" name="fname" type="text" value="" required aria-required=”true” />
<input id="lname" name="lname" type="text" value="" required aria-required=”true” />
</form>
Note that older browsers may not support support these attributes. On any browser that doesn't support these attributes, front-end form validation could still be achieved through javascript. You can learn more about javascript form validation here.
Remember it is important to validate input on the server too.
You can't make yours constraints only on the client side. Anyone can send a POST request to your server without using your form easily.
It's possible with all recent browsers to edit the DOM and remove the required part too.
HTML5 Validations are great for helping users but it's not for security/checking.
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?
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.