I have a complex form with many <input> elements, most of which I need to disable conditionally (via AngularJS to precise, but this question primarily targets the HTML aspect).
In order to avoid having to set a disabled attribute on every element, I place my inputs into a <fieldset> and set the disabled attribute once. This disables all contained inputs fields.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Fieldsets</title>
</head>
<body>
<form>
<fieldset disabled="true">
<input type="text" placeholder="first">
<input type="text" placeholder="second">
<!-- many, many more -->
<!-- trying to override here -->
<input type="text" placeholder="last" disabled="false">
</fieldset>
</form>
</body>
</html>
Now I need to make a few exceptions and keep some inputs enabled even though the surrounding <fieldset> is disabled. I tried overriding the attribute there by setting disabled="false", but this does not work.
Is there any elegant way to override the disabled attribute?
Related
I want the zip code part of my form, so only 5 numbers allowed, to reject anything that doesn't start with 46,52,53,54,60,61,62 using an html pattern
Try the below pattern (starts with one of the specified numbers and then allow 3 digits):
^(46|52|53|54|60|61|62)([0-9]{3})$
Here is the running HTML sample. You may use this pattern in Javascript as well if you want to perform the validation yourself:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Prescriptions</title>
</head>
<body>
<form action="#">
Country code: <input type="text" name="country_code" pattern="^(46|52|53|54|60|61|62)([0-9]{3})$"
title="Enter five digit number starting with specific numbers">
<input type="submit">
</form>
</body>
I know you 'should not' do this but I noticed something interesting with forms nested within a parent form element. If you have mulitple forms the rendering engine seems to strip out the first child form then remove all other child forms and add them after the closing form tag of the parent. Why does the rendering engine behave this way? Tested in Chrome and Firefox:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Form Test 1</h2>
<form id="form1">
<form id="form2">
</form>
<form id="form3">
</form>
<form id="form4">
</form>
</form>
</body>
</html>
If you open this in a browser form 2 will be removed and all others added after form 1.
I am trying to set html form input's default language to Georgian.
i.e. when user starts typing input it should be in Georgian and user should not have to switch language from keyboard.
I tried using lang="ka" attribute on almost every element but it is not working. ("ka" is html language code reference for Georgian, and I do have Georgian keyboard installed).
<!DOCTYPE html>
<html lang="ka">
<head>
<title></title>
<meta charset="UTF-8">
</head>
<body lang="ka">
<form lang="ka">
სახელი:<br>
<input lang="ka" type="text" name="firstname" >
<br>
გვარი:<br>
<input lang="ka" type="text" name="lastname" >
</form>
</body>
</html>
I want to add required property in radio input field and here is my code
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<title>test radio</title>
<style>
div.radio{
background-color:silver;
}
</style>
</head>
<body>
<form action='procesPost.html' method='POST'>
<div class='radio'>
<input type='radio' required name='test' value=1>
<input type='radio' required name='test' value=2>
</div>
<input type='SUBMIT' value='submit'>
</form>
</body>
</html>
It works well,I have to select one radio to submit, However, if I want to disable one radio, the required constraint will not work
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<title>test radio</title>
<style>
div.radio{
background-color:silver;
}
</style>
</head>
<body>
<form action='procesPost.html' method='POST'>
<div class='radio'>
<input type='radio' required name='test' value=1>
<input type='radio' required disabled name='test' value=2>
</div>
<input type='SUBMIT' value='submit'>
</form>
</body>
</html>
Now, I can submit the form even though I didn't select any radio.
I wonder why this would happen and how could I solve this problem?
I tested my code in FierFox 32.0.3, RHEL6.2
According to CBroe:
www.w3.org/TR/html5/forms.html#enabling-and-disabling-form-controls:-the-disabled-attribute:
Constraint validation: If an element is disabled, it is barred from constraint validation.
http://www.w3.org/TR/html5/forms.html#barred-from-constraint-validation:
A submittable element is a candidate for constraint validation except when a condition has barred the element from constraint validation.
And finally, from the list of Constraint validation steps, http://www.w3.org/TR/html5/forms.html#constraint-validation:
3.1: If field is not a candidate for constraint validation, then move on to the next element.
That means, a disabled element will just be “passed over” when form validity is checked.
It doesn’t trigger any errors, and has no influence whatsoever on the validation state of the form it belongs to.
The comment is in this link.
https://stackoverflow.com/a/30533215
So i am having an issue trying to force a size on a date input. Has anyone else had this issue or know how to get around it?
<input style="width:50px;" type="date" value="">
It is pretty simple, the width only changes the textarea, the actual control does not change, it is fixed at about 125 px width or so.
I have also tried width="" and max-width in the css, neither work.
With chrome 45, I just set the font-size. It proportionately changed the text and the control handles. Not sure that was the effect you were looking for(?).
<input style="font-size: 3rem" type="date" id="Date">
An <input type=date> element is supposed to be implemented in a browser-dependent manner that is suitable for the environment where the browser is running. So it is supposed to be under the browser’s control, not an author’s. This is one reason why many people are skeptical about the idea.
Setting a width for the control is really a shot in the dark. On my Chrome (25beta on Win 7), your CSS code “works” in the sense of truncating the widget to the given width. It still works, but it looks very odd: in the widget, the letter “v” and part of some other letter is visible. They are really the notation “vvvv-kk-pp” (localized notation for “yyyy-mm-dd”), which I can see in the widget in the absence of any width setting.
The conclusion is: by using <input type=date>, you accept whatever browser-dependent widgets browsers might use, and an attempt to control e.g. in its size may very well mess things up,
<input type="date" name="tanggal" style="width:231px">
Hope this works!
It doesn't change anything except the width.
Since most browsers aren't up to speed with html5 yet. I would just use the date picker with jquery.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" /></p>
</body>
</html>
I've used it plenty and it works a treat. Makes more sense to present the calendar on click as well imo.
Here's the link as well: http://jqueryui.com/datepicker/