Showing required fields by bolding - html

I have an HTML form. I would like to show that some of the fields are required by making them bold. In principle, should this go into the CSS rather than HTML? How would you do it?
<form action="doit" id="doit" method="post">
<label>
Name
<input id="name" name="name" type="text" />
</label>
<label>
Phone number
<input id="phone" name="phone" type="text" />
</label>
<label>
Year
<input id="year" name="year" type="text" />
</label>
</form>

Just of the top of my head, I think that if you're willing to use HTML5 and use the <input type="text" name="year" required> property, that you should be able to do:
input:required{
font-weight:bold;
}
And of course, you could go wild here and start throwing around borders and all sorts of stuff to make it really stand out.

Singularity's answer is perfectly valid. For the sake of completion, if you're not willing to use HTML5's required attribute, I would recommend adding a class by the same name to the inputs that are required.
<input type="text" name="firstname" class="required">
input.required {
font-weight: bold;
}
You can further use that class as a selector in your Javascript where you enforce the rule.
$(form).submit(function() {
$('input.required').each(function() {
if ($(this).val() === '') return false;
});
});
To answer the other question you were asking: the bold directive should go in CSS since it is purely presentational.

Related

Partial changing of some Placeholders in Html through CSS?

So I am having a few input fields, where some are rquired to be filled, others not.
And I would like to add an red * at the end of each Placeholder where that is the case to indicate which one have to be filled, while all the other Placeholders, and the parts before the *, keep there normal color/or one of my choosing?
Note: Already tried Labels, and stuff, as well as putting the *´s just behind the input fields-which did work, but unfortunately looked Horrible.
Here is the code
Html
<input type="text" id="ISBN_VALUE" name="ISBN_VALUE" placeholder="ISBN">
<input type="text" id="TITLE_VALUE" name="TITLE_VALUE" placeholder="Titel">
<input type="text" id="AUTHOR_VALUE" name="AUTHOR_VALUE" placeholder="Autor">
<input type="text" id="COPY_VALUE" name="COPY_VALUE" placeholder="Anzahl">
<input type="text" id="PRICE_VALUE" name="PRICE_VALUE" placeholder="Preis">
<input type="text" id="COMMENT_VALUE" name="COMMENT_VALUE" placeholder="Kommentar">
<input type="text" id="USER_VALUE" name="USER_VALUE" placeholder="Benutzer">
And here the current CSS
::placeholder {
color: #ff0000;
}

Unable to get input regex pattern in type="email" to work correctly

I have the following regex pattern that I'm using to validate against email addresses in JavaScript which currently works.
const match = (email) => /^("?)(?:[A-Z0-9_%+-]\.?)+[A-Z0-9_%+-]\1#(?:(?:(?:[A-Z0-9](?:[A-Z0-9-]*[A-Z0-9])?\.)+[A-Z]{2,})|(?:(?:[0-9]{3}\.){3}[0-9]{3})|(?:\[(?:[0-9]{3}\.){3}[0-9]{3}\]))$/i.test(email);
console.log(match('email#email.com'))
console.log(match('.22#email.com'))
console.log(match('#.com'))
I've been attempting to use the HTML pattern prop to validate against this pattern, but I can't seem to get it to work correctly.
I've tried the same pattern but I can't seem to get it to work. I've also tried unescaping the regex pattern too.
<form>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email" pattern='/^("?)(?:[A-Z0-9_%+-]\.?)+[A-Z0-9_%+-]\1#(?:(?:(?:[A-Z0-9](?:[A-Z0-9-]*[A-Z0-9])?\.)+[A-Z]{2,})|(?:(?:[0-9]{3}\.){3}[0-9]{3})|(?:\[(?:[0-9]{3}\.){3}[0-9]{3}\]))$/'>
<input type="submit">
</form>
Currently any email address results in an incorrect pattern match. Do I need to format the regex pattern differently to support this?
First, you must use type="text". Else, the email validation will be done with the built-in regex. Second, pattern='/^...$/' must be "converted" to pattern='...' as there is no need for slashes on both ends and no need for anchors, the pattern is anchored by default.
Use
<input type="text" id="email" name="email" pattern='("?)(?:[A-Z0-9_%+-]\.?)+[A-Z0-9_%+-]\1#(?:(?:(?:[A-Z0-9](?:[A-Z0-9-]*[A-Z0-9])?\.)+[A-Z]{2,})|(?:(?:[0-9]{3}\.){3}[0-9]{3})|(?:\[(?:[0-9]{3}\.){3}[0-9]{3}\]))'>
If you need to make it case insensitive, add a-z to the character classes bearing in mind that [A-Za-z0-9_] = \w:
<input type="text" id="email" name="email" pattern='("?)(?:[\w%+-]\.?)+[\w%+-]\1#(?:(?:(?:[A-Za-z0-9](?:[A-Za-z0-9-]*[A-Za-z0-9])?\.)+[A-Za-z]{2,})|(?:(?:[0-9]{3}\.){3}[0-9]{3})|(?:\[(?:[0-9]{3}\.){3}[0-9]{3}\]))'>
JS demo:
input:valid {
color: black;
}
input:invalid {
color: red;
}
<form>
<input type="text" id="email" name="email" pattern='("?)(?:[\w%+-]\.?)+[\w%+-]\1#(?:(?:(?:[A-Za-z0-9](?:[A-Za-z0-9-]*[A-Za-z0-9])?\.)+[A-Za-z]{2,})|(?:(?:[0-9]{3}\.){3}[0-9]{3})|(?:\[(?:[0-9]{3}\.){3}[0-9]{3}\]))' title="Please enter the right email address." />
<input type="Submit" />
</form>

HTML - How do I assign a text value to another attribute's value?

I am trying to assign a HTML text attribute's value to a hidden attribute's value.
The text code:
<input type="text" name="number" id="number" maxlength="4" onBlur="myno=this.value; concatno=myno.concat('0001')" />
I've used alert to try the output of the concatno value. For example, if user enter 1010, then the output will be 10100001.
Then my hidden code:
<input type="hidden" id="hide" name="hide" value=concatno>
I want my hidden value to be 1010001, but instead the value became "concatno". How should I assign the value in my hidden attribute?
The problem here is that you never updated your #hide element.
You need to use some javascript, for example:
document.getElementById('hide').value = concatno;
Working snippet:
<input type="text" name="number" id="number" maxlength="4" onkeyup="var myno = this.value; var concatno = myno.concat('0001'); document.getElementById('hide').value=concatno;" />
<input id="hide" name="hide" value=concatno disabled>
Note that even if the event is not the issue here, I suggest you to use another trigger, like onkeyup, so that the value is updated more often.
I've also changed your hidden element to disabled to make it visual.
Moreover, you should learn to avoid inline JavaScript.
Here is how I'll do it:
document.getElementById('number').addEventListener("keyup", function() {
document.getElementById('hide').value = this.value.concat('0001');
});
<input type="text" name="number" id="number" maxlength="4" />
<input id="hide" name="hide" value=concatno disabled>
Documentation: getElementById
Hope it helps.
The issue is that you never actually update the value of your #hide element. You need to set its value inside of your event binding (just made the input visible for reference):
<input type="text" name="number" id="number" maxlength="4" onblur="var myno = this.value; var concatno=myno.concat('0001'); document.getElementById('hide').value = concatno; console.log(concatno)" />
<input type="text" id="hide" name="hide" value=concatno disabled />
It's also worth noting though, that you should generally avoid using obtrusive event handlers. Instead, delegate event handling to external Javascript. This way, your designer doesn't need to understand or even worry about the JS.
Here's an example using unobtrusive handlers:
document.getElementById('number').addEventListener('blur', function() {
document.getElementById('hide').value = this.value.concat('0001');
});
<input type="text" name="number" id="number" maxlength="4" />
<input type="text" id="hide" name="hide" placeholder="concatno" disabled />
Try using name/id instead;
<input type="text" name="number" id="number" maxlength="4" oninput='hide.value=(this.value + "0001")' autofocus=''/>
<input type="hidden" id="hide" name="hide" />
without inline scripts:
document.addEventListener('DOMContentLoaded', function() {
let hide = document.querySelector('#hide');
document.querySelector('#number').addEventListener('input', function() {
hide.value = this.value + '0001';
});
});
<input type="text" name="number" id="number" maxlength="4" autofocus='' />
<input type="hidden" id="hide" name="hide" />

html how do I make required fields in forms [duplicate]

This question already has answers here:
How do I make a field required in HTML?
(16 answers)
Closed 2 months ago.
Is there any way i could make fields required. I tried the using required="required" in the input tag, but it still did not work. is there any other way?
<input name="Forename" type="text" required="required" id="Forename2" onkeyup="allLetter(this)"/>
you can add required to your input field, so it can be :
<input name="Forename" type="text" id="Forename2" onkeyup="allLetter(this)" required />
Hope this will help you :)
The required attribute can simply be included like this:
<input required>
So in your case, remove the attribute tag:
<input name="Forename" type="text" required id="Forename2" onkeyup="allLetter(this)"/>
In order to make required attribute work you should wrap your inputs into <form> tag. After that onSubmit event will give you behavior you expected.
You can try something like this:
function validate() {
var value = document.getElementById("myfield").value;
//make what you want
console.log(value);
}
<form >
<label>
your field: <input type="text" id="myfield" name="my_field" required onkeyup="validate()">
<input type="submit">
</label>
</form>

HTML input field hint

I want to provide the user with a hint on what he needs to enter into my text field. However, when I set the value, it does not disappear once a user clicks on the text field. How can you make it disappear?
<form action="input_password.htm">
<p>Username:<br><input name="Username" value="Enter username.." type="text" size="20" maxlength="20"></p>
</form>
With a bit of JavaScript:
<input
value="Enter username..."
onfocus="if (this.value === 'Enter username...') this.value=''" ... />
HTML5 has a nice attribute for this, called placeholder:
<input placeholder="Enter username.." ... />
but this attribute is not supported in old browsers.
the best way to give a hint is placeholder like this:
<input.... placeholder="hint".../>
You'd need attach an onFocus event to the input field via Javascript:
<input type="text" onfocus="this.value=''" value="..." ... />
I think for your situation, the easy and simple for your html input , you can
probably add the attribute title
<input name="Username" value="Enter username.." type="text" size="20" maxlength="20" title="enter username">
With HTML5, you can now use the placeholder attribute like this:
<form action="demo_form.asp">
<input type="text" name="fname" placeholder="First name"><br>
<input type="text" name="lname" placeholder="Last name"><br>
<input type="submit" value="Submit">
</form>
http://www.w3schools.com/tags/att_input_placeholder.asp
I have the same problem, and I have add this code to my application and its work fine for me.
step -1 : added the jquery.placeholder.js plugin
step -2 :write the below code in your area.
$(function () {
$('input, textarea').placeholder();
});
And now I can see placeholders on the input boxes!
This is exactly what you want
$(document).tooltip({ selector: "[title]",
placement: "top",
trigger: "focus",
animation: false});
<form id="form">
<label for="myinput1">Browser tooltip appears on hover but disappears on clicking the input field. But this one persists while user is typing within the field</label>
<input id="myinput1" type="text" title="This tooltip persists" />
<input id="myinput2" type="text" title="This one also" />
</form>
[ref]
If you mean like a text in the background, I'd say you use a label with the input field and position it on the input using CSS, of course. With JS, you fade out the label when the input receives values and fade it in when the input is empty. In this way, it is not possible for the user to submit the description, whether by accident or intent.
If you don't insist on the hint being displayed inside the input field, a modern solution would use a label element with the for attribute referring to the id of the input field, like this:
<form action="input_password.htm">
<label for="username" title="This is your user name...">Username: </label><input id="username" name="Username" type="text" size="20" maxlength="20"></p>
</form>
If you click the label, the input field will get the input focus.
If you hover over the label, it will show a longer explanation.
Generally the label should describe well enough what the user has to enter (in the case of user name it should be very much obvious).
Define tooltip text
<input type="text" id="firstname" name="firstname" tooltipText="Type in your firstname in this box">
Initialize and configure the script
<script type="text/javascript">
var tooltipObj = new DHTMLgoodies_formTooltip();
tooltipObj.setTooltipPosition('right');
tooltipObj.setPageBgColor('#EEE');
tooltipObj.setCloseMessage('Exit');
tooltipObj.initFormFieldTooltip();
</script>