Is it possible that when I check a checkbox it redirects me directly to a textbox ?
Like if I did a TAB when I check it.
And if possible only with HTML and CSS
You can't do it with just HTML & CSS
but here is a solution using javascript:
window.onload = function() {
var checkbox = document.getElementById("agree"),
textbox = document.getElementById("textbox");
checkbox.onclick = function() {
if(this.checked) {
textbox.focus();
}
};
};
demo
Maybe the minimal implementation would be:
<form name="f1">
<input id="in1" name="in1" type="checkbox" onClick="if(this.checked) document.f1.in2.focus()" /> Check option <br/>
<input id="in2" name="in2" type="text" />
</form>
Fiddle demo
The simpliest way is to use TabIndex attribut in the input element
<input type="checkbox" Tabindex="1"> </input>
<br>
<br>
<input type="text" Tabindex="2"> </input>
I hope this might help you
Related
I'd like to add HTML to a Google Site that allows a user to press a button that displays a random letter of the alphabet. However, it should randomize only the letters that the user selects through checkboxes. Below is an image of what I'd like to achieve, and I'd like the result to display to the right of the checkbox array.
As to what I have tried so far, I have the following code that I modified from an open source online. I hope it is ok for my purpose.
<!DOCTYPE html>
<html>
<body>
<h1>Pick Letters To Randomize</h1>
<form action="/action_page.php">
<input type="checkbox" id="letter1" name="letter1" >
<label for="letter1"> A</label><br>
<input type="checkbox" id="letter2" name="letter2" >
<label for="letter2"> B</label><br>
<input type="checkbox" id="letter3" name="letter3" >
<label for="letter3"> C</label><br><br>
<input type="submit" value="Randomize">
</form>
</body>
</html>
But I am really at a loss for how to solve the rest of my problem.
Here is a working example for you. I have a few suggestions that I've implemented that will make this easier for you:
Add a value to the checkbox input. That way, you don't have to grab a child/sibling label.
I've added comments to show what I'm doing. Hope that helps!
document.addEventListener("DOMContentLoaded", function() {
const form = document.getElementById("randomLetterForm");
const submitBtn = document.getElementById("randomSubmit");
const textResult = document.getElementById("result");
// We check the values on the submit click
submitBtn.addEventListener("click", function(e) {
// Prevent it from *actually* submitting (e.g. refresh)
e.preventDefault();
// Grab *all* selected checkboxed into an array
const items = document.querySelectorAll("#randomLetterForm input:checked");
// Checking if it's not empty
if (items.length > 0) {
// Setting a random index from items[0] to items[items.length]
textResult.innerHTML = items[Math.floor(Math.random() * items.length)].value;
} else {
// If not, we alert
alert("Please choose at least 1 number");
}
});
});
<h1>Pick Letters To Randomize</h1>
<form id="randomLetterForm" action="/action_page.php">
<input type="checkbox" value="A" id="letter1" name="letter1" >
<label for="letter1"> A</label><br>
<input type="checkbox" value="B" id="letter2" name="letter2" >
<label for="letter2"> B</label><br>
<input type="checkbox" value= "C" id="letter3" name="letter3" >
<label for="letter3"> C</label><br><br>
<input id="randomSubmit" type="submit" value="Randomize">
</form>
<div>
<p id="result"></p>
</div>
I have a input <input type="text" value="1" readonly id='aaa'/>.
I would like to give it a function when user check the box then can edit the value of id=aaa.
Sample:
<input type="text" value="1" readonly/> <input type="checkbox" /> Checked this if you want to edit the value.
Thank you.
Add an onchange event to the checkbox that changes to readOnly attribute of its previous sibling (the textfield)
<input type="text" value="1" readonly id="aaa" />
<input type="checkbox" onchange="getElementById('aaa').readOnly = !this.checked" />
Checked this if you want to edit the value.
You want to use JavaScript to change the readOnly property. Set it to the opposite of whether the checkbox is checked.
document.getElementById('checksome').addEventListener('click', function() {
var changeThis = document.getElementById('readsome');
changeThis.readOnly = !this.checked;
});
<input id="readsome" type="text" value="1" readonly>
<label><input id="checksome" type="checkbox"> Click this to edit</label>
I can't make a and an tag combine on HTML.
I'm trying to have text that when you click on it both click a checkbox and also lead you somewhere on the page i've tried to make it like that:
<a href"#somewhere"><label for"somecheckbox">Some Text</label></a>
But only the label worked, then I tried it like that:
<label for"somecheckbox"><a href"#somewhere">Some Text</a></label>
But then only the link works, is there any way in which we can use both?
The problem is you are trying to nest interactive content. This is something you can't do via the W3C spec. See the a tag, for instance with it's permitted content.
You will need to use javascript to achieve what you want to do.
Here is a quick example:
var links = document.querySelectorAll("[data-for]");
//Set Event Handler
for(var i = 0; i < links.length; i++) {
links[i].addEventListener("click", function(event){
//Get the target cb from the data attribute
var cbTarget = this.dataset.for;
//Check the cb
document.getElementById(cbTarget).checked = true;
});
}
.head {margin-bottom: 100vh;}
<div class="head">
Click Me <input type="checkbox" id="aCheckBox" />
</div>
<div id="aTarget">A Target</div>
It's not possible to do both navigation and toggle checkbox using tags, please use javascript to focus on target when checkbox is checked.
document.getElementById("somecheckbox").addEventListener("change", function(e){
// see if it is checked
if(e.target.checked){
// and focus to specific id
document.getElementById("somewhere").focus();
}
})
When you click on the label, both the check box is checked and it goes to a location.
const label = document.querySelector('[for=checkbox]');
const checkBox = document.querySelector('[name=checkbox]');
label.addEventListener('click', function (){
checkBox.setAttribute("checked", "true");
location.href = "#location";
});
#location {
position: absolute;
bottom: -100px;
}
<label for="checkbox">
<input type="checkbox" name="checkbox"/>
Check
</label>
<p id="location"> Some location </p>
<!DOCTYPE html>
<html>
<body>
<script>
function Redirect(){
if (document.getElementById('vehicle3').checked)
{
window.location = "https://www.tutorialspoint.com";
}
}
</script>
<h1>Show checkboxes:</h1>
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a car<br>
<input type="checkbox" name="vehicle3" id='vehicle3' value="Boat" onClick='Redirect();'> I have a boat<br><br>
<input type="submit" value="Submit">
</body>
</html>
This solution is what everyone suggesting using JavaScript your problem can be solved easily. As soon as you click on the 3rd checkbox it redirects you to a new webpage
For example, I have a text input with a value of "insert text here" like this:
<input type="text" value="insert text here" />
When I click on the block of the input, then the text of "insert text here" will automatically disappear, but when the user cancel to write something there, the text will appear again.
How to do this?
Thanks
USE placeholder attribute
<input name="" type="text" placeholder="place holder text here."/>
but it may not work in older browser. if you are for older browser as well than you should use javascrip/jquery for dealing with this problem.
<input type="text" class="userName" value="Type User Name..." />
$(document).ready(function(){
$('.userName').on('focus',function(){
var placeHolder = $(this).val();
if(placeHolder == "Type User Name..."){
$(this).val("");
}
});
$('.userName').on('blur',function(){
var placeHolder = $(this).val();
if(placeHolder == ""){
$(this).val("Type User Name...");
}
});
});
see deme JSFIDDLE
Use this placeholder attribute
<input type="text" placeholder="insert text here" />
<input type="text" name="fname" placeholder="insert text here">
You need to use the "placeholder" attribute like so:
<input type="text" placeholder="insert text here" />
The placeholder text will be automatically deleted when typing something in the field
http://www.w3schools.com/tags/att_input_placeholder.asp
use a placeholder instead of value.
<input type="text" placeholder="insert text here" />
You can achieve this using Placehoder
but u need to be aware of Older versions of browsers, because it doesn't supports the place hoder
<input type="text" value="some text" placeholder="insert text here"/>
for older versions of browser u can use the below link and download the js
link
If you want compatible in all browsers then you can use this code.
<!DOCTYPE html>
<html>
<body>
First Name: <input type="text" id="myText" placeholder="Name">
<p>Click the button to display the placeholder text of the text field.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("myText").placeholder;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
How can I prevent a user from selecting multiple checkboxes in HTML?
you should change it to radio button instead of check box!
<input type="radio" name="group1" id="item1" value="Milk">
<label for="item1">Milk</label>
<br/>
<input type="radio" name="group1" id="item2" value="Butter" checked>
<label for="item2">Butter</label>
<br/>
<input type="radio" name="group1" id="item3" value="Cheese">
<label for="item13">Cheese</label>
I had a use case where I needed use checkboxes--which, unlike radio buttons, allows a user to UNcheck... Here's an example of something I pieced together from another stackoverflow user:
<head>
<meta charset=utf-8 />
<title>and-or checkboxes</title>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
<label for="checkbox1"><input type="checkbox" id="checkbox1" name="checkbox1" value="and" </label><span id="span_and">checkbox1</span><br>
<label for="checkbox2"> <input type="checkbox" id="checkbox2" name="checkbox2" value="or" </label><span id="span_or">checkbox2</span>
<script>
$(document).ready(function(){
$('#checkbox1').click(function() {
var checkedBox = $(this).attr("checked");
if (checkedBox === true) {
$("#checkbox2").attr('checked', false);
} else {
$("#checkbox2").removeAttr('checked');
}
});
});
$(document).ready(function(){
$('#checkbox2').click(function() {
var checkedBox = $(this).attr("checked");
if (checkedBox === true) {
$("#checkbox1").attr('checked', false);
} else {
$("#checkbox1").removeAttr('checked');
}
});
});
</script>
</body>
With a little work, you can combine the either/or two scripts into a single script. You probably don't need this now but I wanted to post it because it was very useful to me.
If you want that only one checkbox get selected at a time then its better to use radiobutton instead.
If you mean that you don't want multiple checkboxes from a same "logical group" to be checked at one time, you should use radio buttons instead of checkboxes.
<form>
<input type="radio" name="aGroup" value="choice1" /> Choice #1<br />
<input type="radio" name="aGroup" value="choice2" /> Choice #2
</form>
By using this, only 1 option can be checked at one time
Use Radio, and they must have the same name="".