I understand the general semantics of a <fieldset>, along with how the name attribute on a <fieldset> can be used to give meaning to a group of inputs. The W3 wiki has a number of examples with this.
However, I don't understand what the name attribute on <fieldset> elements do when submitting forms. According to MDN, the name is submitted with the form data. W3C also mentions that it's for the element's name, which is used in form submission.
When trying out the name attribute on a <fieldset> though, I don't see it being submitted with the rest of the form data. It's unclear to me if it has any use other than semantics.
Is the name attribute on <fieldset> elements supposed to be submitted with the form data? If so, does it have a value? What does it do?
However, I don't understand what the name attribute on <fieldset> elements do when submitting forms.
Nothing.
You've tested this yourself:
When trying out the name attribute on a <fieldset> though, I don't see it being submitted with the rest of the form data.
It appears to be an error in the summary of the spec (presumably copied from input at some point) which has been copied onto the MDN reference.
The rules for form submission don't mention fieldsets.
W3C also mentions that it's for the element's name, which is used in form submission.
The complete quote is:
name - Name of form control to use for form submission and in the form.elements API
The form.elements API (along with generic DOM APIs like getElementsbyName) is the only place where the attribute has any actual effect.
This is a bit strange to me, but it seems the purpose is so that you can access it via myForm.elements like you can any other form element. Fieldsets do have some relevance to how your form functions (for example, making a fieldset "disabled" will apply to all its child form controls), so I guess this is something some developer might want to do.
I'm pretty sure that's the only use for it. Fieldsets can't have a value (even if you set one, your browser should ignore it and not submit it), so it'll never be included in what is sent to the server.
Here's a little test I made trying to understand this:
var fruitform = document.getElementById("fruitform");
var output = document.getElementById("output");
function log(msg) {
output.innerHTML = output.innerHTML + "\n" + msg;
}
log("*** fruitform.elements ***")
log(JSON.stringify(fruitform.elements));
log("");
<h2>test form</h2>
<!-- the 'action' url' is just a page that outputs any GET parameters you pass to it -->
<form action="http://www.w3schools.com/html/action_page.php" id="fruitform">
<fieldset name="facts">
type:
<input type="text" name="type" value="banana">
<br><br>
color:
<input type="text" name="color" value="yellow">
</fieldset>
<br>
<input type="submit">
</form>
<!-- place to put some output -->
<h2>output</h2>
<pre id="output">
</pre>
(here's the same demo on codepen)
I agree with #Quentin .
The fieldset seems to not even be sent to the server, just the input field:
Related
Is there any way to validate inputs in the form using HMTL?
For example:
<input type="text" class="input-text error"
aria-required="true" placeholder="Enter your name *"
aria-invalid="true" required />
If user adds a special character to input, an error message saying "Characters are not allowed" should be shown below the input box.
First of all, client-side form validation is the greatest feature coming with the HTML5. Client-side form validation helps you to ensure data submitted matches the requirements. To get more detail about it you can visit here.
Important Note
Client-side form validation is an initial check, You should not use data coming from the form on the server side without checking it. It just a feature for good user experience. Because client-side validation is too easy to manipulate, so users can still easily send data that you do not want to on your server.
Solution
In this question, the best solution is; using HTML attribute pattern. The pattern attribute defines a regular expression the form control's value should match. To get more detail about pattern attribute you can visit the this page.
Below regexp you need.
^[a-zA-Z0-9]{5,12}$
It works like that;
It should contains only alphanumeric.
Minumum 5 and maximum 10
character.
You can use below code to integrate it with input field.
<form action="">
<input type="text" name="name" required
pattern="[a-zA-Z0-9]{5,12}" title="No special character">
<input type="submit">
</form>
Usually, to check inputs from html tags, you can create a javascript function to check your needs which is called everytime the user type in your input with the "onkeyup()" function.
The "onkeyup" keyword will trigger the function everytime user type in your field
<input type="text" onkeyup="myFunctionToCheck()">
<script>
myFunctionToCheck(){
//Here check your needs
}
</script>
I am trying send the value of a textarea using a Post method when a button is clicked.
Code is very simple:
<html>
<head>
</head>
<body>
<form action="/editFile" name="confirmationForm" method="post">
<textarea id="confirmationText" class="text" cols="86" rows ="20" name="confirmationText" form="confirmationForm">
<out value="#{user.getFileContent}"/>
</textarea>
<input type="submit" value="Email" class="submitButton" id=""/>
</form>
</body>
</html>
To get this data when this request is done I am using CWF web framework and the methode is very simple:
void editFileController::doPost(CWF::Request &request, CWF::Response &response) const
{
QString out = request.getParameter("confirmationText");//this will give me the value of the widget "confirmationText" from HTML
QString out1 = request.getParameter("confirmationForm");
}
In order to get value of a filed this is done in this way:
<input type="file" name="test"/>
request.getPatameter("test"); //all works ok
But for the first example (the one with textarea) I can't set it to send the value of textarea when button is pushed.
Can anyone give me some ides about how I can fix this? This frameworks know only to give me the value for a specific name. So, somehow I should set the value of the button with the value of the textarea when this is pushed.
Thank you.
The textarea needs to belong to the form you are submitting.
Since you have form="confirmationForm", it belongs to the form with id="confirmationForm" which doesn't exist.
Remove the form attribute from the <textarea> start tag.
Your form has name="confirmationForm". The name attribute served a similar purpose to the id attribute before HTML standardized on id for client-side references to elements when HTML 4 came out in the late 1990s.
Two decades later, there is no reason to give elements name attributes for client-side purposes.
(Giving form controls like <textarea> name attributes for the purposes of submitting data for server-side use is still correct).
When i open the html file with the code snippet, mentioned below, in my browser i see a checkbox and a submit button.
<form >
<input type = "checkbox" name = "q">
<input type = "submit">
</form>
However, when I move the first line along with the form(as shown in the code snippet below) and then reload the file in my browser, I don't see the checkbox. I see only the submit button.
I infer that mentioning the first line along with form keyword means something different. Can someone explain what is the difference ?
<form input type = "checkbox" name = "q">
<input type = "submit">
</form>
PS: I am new to html and web development. This may be a noob question.
As per definition, the <form> tag is used to create an HTML form for user input. This form contains other elements such as <input>, <button>, <textarea>, etc. These elements cannot be clubbed into the form tag.
When you write :
<form input type = "checkbox" name = "q">
it creates an element form with attributes type="checkbox", name="q" and input="" and therefore it doesn't create the checkbox you wanted.
The correct format is :
<form>
<!-- form content -->
</form>
A form and an input are two different kinds of elements. You can't just merge them together, it makes no sense. If you want an input, you have to have an input element
For a bit of explanation, when you open a tag like so:
<form
everything you type within thhat tag before it is closed by a '>' is usually a property of that element. E.g.
<form prop1='a' prop2='b'>
blah blah
</form>
Such properties would things like classes or ids. An element can't be a property.
I just noticed an interesting way of placing input elements outside of form tag today.
<html>
<!-- the form element -->
<form id="testform" method="post" action="index.asp">
<label for="text1">Text: </label>
<input type="text" id="text1" name="text1" />
<button type="submit">Submit</button>
</form>
<!--- element outside form tag -->
<label for="text2">Additional Text: </label>
<input type="text" id="text2" name="text2" form="testform" />
</html>
I am just wondering if it is common to practice to do this. Should this method be avoided?
Tried googling for similar discussions but i really don't know how to phrase this.
It is not common practice. In most cases, it offers no benefits but has a drawback: some old browsers do not support the form attribute, so things just don’t work on them.
An input element outside a form element has always been permitted. Such an element just won’t participate in any form submission, if it has no form attribute. But it can be used with client-side scripting.
The form attribute associates, in supporting browsers, the element with a form just as if the element were inside the form. This can be useful in complicated cases where e.g. one row of a table should contain fields of a form, another row fields of another form, etc. You cannot wrap just one row inside a form, and here the attribute comes to rescue: you put a form element inside one cell of the row and refer to that element in fields in other cells with the form attribute.
Yes, you can definitely do this as of HTML5, using the form attribute on inputs that are located outside the form element; just like you did.
For more details and examples, see HTML <input> form Attribute at W3 Schools.
There is nothing wrong with putting them there, and they will be available within the DOM if you are doing something with javascript, etc. but when you submit the form, the values of your fields will not be in the results submitted.
yes you can put input element outside the form but how would you decide how and where you 're going to post values of these elements.
I have a form:
<form method="GET">
<input type="text" value="hello" name="myname" />
</form>
If this form is submitted, I will end up at:
example.com/?myname=hello
What I would prefer is that when this gets submitted, I end up at:
example.com/hello
Is this possible?
No, you cannot change the way form submission works in HTML. (Using JavaScript, you can do transactions in a different way, without using HTML form submission.) When using method="GET", the URL gets constructed in a specific way; when using method="POST", the URL does not contain submitted data at all (it is sent outside the URL).
There is a trick that changes form submission in one way, but not quite the way you want. If the name of a control is isindex, then the control name and the equals sign are omitted; but the question mark is still there. That is, <input type="text" value="hello" name="isindex" /> would result in http://www.example.com/?hello. And Chrome has broken this when they removed the remainders of support to the isindex element.
If, for some special reason, you really need to make a form create requests like http://example.com/hello, then the simplest way is to set up a very simple server-side script that accepts normal requests that result from HTML forms and just passes them forward after modifying the URL in a simple way.