Escaping double quotes in html attribute's value is good/bad practice? - html

Syntax 1:
<form action="home.html" id="frm-post2" method="post">
<input type="text" placeholder="text" required>
<input type="submit" value="submit">
</form>
Syntax 2:
<form action=home.html id=frm-post method=post>
<input type=text placeholder=Username required>
<input type=submit value=submit>
</form>
both syntax are work perfectly, but which one is best practice syntax1/syntax2

In certain cases, authors may specify the value of an attribute without any quotation marks. The attribute value may only contain letters (a-z and A-Z), digits (0-9), hyphens (ASCII decimal 45), and periods (ASCII decimal 46). I recommend using quotation marks even when it is possible to eliminate them.

Syntax 1 is "correct".
Many thinks work in HTML, however, kinda everyone uses double quotes. You don't have do use them but everyone does.

Related

HTML Input pattern for "currency" field

Attempting to use a regex pattern for an HTML input element that limits the characters to 0-9, ",","-",".","$"
I have very little experience in regex and used the pattern=[0-9,.-$] on the input element and it does not work. Though I plan on studying regex intensely in the future, I need a little help on this for now. Thank you.
<form>
<input name="currency" pattern=[0-9,.-$]>
<button>Submit</button>
</form>
don't use regex, use native type="number" that will do job for you with no need for regex
coverage is almost full > https://caniuse.com/#feat=input-number
<form>
<input type="number" name="currency">
<button>Submit</button>
</form>
You have two problems.
- indicates a range, you already used it as such for 0-9. .-$ isn't a valid range. A validator would have highlighted this for you. You need to escape the -.
You are only matching one character. You need to match multiple so use something like + to mean one or more
<form>
<input name="currency" pattern="[0-9,.\-$]+">
<button>Submit</button>
</form>

HTML form - input validation with Alphanumeric with symbols ()._-‘ only

I want to validate below input with Alphanumeric and ()._-‘ symbol only.
<input type="text" name="companyName" value="" pattern="[A-Za-z0-9()._-‘]+" title="Alphanumeric with symbols ()._-‘ only" required> </p>
But, when I try the input, only ._‘ can be used, ()- are not working.
You need to escape those characters. They have significance in RegEx and aren't treated as part of the expression. Try the following: [A-Za-z0-9\(\)._\-‘]+
Works fine for me, with the exception of the '-' which probably needs to be first:
[-A-Za-z0-9()._‘]
Try the code below. I don't know why, but the order for the pattern attribute matters.
<form>
<input type="text" name="companyName" value="" pattern="[A-Za-z0-9()_.'-]+" title="Alphanumeric with symbols ()._-‘ only" required>
<input type="submit">
</form>

HTML pattern regex for no spaces

What will be the correct regex pattern for an HTML input which should allow only Letters, digits and #/./+/-/_. No spaces.
You can use this regex for no space:
<form>
<input type="text" pattern="[^' ']+" />
<input type="submit" value="test submit">
</form>
So you can modify it to add your other rules
If characters order and count does not matter you can use this:
^[-a-zA-Z0-9#\.+_]+$
Scratch that, there's actually a regex for that.
<input type="text" pattern="^\S+$">
That would work for MyName, but not for My Name.

Form Validation Becomes Invalid After One Letter

i have a contact form where I ask for ppls names. i tried to put some validation to make sure they only used letters "[A-Za-z]". if i type in 1 letter it goes to valid but then if i type any more letters it says invalid. is there something else i need to add to "[A-Za-z]"?
<div class="form-group">
<label class="col-xs-4 control-label" for="lname">Last Name</label>
<div class="col-xs-8">
<input id="lname" name="lname" type="text" placeholder="Your last name" data-trigger="manual" data-content="Can only contain letters!" class="name form-control" type="text" required pattern="[A-Za-z]">
</div>
</div>
The meaning of your pattern value is "only one character".
for using letters you can use pattern value as pattern="[A-Za-z]+". The meaning of + is 1 or more characters.
The attribute pattern="[A-Za-z]" means that the value must be a single letter. Add the + operator to allow repetition: pattern="[A-Za-z]+". The pattern attribute values have the same syntax as regular expressions in JavaScript.
On the other hand, you probably should not use pattern at all for a person’s name, unless you have a good reason to restrict them so that people are forced to enter their names as modified (e.g. omitting diacritic marks, omitting spaces, hyphens, and apostrophes, and transcribing characters that are not in the Latin alphabet).

Why is my hidden HTML form field showing up?

I'm trying to put some data in a hidden form field for a POST. But the field is showing up on my Web page. There are no styles or style sheet. Here's how the fields are defined. Any ideas?
<form action="GetUserPics.php" method="post">
<input type=”hidden” name=”picIndex” value="WHAT?">
<input type="submit" value="previous">
</form>
You are using non-standard quotation marks for your attributes on that field. HTML is interpreting those quotes as part of the attribute's value, as in:
<input type="”hidden”" name="”picIndex”" value="WHAT?">
Since ”hidden” is not a valid input type, it's reverting to text.
Because you're not using ASCII quotes, you're using some sort of weird slanty quotes that the HTML is trying to use as the type (and thus it will fall back to text). Interestingly, you're not using them to print the value, which incidentally hides your mistake.
<input type=”hidden” name=”picIndex” value="WHAT?">
Those are not regular double quotes. Try
<input type="hidden" name="picIndex" value="WHAT?">
Can you replace your hidden type input with this:
<input type="hidden" name="picIndex" value="WHAT?"/>