I saw this on a question recently.
<input type="radio" mess="whats up" name="q1" value="A" class="correct"/>
I can't get what the mess attribute do, and I couldn't see any result on the internet. So what is the mess attribute for?
It can be called as custom attributes intended to store a piece of information (purely for developer puropse)but it not advisable.
Instead you can go for HTML5 custom data attribute like
data-mess="whats up"
It can be easily accessed with .data() in jQuery.
<input type="radio" data-mess="whats up" name="q1" value="A" class="correct"/>
See
$('.correct').data('mess') // to getch the value
$('.correct').data('mess', 'some value') //to update the value
FYI:*custom data-** is purely validated with w3c validator. Whereas not with yours.
There is no mess attribute, in the question he just used it to attr and get the value through JQuery.
For example:
checked = $('input:checked').attr('mess'); sets checked to whatever the checked input had on the 'mess attribute', as seen in the question.
Another example:
$('#BobDiv').attr('txt'); will return 'Bob' if your HTML is <div id = 'BobDiv' txt = 'Bob' />
As seen here, you have to amend it in your !DOCTYPE declaration, though.
It's just a way to store arbitrary data in the tag. It does whatever the programmer intends it to do. Some people prefer to add custom attributes via data-foo, others prefer this syntax.
Related
Does it make any difference if i don´t include this attribute?
For example, on this <input>:
<input class="trn" id="searchInput" placeholder="Search..." />
Text is the default as #Xufox pointed out. Even if you try to validate against a W3C validator, and you type the input without the type, it will mark it as valid. You can try to validate your doc here:
https://validator.w3.org/check
However, as personal preference, and for readability purposes, I would always specify the type.
Regards
It's best practice to put type="whatever" because that will tell the HTML DOM what kind of input you want. Otherwise how does it know you want a radio button, checkbox, input field?
I am currently doing homework, and following the instructions the book gives me, but I can't get the required or pattern tags to work. I am creating a survey form, and trying to make an error come up when the user doesn't type in their name, receipt number, or email. Here is a portion of it.
<label for"receipt">Receipt number *</label>
<input name="receipt" id="receipt"
placeholder="re-nnnnnn"
required="required"
pattern="^re\-\d{6}$" />
A few things i see
the required attribute does not need a value, the existence of the attribute is what makes it required or not.
the - does not need to be escaped so use ^re-\d{6}$ for the pattern attribute
the issue with the notepad++ is that the language formatting/color-coding is not up-to-date with all the attributes.
<input name="receipt" id="receipt"
placeholder="re-nnnnnn"
required pattern="^re-\d{6}$" />
there is no need to write like that u can just write : required and it will work
and whats your pattern i don't catch that
Hello I have a form that allows the user to check as many options as they like and then hit submit. Is there any way to have the input type 'checkbox' submit more than one value?
For example right now I have:
<input type="checkbox" value="testuser">
But I want something like:
<input type="checkbox" value="testuser" valuetwo="1">
Is there any way to achieve this second option?
Thanks!
Since there is no way to submit to values, is there a way to submit them both in value one?
For example:
<input type="checkbox" value="testuser,1">
And if so how would I separate the value into two?
From your comments, it sounds like you have some JavaScript that handles the data before it's submitted. If that's the case, you can add a data attribute to the checkbox. To use your example, you could call it data-valuetwo.
<input type="checkbox" value="testuser" data-valuetwo="1">
Then, your JavaScript can use getAttribute to retrieve the value in your data-valuetwo attribute and handle it appropriately. It could look something like this:
var valuetwo = checkbox.getAttribute("data-valuetwo");
I found a way to do this without JavaScript or Libraries using a hidden form-field instead:
<input name="selectedValue" type="hidden" value="defaultValue">
<input name="selectedValue" type="checkbox" value="secondValue">
Now, if the checkbox is not selected, the hidden value is sent, if it is selected, the hidden value is overridden.
You might try alternative using select2, see: https://select2.github.io/examples.html (Tagging support, use two options limit). Again, there is no enough information supplied to fully satisfy Your question.
Another approach with select box and JSON is Can an Option in a Select tag carry multiple values? (can be rewritten for checkbox)
<!-- Some place on the webpage -->
<input type="text" id="firstName">
<!-- Some other place on the same webpage, or maybe content ajaxed in later -->
<input type="text" id="firstName">
Let's say I have a server-side script that generates an HTML page with some input fields each with its own ID. One server-side class may be responsible for adding input fields to one part of the webpage while another class handles another part of the webpage. Or you might have different programmers working on different parts of the page. I want to avoid collision with the HTML input field IDs. An example of this could be a parent form that has a jQuery dialog popup with input field IDs the same as the parent. Currently, I am prefixing the IDs with the name of the server-side class that generates them (and an underscore to make it clear which part is the prefix). To get a fully unique ID this way, I might have to start including the full namespace of the server-side class, and this might make my IDs very long.
Is there a better approach than prefixing the inputs or what is the best practice for this? I normally use camelCase for all my variables, with only this exception. Is this a good exception for breaking that rule?
What are most of you doing? Are you altering the way you select these input fields instead of by ID? Wrapping the input fields in form tags or div tags and adding functionality to the server-side to create these? (I'd like to have the freedom of not restricting what I wrap these inputs in to select them. My server-side code should just generate client-side code that grabs the values only knowing those inputs are going onto the page, and not knowing about any other tags on the page. Much easier to manage.) Are you adding css classes to each group of fields?
This answer is a little more directed towards users coming in from search engines. In my opinion, if you are using the id attribute in a dynamically generated form, they should probably be some kind of generated id/hash, unless it truly is a unique field. That aside, this is probably the best way to namespace HTML forms, especially when it is subject to collision:
<input name="pet_store[name]" value="" />
<input name="dogs[0][name]" value="" />
<input name="dogs[1][name]" value="" />
<input name="dogs[2][name]" value="" />
<input name="cats[0][name]" value="" />
<input name="cats[1][name]" value="" />
<input name="cats[2][name]" value="" />
If submitted all at once, the inputs will automatically be organized into arrays (at least in PHP, for nodejs you might have success with https://www.npmjs.com/package/qs).
In jQuery, you can select all dog name fields like this:
$('input[name$="[name]"][name^=dogs]')
I would use classes in this case. If you can't control what the uniqueness of ID's then they become pretty meaningless.
Instead of generating a super-long class name from the code that generates the html, you could add many shorter css classes to inputs that need them. It's not unusual to have lots of different classes in your document and they can all be used together with jQuery selectors. Also remember that if your inputs are in different forms then the form id (or class) could also be considered to work a bit like a 'namespace' too.
For reference, point 7.5.2 of the W3C Global Structure of an HTML document states that the id must be unique.
The idea of ids is that they are a unique reference to an element and as such it is not legal (valid HTML) to have multiple elements referring to the same id. If you want to avoid collisions and still identify the element you could use a combination of classes.
For example if you have 2 forms asking for a name (as in your previous comment) you could use:
<input type="text" class="ajax firstName" />
For the form generated by ajax, and
<input type="text" class="initial-form firstName" />
For the initial form on the webpage.
Equally you could use the data- attribute to hold a namespace. E.g:
<input type="text" data-namespace="ajax" class="firstName" />
(This can be accessed through Javascript with element.dataset["namespace"])
Use data-xxx attributes if you must, but I can't really think of a practical case of independent server-side scripts generating hundreds of DOM elements with unique IDs up to the point where name collision would become an issue.
How do you impose a character limit on a text input in HTML?
There are 2 main solutions:
The pure HTML one:
<input type="text" id="Textbox" name="Textbox" maxlength="10" />
The JavaScript one (attach it to a onKey Event):
function limitText(limitField, limitNum) {
if (limitField.value.length > limitNum) {
limitField.value = limitField.value.substring(0, limitNum);
}
}
But anyway, there is no good solution. You can not adapt to every client's bad HTML implementation, it's an impossible fight to win. That's why it's far better to check it on the server side, with a PHP / Python / whatever script.
there's a maxlength attribute
<input type="text" name="textboxname" maxlength="100" />
In addition to the above, I would like to point out that client-side validation (HTML code, javascript, etc.) is never enough. Also check the length server-side, or just don't check at all (if it's not so important that people can be allowed to get around it, then it's not important enough to really warrant any steps to prevent that, either).
Also, fellows, he (or she) said HTML, not XHTML. ;)
use the "maxlength" attribute as others have said.
if you need to put a max character length on a text AREA, you need to turn to Javascript. Take a look here: How to impose maxlength on textArea in HTML using JavaScript
For the <input> element there's the maxlength attribute:
<input type="text" id="Textbox" name="Textbox" maxlength="10" />
(by the way, the type is "text", not "textbox" as others are writing), however, you have to use javascript with <textarea>s. Either way the length should be checked on the server anyway.
you can set maxlength with jquery which is very fast
jQuery(document).ready(function($){ //fire on DOM ready
setformfieldsize(jQuery('#comment'), 50, 'charsremain')
})