HTML Noob here: I am trying to get two MDC radio buttons in a form to appear aligned on separate rows (one below another). I have tried putting break tags in various places but it doesn't seem to have any effect.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Shrine (MDC Web Example App)</title>
<link rel="shortcut icon" href="https://material.io/favicon.ico">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link rel="stylesheet" href="https://unpkg.com/material-components-web/dist/material-components-web.min.css">
</head>
<body>
<form action="home.html">
<div class="mdc-form-field">
<div class="mdc-radio">
<input class="mdc-radio__native-control" type="radio" id="radio-1" name="radios" checked>
<div class="mdc-radio__background">
<div class="mdc-radio__outer-circle"></div>
<div class="mdc-radio__inner-circle"></div>
</div>
</div><br>
<label for="radio-1">Radio 1</label>
</div>
<div class="mdc-form-field">
<div class="mdc-radio">
<input class="mdc-radio__native-control" type="radio" id="radio-2" name="radios" checked>
<div class="mdc-radio__background">
<div class="mdc-radio__outer-circle"></div>
<div class="mdc-radio__inner-circle"></div>
</div>
</div>
<label for="radio-2">Radio 2</label>
</div>
<br>
</form>
<script src="https://unpkg.com/material-components-web/dist/material-components-web.min.js"></script>
</body>
</html>
I can get standard radio buttons to appear on separate rows using break tags as follows:
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
How can I get these radio-1 and radio-2 to appear on separate rows?
I think you just entered the brake at the wrong spot, it should be between the two divs of the "mdc-form-fields":
<label for="radio-1">Radio 1</label>
</div>
<br>
<div class="mdc-form-field">
<div class="mdc-radio">
There are other solutions with a grid system, but this is the simple one
Related
I am trying to create a selection in which I have two radio buttons of same group and some text in between. Like single correct MCQ...
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Practice</title>
</head>
<body>
<input type="radio"> This_1 <br>
or <br>
<input type="radio"> This_2
</body>
</html>
Now what I want is that user can select only one of the radio button.
However, as soon as I add OR in between, the radio buttons divide into two groups. And instead I can select both of them,u know what I'm saying...
Please help is really appreciated.
Thank you so much!!
Do you mean like this?:
<p>Select an option:</p>
<div>
<input type="radio" id="1" name="options" value="1"
checked>
<label for="huey">1</label>
</div>
<p>TEXT 1</p>
<div>
<input type="radio" id="2" name="options" value="2">
<label for="dewey">2</label>
</div>
<p>TEXT 2</p>
<div>
<input type="radio" id="3" name="options" value="3">
<label for="louie">3</label>
</div>
How can I get bootstrap to equal align my radio form to have my question and three answers split into 4 columns like col-sm-3. I want it to wrap the text in each column when its too long. example form below.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Form control: inline radio buttons</h2>
<p>The form below contains three inline radio buttons:</p>
<form class="form-check-inline">
<label class="control-label">This is some question: </label>
<label class="form-check-label">
<input class="form-check-input" type="radio" name="optradio" checked>Option 1 which is really long and spans most of the page compared to the other options
</label>
<label class="form-check-label">
<input class="form-check-input" type="radio" name="optradio">Option 2 is a small option
</label>
<label class="form-check-label">
<input class="form-check-input" type="radio" name="optradio">Option 3 is another long option which i would prefer was wordwrapped and options divided equally over the width
</label>
</form>
</div>
</body>
</html>
I would like the check box to be split into columns and wrap the input text
Form control: inline radio buttons
The form below contains three inline radio buttons:
This is some question: | Option 1 which is really long | Option 2 is a small | option Option 3 is another long option which
| and spans most of the page compared | | i would prefer was wordwrapped and options
| to the other options | | divided equally over
the | char here i have added just to indicate columns, i dont expect them to actually be present in the output.
You're not using the container-row-column classes correctly -- <div class="container"><div class="row"><div class="col-xs-12">... Refer to Bootstrap 3.4.1 documentation for more information.
Additionally, the latest Bootstrap version is 4.6 with 5.0 in public beta, consider updating your Boostrap version.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<h2>Form control: inline radio buttons</h2>
<p>The form below contains three inline radio buttons:</p>
</div>
</div>
<form class="form-check-inline row">
<div class="col-xs-3">
<label class="control-label">This is some question:</label>
</div>
<div class="col-xs-3">
<label class="form-check-label"><input checked class="form-check-input" name="optradio" type="radio">Option 1 which is really long and spans most of the page compared to the other options</label>
</div>
<div class="col-xs-3">
<label class="form-check-label"><input class="form-check-input" name="optradio" type="radio">Option 2 is a small option</label>
</div>
<div class="col-xs-3">
<label class="form-check-label"><input class="form-check-input" name="optradio" type="radio">Option 3 is another long option which i would prefer was wordwrapped and options divided equally over the width</label>
</div>
</form>
</div>
</body>
</html>
I have no CSS files, only an index.html. I am following a youtube tutorial and I've confirmed multiple times that I am writing the code correctly. The video is a year old, so maybe, I'm doing something wrong syntactically. But otherwise, I cannot seem to find out why the radio buttons won't show up. I tried style="opacity: 100;" and that did nothing either.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
/>
<title>PusherPoll</title>
</head>
<body>
<div class="container">
<h1>OS Vote</h1>
<p>Vote for your favorite OS to develop on.</p>
<form id="vote-form">
<p>
<input type="radio" name="os" id="windows" value="Windows" />
<label for="windows">Windows</label>
</p>
<p>
<input type="radio" name="os" id="macos" value="MacOS" />
<label for="macos">MacOS</label>
</p>
<p>
<input type="radio" name="os" id="linux" value="Linux" />
<label for="linux">Linux Distro</label>
</p>
<p>
<input type="radio" name="os" id="other" value="Other" />
<label for="other">Something Else</label>
</p>
<input type="submit" value="Vote" class="btn" />
<br></br>
<div id="chartContainer" style="height: 300px; width:100%;"></div>
</form>
</div>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"
></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pusher/5.0.2/pusher.min.js" integrity="PRIVATE-NOSHARE=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js" integrity="sha256-CIc5A981wu9+q+hmFYYySmOvsA3IsoX+apaYlL0j6fg=" crossorigin="anonymous"></script>
<script src="main.js"></script>
</body>
</html>
As per the Materilize documentation, you should do it a bit different. Instead of this:
<p>
<input type="radio" name="os" id="windows" value="Windows" />
<label for="windows">Windows</label>
</p>
try this:
<p>
<label>
<input name="group1" type="radio" checked />
<span>Red</span>
</label>
</p>
Here is the documentation: Radio buttons
Hope it helps!
your prbolem is in link rel
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
/>
I would like to have a google form on my website and adapt the look of it. I found a description to do so here. The respective code is shown below and can also be seen here (with CSS and result).
I would like to have my own confirmation page (mywebsite.com/signup-confirmation). A comment describes it the way shown below way but I am not sure where exactly to do those changes.
To keep the form from redirecting to a new page. I added to the form,
target="no-target"
Then I created an iframe iframe src="#" id="no-target"
name="no-target" style="visibility:hidden">< /iframe
Now that the form doesnt redirect on submit u can change the location
of the url with javascript window.location.assign(
window.location.hostname;
^ that will redirect you to the homepage
Code from website example:
<header>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css-signup.css">
<div class="wrapper">
<!-- TITLE YOUR FORM -->
<h1>Health Survey</h1>
<h2>Diagnostic for applicants to our fitness program.</h2>
</div>
</header>
<section>
<div class="wrapper">
<!-- START CODING YOUR FORM -->
<form action="https://docs.google.com/a/ladieslearningcode.com/forms/d/e/1FAIpQLSddBVO983YSbAXB7yWkg9Z69CyrY8AAQvUjlhJWtm-7LvdOpQ/formResponse">
<!-- MUTLIPLE CHOICE -->
<p>How often do you exercise?</p>
<div class="input-wrap"><input type="radio" name="entry.1177013199" id="e1" value="1 day a week"/>
<label for="e1">1 day a week</label></div>
<div class="input-wrap"><input type="radio" name="entry.1177013199" id="e2" value="2-3 days a week"/>
<label for="e2">2-3 days a week</label></div>
<div class="input-wrap"><input type="radio" name="entry.1177013199" id="e3" value="4-5 days a week"/>
<label for="e3">4-5 days a week</label></div>
<div class="input-wrap"><input type="radio" name="entry.1177013199" id="e4" value="6+ days a week"/>
<label for="e4">6+ days a week</label></div>
<!-- CHECKBOXES -->
<p>Do you have any food allergies?</p>
<div class="input-wrap"><input type="checkbox" name="entry.359931602" id="a1" value="Milk"/>
<label for="a1">Milk</label></div>
<div class="input-wrap"><input type="checkbox" name="entry.359931602" id="a2" value="Eggs"/>
<label for="a2">Eggs</label></div>
<div class="input-wrap"><input type="checkbox" name="entry.359931602" id="a3" value="Peanuts">
<label for="a3">Peanuts</label></div>
<div class="input-wrap"><input type="checkbox" name="entry.359931602" id="a4" value="Wheat">
<label for="a4">Wheat</label></div>
<div class="input-wrap"><input type="checkbox" name="entry.359931602" id="a5" value="Soy">
<label for="a5">Soy</label></div>
<!-- DROPDOWN -->
<p>What is your favourite food group?</p>
<div class="input-wrap select-box">
<select name="entry.1781742467">
<option selected disabled>Choose</option>
<option value="Fruit">Fruit</option>
<option value="Vegetables">Vegetables</option>
<option value="Grain">Grain</option>
<option value="Meat">Meat</option>
<option value="Dairy">Dairy</option>
</select>
</div>
<!-- SINGLE LINE TEXT FIELD -->
<label for="comfort">What is your go-to comfort food?</label>
<input name="entry.1169089770" type="text" id="comfort"/>
<!-- MULTI-LINE TEXT FIELD -->
<label for="explain">Explain why you want to improve your physical health.</label>
<textarea name="entry.1175247585" id="explain"/></textarea>
<!-- LINEAR SCALE "SLIDER" -->
<label for="explain">Rate your current physical health.</label>
<input name="entry.1672382864" type="range" min="1" max="5" step="1">
<!-- DATE INPUT -->
<label for="explain">When are you available to start training?</label>
<input name="entry.246017384" type="date">
<!-- TIME INPUT -->
<label for="explain">What time of day is best to connect?</label>
<input name="entry.1990206646" type="time">
<!-- SUBMIT BUTTON -->
<input class="button" type="submit" value="Submit">
</form>
</div>
You need to add this piece of code in front of your form tag:
<script type="text/javascript">var submitted=false;</script>
<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted) {window.location='/thanks.html';}"></iframe>
And this in your form tags:
target="hidden_iframe" onsubmit="submitted=true;"
Everything together looks like this (example):
<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted) {window.location='/thanks.html';}"></iframe>
<form class="form" action="LINK" method="POST" target="hidden_iframe" onsubmit="submitted=true;">
<label>Insert label</label>
<input name="entry.xxx" type="text" required />
<input type="submit" value="Submit" />
</form>
**HTML**
<li class="option">
<input type="radio" name="Answer1" value="A">A</input><br>
<input type="radio" name="Answer1" value="B">B</input><br>
<input type="radio" name="Answer1" value="C">C</input><br>
<input type="radio" name="Answer1" value="D">D</input><br>
</li>
<li class="option">
<input type="radio" name="Answer2" value="A">A</input><br>
<input type="radio" name="Answer2" value="B">B</input><br>
<input type="radio" name="Answer2" value="C">C</input><br>
<input type="radio" name="Answer2" value="D">D</input><br>
</li>
<li class="option">
<input type="radio" name="Answer3" value="A">A</input><br>
<input type="radio" name="Answer3" value="B">B</input><br>
<input type="radio" name="Answer3" value="C">C</input><br>
<input type="radio" name="Answer3" value="D">D</input><br>
I am creating an online survey. At the end of the survey there is a submit button which will get an alert of either "Please answer all questions" or "Submitted". Which alert is used is dependant on whether the user has answered all the questions or not. Im not sure how to create this loop. Please help.
Here, take a look at this demo boootply. Since you're using Bootstrap, jQuery should already be part of your page. Here's the relevent code:
$(document).ready(function(){
$('#submitBtn').click(function(e){
e.preventDefault();
if($('li.option :radio:checked').length == $('li.option').length){
// enter code here to submit your form
alert('submitted');
}else{
alert('Please answer all questions');
}
});
});
And the HTML corrected to:
<ul class="list-unstyled">
<li class="option">
<label>
<input type="radio" name="Answer1" value="A">A
</label>
<br>
<label>
<input type="radio" name="Answer1" value="B">B
</label>
etc..
And just in case, here's the link markup for the bootstrap/jQuery files:
<!-- Latest compiled and minified jQuery-->
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>