Why the position of input within form have changed in browser? - html

In the template file, I write like this
% for name,sequence in NAME_SEQUENCE:
<form id="ucsc_profile_form${sequence_counter}"
action="${request.route_path('CF_profile_UCSC_adapter')}"
method="GET" target="_blank">
<input type="hidden" value="${species_short}" name="species">
<input type="hidden" value="${chrom}" name="chrom">
<input type="hidden" value="${start}" name="start">
</form>
....
% endfor
But when I use firebugs to check the html codes, they are rendered like this:
<form id="ucsc_profile_form1" action="${request.route_path('CF_profile_UCSC_adapter')}" method="GET" target="_blank">
</form>
<input type="hidden" value="${species_short}" name="species">
<input type="hidden" value="${chrom}" name="chrom">
<input type="hidden" value="${start}" name="start">
The strange thing is that the <input> element becomes out of <form>..
The original page can be viewed here, though the DOM structure looks wrong, the element of the form can still be submit..
Does anyone have ideas about this?

Running the link through the W3C Markup Validator. I see 674 HTML errors.
More often than not, these types of issues stem from Firebug becoming confused by errors elsewhere in the HTML.
In your case, you have <form> elements as children of <table> and <input> elements as direct children of <tbody>.
Fixing the above errors should get Firebug playing nice.

Related

How to hide input in xml?

I'm confused, if the code in the html is like this:
<input type="hidden" value="123">
So how's that code in xml?
I'm just learning xml, but I'm stuck in this element, if in html it has type="hidden" and value="123" then what does xml have? How to use type="hidden" and value="123" in xml?
Thank you.
All you have to do is just add hidden attributes. The mistake you made is adding type="hidden" instead of just adding "hidden" without type
<input hidden type="text"/>

W3C Validator doesn't like the use of <form> for xhtml 1.1 strict?

I get thrown out a bunch of errors on the xhtml 1.1 validator (W3C) whenever I use a element.
As soon as I change the element to a <div> all the errors disappear.
In browsers the forms work in both states (as a <div> or as a <form> element, minus the fact that when I use <div>, the submit button will not work.
Anyone have any ideas as to why the it's coming up as invalid?
<form class="form">
Name:<br/>
<input type="text" name="firstname"/><br/>
Email Address:<br/>
<input type="text" name="email"/><br/>
Comments:<br/>
<textarea name="Comments" rows="10" cols="50">Please enter your comments here.</textarea><br/><br/>
<input type="submit" value="Done"/><br/>
</form>
LINK: Screenshot of a few of the validator errors
Not sure why the question, because the validator is telling you exactly what's wrong.
You need an action attribute on your form.
Don't use <br> to format your markup.
Surround your input labels in actual <label> elements, and have them associated with their appropriate inputs via the for attribute matching the input's id. In XHTML you can't have text in the document that isn't appropriately wrapped in an element.
<form action="#insert_your_action_here">
<label for="first_name" class="block-label">
Name:
</label>
<input type="text" id="first_name" name="firstname">
</form>
Use CSS to format your labels and inputs:
.block-label {
display: block;
}

input type file invisible on page load

I have this problem Only on IE7 and IE8.
I have a shadowbox that contains an input type file in it.
When this shadowbox is loaded, the input file is invisible... until I mouse hover it.
It's a reall basic form with a really basic input file:
<form action="" method="post" enctype="multipart/form-data" autocomplete="off">
<input type="file" name="img" onChange="$('#button_img').css('display','');" />
<input type="hidden" name="step_crop" value="1" />
<input type="submit" value="" />
</form>
I tried to delete everything on the file and only leave the form with one element which is, yeah, the evil input file, but still invisible on page load until I hover it.
Someone would have an idea ?
(Video link for the behavior: http://www.screenr.com/6ICH )
Please try to close your div and input tags properly. does it work?
Hi, I can see input field in both IE7 and IE8. Can you please add your view how it looks like before and after

Right and correct markup in html forms

Once upon a time in HTML
I was looking W3Fools and find this paragraph, related to the errors in W3Schools:
<form>
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />
</form>
This code is wrong. Non-block-level elements (such as <input>) are
not valid directly inside <form> tags until HTML5.
Well, since I always format that way I said to myself "WAIT, I was wrong all this time". And go to validate it to check if it's true. Efectively, this code don't pass the validation.
Then, searching for the correct markup, I found several examples from more reliable sources, but none of the following examples passes the validator.
The bad, the good and the ugly
1. W3Schools
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
2. Mozilla Network Developer
In "Examples" section, I have found this:
A common use-case senario
<!-- A common form that includes input tags -->
<form action="getform.php" method="get">
First name: <input type="text" name="first_name" /><br />
Last name: <input type="text" name="last_name" /><br />
E-mail: <input type="email" name="user_email" /><br />
<input type="submit" value="Submit" />
</form>
3. W3C Wiki
<form action="http://www.google.com/search" method="get">
<label>Google: <input type="search" name="q"></label>
<input type="submit" value="Search...">
</form>
A Fistful of Codes
More details:
I'm trying to validate the code as HTML fragment, both in HTML 4.01 and XHTML 1.0.
The recurring error I have found is:
document type does not allow element "input" here; missing one of "p",
"h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address",
"fieldset", "ins", "del" start-tag
The question
What is the correct and valid markup I should use to make a form?
Thanks in advance.
Edit:
A similar question was answered redirecting the OP to the form section of HTML4 specification. They provided this code:
<FORM action="http://somesite.com/prog/adduser" method="post">
<P>
<!--...stuff...-->
<INPUT type="submit" value="Send"> <INPUT type="reset">
</P>
</FORM>
First, it isn't the same code of their wiki. But nevermind, from I know, the wiki it isn't 100% accurate.... BUT:
They fix the validation error by enclose all tag in a <p>. But forms are not paragraphs, it isn't? This code pass validation, but I think that's not very semantic...
Expert answers you giving to me (thanks!), for the most part, are to enclose the inner tags in a <fieldset>, but if I only need one fieldset (for example, a form with only one field or self-related fields), is this correct? Might that not be superflous code (because the fieldset tags are supposed to enclose similar fields)?
A fieldset is a block level element that is commonly used in forms. Therefore you could use a fieldset or another block level element like a div.
<form action="http://www.google.com/search" method="get">
<fieldset><legend>My form</legend>
<label>Google: <input type="text" name="q"></label>
<input type="submit" value="Search...">
</fieldset>
</form>
or
<form action="http://www.google.com/search" method="get">
<div>
<label>Google: <input type="text" name="q"></label>
<input type="submit" value="Search...">
</div>
</form>
This probably rarely gets flagged as non valid markup because people tend to a lot of divs to help style forms nicely.
I tend to agree with a few of the others in that FieldSet is the best way to group form items together, especially as it really helps with things like screen readers.
I tend to use the following:
<form action="http://www.google.com/search" method="get">
<fieldset>
<legend style="display: none;"></legend>
<label for="q">Google:</label>
<input type="text" name="q">
<input type="submit" value="Search...">
</fieldset>
</form>
I normally don't include the legend, but if it is required for validation, it doesn't necessarily have to be visible ;)
This code is wrong. Non-block-level elements (such as <input>) are not valid directly inside <form> tags until HTML5.
That's not entirely true. They are valid in Transitional DTDs but not Strict DTDs.
What is the correct and valid markup I should use to make a form?
It depends on the form.
For the examples given, the W3C version is the best. Having a block container in a form doesn't matter (unless it adds useful semantics, or sensible grouping of separate groups of controls). <label> elements are excellent.
I tend to group fields and labels inside the <fieldset> tag, which also sounds very semantical to me.

HTML input not hidding

I am not sure why this is not working I thought it should be but in chrome it is not hiding the input box
<input type="hidden" name="_id" id="_id" value="<?=$fetchretailer[0]['_id'];?>" readonly="readonly">
Could someone tell me if this is a bug, or if I have done something wrong.
here is the code above it
<div class="content">
<div class="leadform">
<form name="lead" id="lead">
<input type="hidden" name="_id" id="_id" value="<?=$fetchretailer[0]['_id'];?>" />
There is probably a missing quote in a tag above it.
Also, try removing the underscores from the name and ID attributes. That's not valid syntax. HTML attributes cannot start with underscores.