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"
/>
Related
I have added no styling whatsoever and this is what I see.
My code contains only html and is as found below:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Document</title>
</head>
<body>
<input type="radio" name="q3" value="elon" />Elon Musk<br />
<input type="radio" name="q3" value="nikola" />Nikola Tesla<br />
<input type="radio" name="q3" value="bill" />Bill Gates<br />
<input type="radio" name="q3" value="jeffrey" />Jeffrey Archer<br />
</body>
</html>
Inline elements are sensitive to the whitespace in your code. Just remove it:
<input type="radio" name="q3" value="elon" />Elon Musk<br />
<input type="radio" name="q3" value="nikola" />Nikola Tesla<br />
<input type="radio" name="q3" value="bill" />Bill Gates<br />
<input type="radio" name="q3" value="jeffrey" />Jeffrey Archer<br />
I want to align my label element to the top left of my input element, so its right on the edge of the left side of the top of the input. How can I acheive this?
This is my HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="./css/main.css"></link>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#400;600&display=swap" rel="stylesheet">
<title>Document</title>
</head>
<body>
<div id="notification">
<btn id="close"> Close </btn>
</div>
<h3>Movie Reviews</h3>
<div id="error-div"></div>
<form class="create-movie-form" action="submit">
<label for="title">Movie Title:</label>
<input type="text" name="title" id="title" placeholder="Movie Title" />
<label for="runtime">Movie Runtime:</label>
<input type="text" name="runtime" id="runtime" placeholder="Runtime" />
<label for="rating">Movie Rating:</label>
<input type="text" name="rating" id="rating" placeholder="What's your rating for this movie?" />
<label for="review">Movie Review:</label>
<input type="text" name="review" id="review" placeholder="Write a review for this movie" />
<button type="submit" id="create-btn">Create movie</button>
</form>
<script src="../node_modules/axios/dist/axios.min.js"></script>
<script src="functions.js"></script>
<script src="main.js"></script>
</body>
</html>
Thank you!
This is what you need. display: block
Just use CSS property display: block to show labels on top of your element and on left side as you wanted.
Just run snippet to see it in action.
label {
display:block;
}
button {
display:block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#400;600&display=swap" rel="stylesheet">
<title>Document</title>
</head>
<body>
<div id="notification">
<btn id="close"> Close </btn>
</div>
<h3>Movie Reviews</h3>
<div id="error-div"></div>
<form class="create-movie-form" action="submit">
<label for="title">Movie Title:</label>
<input type="text" name="title" id="title" placeholder="Movie Title" />
<label for="runtime">Movie Runtime:</label>
<input type="text" name="runtime" id="runtime" placeholder="Runtime" />
<label for="rating">Movie Rating:</label>
<input type="text" name="rating" id="rating" placeholder="What's your rating for this movie?" />
<label for="review">Movie Review:</label>
<input type="text" name="review" id="review" placeholder="Write a review for this movie" />
<button type="submit" id="create-btn">Create movie</button>
</form>
</body>
</html>
Hope this help.
How can I include radio button or checkbox inside the table?
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<table>
<thead><th>radio button</thead>
<tbody><tr><td><input type="radio" value="r1"></td></tr></tbody>
</table>
</body>
</html>
As in F12 opacity:0 what means your radio is invisible:
As materialize doc you have to use radio as below with class="with-gap":
<p>
<label>
<input class="with-gap" name="yourName" type="radio"/>
<span>yout text</span>
</label>
</p>
See working code
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<table>
<thead>
<th>radio button</thead>
<tbody>
<tr>
<td>
<p>
<label>
<input class="with-gap" name="group3" type="radio" />
<span>Red</span>
</label>
</p>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Add the radio button as per the guidelines in materializecss. You can add the empty span if you don't need any label text.
<label>
<input type="radio" />
<span>label text</span>
</label>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<table>
<thead><th>radio button</thead>
<tbody><tr><td><label>
<input type="radio" />
<span></span>
</label></td></tr></tbody>
</table>
</body>
</html>
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
The text boxes get red borders when text is removed from them. However, the textarea does not follow this behavior. What is the problem and how do I remedy it?
http://jsfiddle.net/cKYNy/9/
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="ISO-8859-1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scaleable=no" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="page_1" data-theme="b">
<div data-role="content" data-theme="b" style="padding:0px;margin:0;">
<p>Content Page 1</p>
<form name="contactForm" id="contactForm" data-ajax="false" method="post">
<div>
<input type="text" id="name" name="name" value="" required="true"></input>
</div>
<div>
<input id="email" name="email" type="email" value="" required="true"></input>
</div>
<div>
<textarea name="message" id="message" required="true"></textarea>
</div>
<div>
<input type="submit" name="submit" id="submit" value="Submit"></input>
</div>
</form>
</div>
</div>
</body>
</html>
If it is not an option of JQuery Mobile you might wanna try the following:
$("#contactForm").submit(function (e) {
e.preventDefault();
if ($('#name')[0].checkValidity() === false) {
$('#name')[0].toggleClass("error");
}
}
Catch the submit event on the form, stop it from submitting and check the validation yourself. If not valid, add an error class.