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.
Related
I am not able to type in the input field. When I remove the first div that has the id="viewport" I am able to type in the input field. How am I able to solve this?
<div id="viewport"></div>
<div class="form">
<h2 id="h2">Need a project from<br>Google Cloud Storage?</h2>
<form id="fileDownloadForm" method="GET" action="downloadBlob2" enctype="multipart/form-data">
<input type="text" id="textBox" name="objectToSearch" placeholder="Type the name of the project here." />
<button id="downloadBtn" type="submit" class="btn btn_primary">Download</button>
</form>
</div>
You may solve this by adding css attribute #textBox{ z-index:1000; }. It seems that viewport block is too big and overflowing the input field. z-index makes the input field more "important" - the bigger it is, the more important the element becomes.
just in case to others, what works for me is putting in the immediate tag. So in this case I will try to put it in:
<div class="form" style="z-index: 1000 !important;">
In my case, somehow the text color changed to white. I found it by accidentally double-clicking the input field after typing few characters.
In my case i used Reactjs app for using
<input type="text" title="Search for products, brands and more" autocomplete="off" placeholder="Search for products, brands and more" name="" value="" />
You can see i put value="" so it is blank. That's why it was not working.
I'm trying to append a <br> after every input line in a form, but Thymeleaf keeps giving me parsing error.
Here is the code piece that I'm having trouble with:
<form th:if="${not #lists.isEmpty(brands)}">
<input th:each="brand : ${brands}" type="checkbox" th:value="${brand.name}" th:utext="${brand.name + <br>}" />
</form>
If I add the <br> tag outside of input tag, it doesn't add it to each line.
Thanks in advance
I think you may be going about this in the wrong way.
th:utext would insert that within the <input> node. But, according to the HTML5 Spec, nothing goes in an <input> tag ("Content model: Empty.")
I think you want something more like this:
<form th:if="${not #lists.isEmpty(brands)}">
<th:block th:each="brand : ${brands}">
<label th:for="${#ids.next('brand')}" th:text="${brand.name}">Brand A</label>
<input type="checkbox" th:id="${#ids.seq('brand')}"
name="brand" th:value="${brand.name}"/>
<br/>
</th:block>
</form>
If you're using Spring MVC, you may also find this example helpful: http://www.thymeleaf.org/doc/tutorials/2.1/thymeleafspring.html#checkbox-fields
An image can best show the problem:
Of course I dont want my textarea to have a bunch of html tags as a default value, thats why I set the defaultvalue to 'Hi', which it aparently isnt showing right now, but which it should.
I already tried a few things to find/solve the problem. What I found out is that if I remove the other form on the page (a login form not visible on the image) this form works and properly shows 'Hi' as a value. So the problem seems to be that there are multiple forms on this page. Problem has only shown with the use of text-area's, input fields, on this page or any other, work fine. I also tried moving the textarea outside of the form tags, that does remove the html tags, but the 'hi' still isnt visible (plus I want the textarea inside my form, as it should be part of it).
Edit, after a few struggles finally managed to post the code as code instead of a document. Code for the first, properly working, form:
<div id="userbox">
<form id="form1" action="auth/login" method="post">
<div id="username-container">
<input class="transparent-input" name="username" type="text" value="Gebruikersnaam">
</div>
<div id="password-container">
<input class="transparent-input" name="password" type="password" value="Wachtwoord">
</div>
<div id="lostpass-container">
wachtwoord<br />vergeten?
</div>
<div id="login-container">
<input class="transparent-input" type="submit" value="Aanmelden">
</div>
</form>
</div>
Code for the second, faulty, form:
<div id="content">
<h3>Contact</h3>
<form id="form2">
<input type="text" value="Pietje Puk" /><br />
<input type="email" value="mijn#email.nl" /><br />
<textarea rows="10" cols="50">Hi</textarea>
</form>
</div>
edit: I did do a markup validation, nothing there that solved the problem
It turned out to be a markup problem after all. After trying some more I did find that moving a div closing tag to a different location in the document did solve the problem. Before I had opened a div before both forms and closed it in between them, closing it after both of them instead solved the problem.
Tnx Lars Beck for pointing me in the right direction :)
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.
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.