I got a problem with checkbox and label. When I re-size screen the label split line, and checkbox should split follow label also.currently, when label stay in new line, but checkbox not stay in the same place of label. What I need is pair new line when responsive.
Anyone have any idea? Thanks in advance for your helping!
Below is my code
<div id="score">
<input type="radio" id="score_0" name="score" required="required" value="1">
<label for="score_0" class="required">E</label>
<input type="radio" id="score_1" name="score" required="required" value="2">
<label for="score_1" class="required">D</label>
<input type="radio" id="score_2" name="score" required="required" value="3">
<label for="score_2" class="required">C</label>
<input type="radio" id="score_3" name="score" required="required" value="4">
<label for="score_3" class="required">B</label>
<input type="radio" id="score_4" name="score" required="required" value="5">
<label for="score_4" class="required">B+</label>
<input type="radio" id="score_5" name="score" required="required" value="6">
<label for="score_5" class="required">A</label>
<input type="radio" id="score_6" name="score" required="required" value="7">
<label for="score_6" class="required">S</label>
</div>
You can actually nest your inputs into the label tag, then set a style for the label
.scores label {
white-space: nowrap;
}
<div class="scores">
<label for="score_1" class="required">
<input type="radio" id="score_1" name="score" required="required" value="2">D</label>
<label for="score_2" class="required">
<input type="radio" id="score_2" name="score" required="required" value="3">C</label>
<label for="score_3" class="required">
<input type="radio" id="score_3" name="score" required="required" value="4">B</label>
<label for="score_4" class="required">
<input type="radio" id="score_4" name="score" required="required" value="5">B+</label>
<label for="score_5" class="required">
<input type="radio" id="score_5" name="score" required="required" value="6">A</label>
<label for="score_6" class="required">
<input type="radio" id="score_6" name="score" required="required" value="7">S</label>
</div>
Demo - Easier to resize here
Related
The form should not be able to submit the form unless it is filled out. And an error message should pop up.
My problem is that I can't find out how to do this with HTML, because I am not allowed to use JavaScript in this task.
My code:
<form action="https://folk.ntnu.no/anderobs/webtek/receive_form.php" method="post">
<label for="name">Real Name: </label>
<input type="text" id="name" name="name" value=""> <br>
<label for="gender">Your gender: </label>
<input type="radio" id="gender" name="gender" value="Male">
<label for="gender">Male</label>
<input type="radio" id="gender" name="gender" value="Female">
<label for="gender">Female</label> <br>
<label for="email">E-Mail: </label>
<input type="email" id="email" name="email" value=""> <br>
<label for="birthdate">Birthdate: </label>
<input type="date" id="birthdate" name="birthdate" value=""> <br>
<label for="hero">Hero name: </label>
<input type="text" id="hero" name="hero" value=""> <br>
<label for="spandex">Do you wear spandex? </label>
<input type="radio" id="spandex" name="spandex" value="">
<label for="spandex">True</label>
<input type="radio" id="spandex" name="spandex" value="">
<label for="spandex">False</label> <br>
<label for="strengt">Strengt (between 1 and 10): </label>
<input type="number" id="strengt" name="strengt" min="1" max="10"> <br>
<label for="speed">Speed (between 1 and 10): </label>
<input type="number" id="speed" name="speed" min="1" max="10"> <br>
<label for="intelligence">Intelligence (between 1 and 10): </label>
<input type="number" id="intelligence" name="intelligence" min="1" max="10"> <br>
<label for="income">Income: </label>
<input type="number" id="income" name="income" min="0"> <br>
<label for="wealth">Wealth: </label>
<input type="number" id="wealth" name="wealth" min="0"> <br>
<br>
<input type="submit" value="Submit tax form">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Form practice</title>
</head>
<body><h1>Register</h1>
<form>
<label for="first name">First Name</label>
<input id="first name" type="text" name="first name" placeholder="John" required>
<label for="last name">Last Name</label>
<input id="last name" type="text" name="last name" placeholder="Smith" required>
<div>
<label for="male">Male</label>
<input id="male" type="radio" name="gender" value="male">
<label for="female">Female</label>
<input id="female" type="radio" name="gender" value="female">
<label for="other">Other</label>
<input id="other" type="radio" name="gender" value="other">
</div>
<div>
<label for="email">Email:</label>
<input type="email" name="email" id="email" required placeholder="your email">
<label for="password">Password:</label>
<input type="password" name="password" id="password" pattern=".{5,10}" title="5 to 8 characters" required>
</div>
<div>
<label>
Birthday:
<select name="month">
<option>Month</option>
<option>Jan</option>
<option>Feb</option>
<option>Mar</option>
</select>
<select month="day">
<option>Day</option>
<option>01</option>
<option>02</option>
<option>03</option>
</select>
<select month="year">
<option>Year</option>
<option>1990</option>
<option>1991</option>
<option>1992</option>
</select>
</label>
</div>
<div>
<label for="agreed">I agree to the terms and conditions</label>
<input id="agreed" type="checkbox" name="agreed">
</div>
<input type="submit" name="">
</form>
</body>
</html>
The pattern attribute in the input tag for the password is not working, neither is the title attribute.　Only the required attribute is working.
I have tried checking in Chrome and Safari.
Is it deprecated?
In what other way can I add a validation for minimum length (aside from using JS)?
I'm not sure what the problem is. I copy-pasted your code and it works fine on my end, unless I'm misinterpreting your question. Can you explain the issue you are having further? I tested it in both Chrome and Firefox:
and the title:
I am creating a survey form just for a project on FCC.
I tried putting the <input> tag inside <label>, also used <fieldset> but nothing worked.
<p id="purpose">
<label for="business"><input id="business" type="radio" name="purpose" value="business" checked> business</label>
<label for="leisure"><input type="radio" id="leisure" name="purpose" value="leisure">Leisure</label>
<label for="passingby"><input type="radio" id="passingby" name="purpose" value="passingby">Passing by</label>
<label for="others"><input type="radio" id="others" name="purpose" value="others">others</label>
</p>
<p class="improve">What do we need to improve?</p>
<label for="food"><input type="checkbox" id="food" name="food">Food</label>
<label for="rooms"><input type="checkbox" id="rooms" name="rooms">Rooms</label>
<label for="service"><input type="checkbox" id="service" name="service">Service</label>
<label for="none"><input type="checkbox" id="none" name="none">None</label>
Try out this
<form action="">
<input type="radio" name="purpose" value="business"> business<br>
<input type="radio" name="purpose" value="leisure"> leisure<br>
<input type="radio" name="purpose" value="passingby"> passingby<br>
<input type="radio" name="purpose" value="others"> others<br>
</form>
<p class="improve">What do we need to improve?</p>
<label for="food"><input type="checkbox" id="food" name="food">Food</label> <br>
<label for="rooms"><input type="checkbox" id="rooms" name="rooms">Rooms</label><br>
<label for="service"><input type="checkbox" id="service" name="service">Service</label><br>
<label for="none"><input type="checkbox" id="none" name="none">None</label><br>
Label should be sibling of input
<p id="purpose">
<input id="business" type="radio" name="purpose" value="business" checked><label for="business"> business</label>
<input type="radio" id="leisure" name="purpose" value="leisure"><label for="leisure">Leisure</label>
<input type="radio" id="passingby" name="purpose" value="passingby"><label for="passingby">Passing by</label>
<input type="radio" id="others" name="purpose" value="others"><label for="others">others</label>
</p>
<p class="improve">What do we need to improve?</p>
how can i do? the research "comment[]" is said to be used in this way. It gives an error when I do this
$comment= post("comment");
<input type="radio" value="1" name="comment">
<label for="comment"> Yes</label>
<input type="radio" value="2" name="comment">
<label for="comment"> No</label>
HTML
<form action="your_php.php" method="post">
<input type="radio" value="1" name="comment">
<label for="comment"> Yes</label>
<input type="radio" value="2" name="comment">
<label for="comment"> No</label>
<input type="submit" value="Submit" />
</form>
your_php.php
<?php
if(isset($_POST["comment"])) {
$comment = $_POST["comment"];
}
print_r($comment);
?>
I have the following form code in the nav bar:
<form id="form">
<p>
<label for="textarea"></label>
<textarea name="textarea" id="textarea" cols="100" rows="5">
Post here
</textarea>
<input id="button" type="submit" value="Submit!" name="submit" onclick = "get('textfield')"/>
</p>
<p>
<input type="radio" name="radio" id="radio-1" />
<label for="radio-1">Section 1</label>
<input type="radio" name="radio" id="radio-2" />
<label for="radio-2">Section 2</label>
<input type="radio" name="radio" id="radio-3" />
<label for="radio-3">Section 3</label>
<input type="radio" name="radio" id="radio-4" />
<label for="radio-4">Section 4</label>
<input type="radio" name="radio" id="radio-5" />
<label for="radio-5">Section 5</label>
<input type="radio" name="radio" id="radio-6" />
<label for="radio-6">Section 6</label>
</p>
</form>
And in the main body within the webpage,I have 6 sections. What I am trying to achieve is if I select one of the radio buttons, write something in the text area and click submit, it should appear within the selected section. So If write hello world and mark section 5, hello world should appear under section 5.
Is there any naive way of achieving this purely in HTML5? If there isn't, can anyone point to any tutorials/links or offer any suggestions?
Thanks in advance!
try to use this Example
<p>
<label for="textarea"></label>
<textarea name="textarea" id="textarea" cols="100" rows="5"></textarea>
<input id="button" type="submit" value="Submit!" name="submit"
</p>
<p>
<input type="radio" name="radio" id="radio-1" />
<label for="radio-1">Section 1</label>
<input type="radio" name="radio" id="radio-2" />
<label for="radio-2">Section 2</label>
<input type="radio" name="radio" id="radio-3" />
<label for="radio-3">Section 3</label>
<input type="radio" name="radio" id="radio-4" />
<label for="radio-4">Section 4</label>
<input type="radio" name="radio" id="radio-5" />
<label for="radio-5">Section 5</label>
<input type="radio" name="radio" id="radio-6" />
<label for="radio-6">Section 6</label>
</p>
<ul>
<li><section id="radio-1"></section></li>
<li><section id="radio-2"></section></li>
<li><section id="radio-3"></section></li>
<li><section id="radio-4"></section></li>
<li><section id="radio-5"></section></li>
<li><section id="radio-6"></section></li>
</ul
JS
$(function () {
$("#button").click(function(){
var txt = $("#textarea").val();
if(txt.length > 0)
{
var id = $("input[type='radio']:checked").attr("id");
$("li section").text("");
$("li #"+id).text(txt);
}
});
});
for solve this you better use simplejavascript code in your form that do this operation with id of radio buttons