I'm looking for insight on how to pass custom jsx into the label of the Checkbox component.
<Checkbox
label="I accept the Terms of Use & Privacy Policy"
/>
Ideally what would render as the label is "I accept the [Terms of Use] & [Privacy Policy]" where the items inside the brackets are links.
Thanks in advance for any help!
You can pass in other jsx nodes into the label property. In this example I am using the React Router link but you could of course use an anchor element.
<Checkbox
label={
<div>
<span>I accept the </span>
<Link to={'/terms'}>terms of use</Link>
<span> and </span>
<Link to={'/privacy'}>privacy policy</Link>
</div>
}
/>
You can use html in the label property. But you'll have a problem : the component is "covered" by a transparent input which will handle every click. So links or onClicks won't work. Before the library developers resolve the problem, you can use :
<Checkbox id={uniqueId}
labelStyle={{ zIndex: 3 }}
label={(
<label htmlFor={uniqueId}>
blah blah
<span onClick={this.myAction}>yeah</span>
<a>...</a>
</label>
)}/>
Details here => https://github.com/callemall/material-ui/issues/5364
<html>
<head>
</head>
<body>
<form method="post" action="demo_form.php">
I accept the Terms of Use & Privacy Policy
<input type="Checkbox" name="terms">
</form>
</body>
</html>
demo_form.php
<?php
echo 'Hello ' . htmlspecialchars($_POST["terms"]) . '!';
?>
Related
I have an input with a prepend from Bootstrap, looks nice and modifiable. I know I can put another button on the other side, but can that button be a reset? I have tried multiple things. Here is what I know and I will attach pictures below.
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Your calculation</span>
</div>
<input type="number" onkeypress="return isNumberKey(event)" onkeyup="return truncateDecimals(this, 2)" id="userInputMapOne" class="form-control" min="0" max="1000" step="0.01" aria-label="input value for your zone" value="e.g 12.34">
This is the current code I am using, it is NOT wrapped in a form. When I wrap it in a form things stop working for a strange reason. I am already having troubles with this, the min/max and step don't work (I have controlled min/max and step with JavaScript). So, is there a way to prepend (or append at the same time as a prepend) a second button onto that input and without being in a form and use that to clear the input field back to the default of ""?
It seemed like an easy job but this constantly interfered with the data being input. And for a weird reason, I can't seem to put a form just wrapping this input without upsetting the divs.
Note: While this would certainly work I think it would be in your bests
interests to review why a <form> is interfering with the
functionality of your code.
You cannot add a true <button type="reset">...</button> because you are not using a <form> and so the reset button doesn't know what to actually 'do'. You can quickly do something similar with just a few modifications of your existing code:
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Your calculation</span>
</div>
<input type="number" id="calculation" onkeypress="return isNumberKey(event)" onkeyup="return truncateDecimals(this, 2)" id="userInputMapOne" class="form-control" min="0" max="1000" step="0.01" aria-label="input value for your zone" value="e.g 12.34">
<div class="input-group-append">
<button role="button" class="btn btn-secondary" onclick="document.getElementById('calculation').value = ''">Reset</button>
</div>
</div>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
First you need to add an ID to your input field so that you can easily target the field with a bit of JavaScript. Then you just need to add an .input-group-append to extend the input-group to include the new button we'll be adding.
The button operates just like any button would, with the exception that there is an onclick event:
document.getElementById('calculation').value = ''
This finds the field with an ID value of calculation and on a click event resets the value of that field to empty. It's not a reset in the true sense of how <button type="reset">...</button> would operate, but functionally it achieves the same result.
Working with bootstrap I use next code when I need to change layout of label/input
depending on device :
<fieldset class="bordered text-muted p-0 m-0 mb-4">
<legend class="bordered">Filters</legend>
<dl class="block_2columns_md m-0 p-2">
<dt class="key_values_rows_label_13">
<label class="col-form-label" for="filter_title">
By title
</label>
</dt>
<dd class="key_values_rows_value_13">
<input style="flex: 1 0" name="filter_title" id="filter_title" class="form-control" type="text" value="" v-model="filter_title">
</dd>
</dl>
and changing in block_2columns_md flex-direction depending on device
I put on small devices label input on different rows.
Now I work with bootstrap-vue and wonder whicj elements bootstrap-vue have for such blocks,
as I suppose using of bootstrap-vue is prefered if I use bootstrap-vue ...
"bootstrap-vue": "^2.3.0",
Thanks!
Sounds like what you want is the Form Group component. More specifically the Horizontal Layout portion of it.
The component has label-cols-{breakpoint} props to define how much space the label should use at a given breakpoint. It uses the same 12 grid system as normal bootstrap uses.
So if you want the label to use the entire row (be above the input) at a certain breakpoint, add label-cols-{breakpoint}="12" to the form-group.
The snippet has the label above on small mobile devices, and on sm and above it's beside the input.
new Vue({
el: '#app'
})
<link href="https://unpkg.com/bootstrap#4.4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-vue#2.4.1/dist/bootstrap-vue.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.4.1/dist/bootstrap-vue.js"></script>
<div id="app">
<b-form-group label-cols="12" label-cols-sm="2" label="Default">
<b-input></b-input>
</b-form-group>
</div>
I Wanted to know if a <form> can contain many <fieldset> in it? Or is it better to use <div> instead? In my case, I want to design a sophisticated responsive designed <form> with many different kinds of <input>.' And if so, do theshould be in his own` alone?
Better like this :
<form action="#" method="POST">
<fieldset id="input1-wrapper">
<h3>Input 1</h3>
<input type="texte" name="input1" placeholder="input1">
</fieldset>
<fieldset id="input2-wrapper">
<h3>Input 2</h3>
<input type="texte" name="input2" placeholder="input2">
</fieldset>
</form>
Or like this :
<form action="#" method="POST">
<div id="input1-wrapper">
<h3>Input 1</h3>
<input type="texte" name="input1" placeholder="input1">
</div>
<div id="input2-wrapper">
<h3>Input 2</h3>
<input type="texte" name="input2" placeholder="input2">
</div>
</form>
Multiple Fieldsets in a form are allowed. Example: Data entry fields in one fieldset and action buttons ('submit,' 'cancel' etc.) in a separate fieldset.
Fieldset should always have a legend tag according to the standards.
Actually, Fieldsets are just another 'display' block level element. i.e. think of it as a 'fancy div'. It can be used anywhere a 'block level element' can. It has no 'special knowledge' of what is inside it. As the 'legend' is a separate element that it can be styled individually with CSS.
being pedantic ;-/
www.whatwg.org/specs/web-apps/current-work/multipage/forms
Extracted text: ' ..., one can use the fieldset element. The title of such a group of controls is given by the first element in the fieldset, which has to be a legend element.'.
It looks a lot nicer that a 'div' with headings, in my opinion. To the point that I use it outside of forms for grouping things. Try getting that text in the border with CSS.
<form action="#" method="POST">
<fieldset id="input1-wrapper">
<legend>Input 1</legend>
<input type="text" name="input1" placeholder="input1">
</fieldset>
<fieldset id="input2-wrapper">
<legend>Input 2</legend>
<input type="text" name="input2" placeholder="input2">
</fieldset>
</form>
I'm trying to learn bootstrap on my site but the form is just too narrow that I cannot change the width by changing the text field's cols.
see the page:
http://saslab.org/mycontact.php
and this page:
http://saslab.org/testme.html
could some one educate me on this?
thank you!
John
do it like this:
<div class="row">
<div class="span4">
<p>Name</p> <input type="text" name="name">
</div>
<div class="span4">
<p>Email</p> <input type="text" name="email">
</div>
<div class="span4">
<p>Phone</p> <input type="text" name="phone">
</div>
</div>
wrap the p tag and input with span
You have a line in your source: <div class="container marketing">. Upon further inspection, your 'marketing' class has the attribute text-align:center. This means all of your form will be centered because the div that contains it has that class. This is why your form is narrow.
Specifically, you have a file called mycontact.php and here's what you have for the CSS that applies:
.marketing .span12 {
text-align: center;
}
well, i guess it is Bootstrap's default css that causes the narrowing. in the following links, you can see the contrast
one without bootstrap:
http://saslab.org/testme.html
one with bootstrap:
http://saslab.org/testme_bootstrap.html
I have a problem while using
<form:form/>
at mine custom tag when it is placed at main form. Here is example
<form:form method="POST" id="form1_id" action="${url1}" modelAttribute="form1">
<div>
...
</div>
<comp:myComp link="${url2}"/>
<div>
....
</div>
<form:form>
And this is my tag at myComp.tag file
<div>
...
<div>
<jsp:doBody />
<form:form method="POST" id="form2_id" action="${link2}" modelAttribute="uploadForm">
...
<form:button id="myButton"> </form:button>
...
</form:form>
The problem is when I push on myButton there is no any affect! When I looked on HTML I noticed there is no tag for my form2_id form! That's mean when we use nested forms it is not valid. I agree. This is correct. But look carefully at mine example - I've intentionally used
<jsp:doBody />
tag for placing second form out of the my main form! So what is wrong here?