I'm quite new to the HTML. I have to make a simple booking form. I'm getting stuck at the 'radio checking' label. After the "optgroup label" I need the radio option on a new line with a simple yes or no option after a text. Whatever I try it won't work and the yes or no option are right after the optgroup options.
<label for="Aantal personen">Aantal personen</label>
<input id="Aantal personen" name="Aantal personen" type="number" min="1" max="10"><br>
<label for="Aankomstdatum">Aankomstdatum</label>
<input id="Aankomstdatum" name="Aankomstdatum" type="date"><br>
<label for="Verblijfsduur">Verblijfsduur</label>
<input type="range" name="weight" id="range_weight" step="2" min="2" max="20" oninput="range_weight_disp.value = range_weight.value">
<output id="range_weight_disp"></output><br>
<label for="Verzorging">Verzorging</label>
<select id="Verzorging" name="Verzorging">
<optgroup label="opties">
<option value="logies">Logies</option>
<option value="Logies met ontbijt">Logies met ontbijt</option>
<option value="Halfpension">Halfpension</option>
<option value="Volpension">Volpensension</option>
</optgroup>
<form id="radio">"Annuleringsverzekering"</label>
<label for="annuleringsverzekering">
<label for="opt1"><input id="opt1" type="radio" name="mw" value="ja" required>Ja</label>
<label for="opt2"><input id="opt2" type="radio" name="mw" value="nee" required>Nee</label>
</form>
I hope someone can explain what I'm doing wrong, thank you:)
Welcome to Stack Overflow, there are some problems with your code:
You're not closing the <select> tag.
You are closing the annuleringsverzekering label before you even open it.
Here's how you can fix it. Make sure that you also assign the label for annuleringsverzekering to an id.
<label for="Aantal personen">Aantal personen</label>
<input id="Aantal personen" name="Aantal personen" type="number" min="1" max="10"><br>
<label for="Aankomstdatum">Aankomstdatum</label>
<input id="Aankomstdatum" name="Aankomstdatum" type="date"><br>
<label for="Verblijfsduur">Verblijfsduur</label>
<input type="range" name="weight" id="range_weight" step="2" min="2" max="20" oninput="range_weight_disp.value = range_weight.value">
<output id="range_weight_disp"></output><br>
<label for="Verzorging">Verzorging</label>
<select id="Verzorging" name="Verzorging">
<optgroup label="opties">
<option value="logies">Logies</option>
<option value="Logies met ontbijt">Logies met ontbijt</option>
<option value="Halfpension">Halfpension</option>
<option value="Volpension">Volpensension</option>
</optgroup>
</select>
<form id="radio"><label for="annuleringsverzekering">Annuleringsverzekering</label>
<label for="opt1"><input id="opt1" type="radio" name="mw" value="ja" required>Ja</label>
<label for="opt2"><input id="opt2" type="radio" name="mw" value="nee" required>Nee</label>
</form>
you can add this CSS code to your form tag with radio Id:
display: block;
you can use this code to every element to have full line for it
Related
I want to filter checkboxes on selecting an option in select(something like filtering dependent checkboxes)
<select>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">D</option>
<option value="D">C</option>
<select>
<label for="1">1</label>
<input type="checkbox" value="1" for="1">
<label for="2">2</label>
<input type="checkbox" value="2" for="2">
<label for="3">3</label>
<input type="checkbox" value="3" for="3">
<label for="4">4</label>
<input type="checkbox" value="4" for="4">
<label for="5">5<label>
<input type="checkbox" value="5" for="5">
Now say if the option with value A is selected then i want to show the checkboxes 3,4,5
How can i achieve that?
For jquery, you can make use of .change() event handler to do so.
I give an example for your reference.
$( document ).ready(function() {
$("#dropDown").change(function(){
switch(this.value){
case "A":
$("#1").show();
break;
}
});
});
span{
display:none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="dropDown">
<option value="">Please select</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">D</option>
<option value="D">C</option>
<select>
<span id="1">
<label for="1">1</label>
<input type="checkbox" value="1" for="1">
</span>
<label for="2">2</label>
<input type="checkbox" value="2" for="2">
<label for="3">3</label>
<input type="checkbox" value="3" for="3">
<label for="4">4</label>
<input type="checkbox" value="4" for="4">
<label for="5">5<label>
<input type="checkbox" value="5" for="5">
<form action="check_rooms1.php" method="post" name="search_room" class="form" >
<p>
<label for="checkin">Check in date</label>
<input name="checkin" type="text" id="checkin" placeholder="click to enter" readonly required>
</p>
<p>
<label for="checkout">Check out date</label>
<input name="checkout" type="text" id="checkout" placeholder="click to enter" readonly required>
</p>
<p>
<label for="beds">Hotel type</label>
<label for="hotel_type"></label>
<select name="hotel_type" id="hotel_type">
<option value="1" selected>1 star</option>
<option value="2">2 star</option>
<option value="3">3 star</option>
<option value="4">4 star</option>
<option value="5">5 star</option>
</select>
<input type="submit" name="search_button" id="search_button" value="Search">
</p>
</form>
required validation is not working. I am entering the dates using a jquery calendar. that is why I disabled text edit by giving read only. Is there any problem with readonly?
Thanks for the concern.The problem is solved by using the input type date . It gives a calendar to pick date and cannot misformat the date also
I have a form that is divided into two sections both sitting next to each other. I am not sure how to go about this as I have read that some people use tables and others use lists? I am new to html and CSS but I would just put the two sections in divs and float one to the left. I read however that this is not a good method as divs are supposed to define two different things?
I have read a lot of questions and blogs about this but it's making me slightly more confused.I am just wanting to know the best way to go about this for this particular form.
Here is the code:
http://jsfiddle.net/EdZ32/
<div class="bookingForm">
<form action="">
<label for="flightType">
Please select your flight<br>
<select name="type" id="flightType">
<option value="Fixed Wing">Fixed Wing</option>
<option value="Helicopter">Helicopter</option>
<option value="Glider Flights">Glider Flights</option>
</select> <br>
</label>
<label for="numberPassengers">
Number of Passengers<br>
<select name="type">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select><br>
</label>
<label for="startDate">
Start date <input type="date" name="startDate"><br>
</label>
<label for="departureTime">
Departure itme <input type="date" name="departureTime"><br>
</label>
<!--SECTION TWO -->
<label for="name">
Full Name* <input type="text" name="name"><br>
</label>
<label for="email">
Email* <input type="text" name="email"><br>
</label>
<label for="phoneNumber">
Phone Number* <input type="number" name="phoneNumber"><br>
</label>
<label for="postalAddress">
Postal Address <input type="text" name="postalAddress"><br>
</label>
<label for="city">
City <input type="text" name="city"><br>
</label>
<label for="additionalInfo">
Additional Information<br>
<textarea rows="10" cols="30" name="comment" form="usrform">
Enter text here...</textarea>
</label>
</form>
I would just use two different divs for this:
HTML
<div class="left">
<!-- Second Section Here-->
</div>
CSS
.bookingForm {width:600px;} /* Choose your custom width or no width at all */
.bookingForm .left {float:left;width:49%;}
.bookingForm .right {float:right;width:49%;}
Also, your Labels should not wrap all the imput elements but just the text like this:
<label for="additionalInfo">
Additional Information
</label>
I have updated your code on JSfiddle here:
http://jsfiddle.net/EdZ32/4/
i have edited your code and i hope this helps you
you must specify 2 division for each set of inputs you have. then put CSS to float them right to each other
<div id="sec1"></div>
<div id="sec2"></div>
Above was added to your code and a CSS for float.
JSFIDDLE
I have a <select> dropdown in my HTML form. How do I add required attribute to my <select> element? I would like a pure HTML5 solution. I googled but I dont seem to find it.
Here is my fiddle.
The first <option> needs to be empty. Otherwise, required will see it as a value filled.
Example
<select required>
<option></option>
<option>1</option>
<option>2</option>
</select>
First of all you must insert empty field in movie list.and add required
HTML
<form id="book_tickets">
<fieldset>
<legend>Booking Details</legend>
<p>
<label for="movie_name">Choose Movie</label>
<select id="movie_name" name="movie_name" required>
<option></option>
<option value="Movie 1">Movie 1</option>
<option value="Movie 2">Movie 2</option>
<option value="Movie 3">Movie 3</option>
</select>
</p>
<p>
<label for="theaters">Theaters</label>
<input list="theaters" name="theaters" required>
<datalist id="theaters">
<option value="Inox" />
<option value="E Square" />
</datalist>
</input>
</p>
<p>
<label for="date">Select Date</label>
<input type="date" name="date" id="date" required />
</p>
<p>
<label for="email">Enter Email</label>
<input type="email" name="email" id="email" placeholder="abc#gmail.com" required />
</p>
<p>
<label for="tickets_quantity">Number of Tickets</label>
<input type="number" min="1" max="10" name="tickets_quantity" id="tickets_quantity" required />
</p>
<p>
<label>Total Price</label>
<span id="total_price"></span>
</p>
<p>
<input type="submit" id="book_tickets" value="Book Tickets" />
</p>
</fieldset>
</form>
The required attribute on select element: video demo
select element HTML5 here
referring to the first option, check out the placeholder label option demo
This is one thing that I really hate within development is forms. Below is my code and what I am trying to do is align the inputs with the labels Name: input. Is there a rule that you use to help remember when coding forms?
CSS:
#newwebsiteForm form{
padding:10px;
margin:10px 0;
width:480px;
position: relative;
}
#newwebsiteForm label{
width:240px;
display:block;
float:right;
}
#newwebsiteForm input{
width:240px;
display:block;
float:left;
}
HTML:
<section id="content">
<h1>Free Quote</h1>
<p>Please fill out the below questionnaire to receive your free web development quote</p>
<form action="" method="post" accept-charset="utf-8">
<select name="requiredOption" id="requiredOption">
<option id="pleaseselect" value="pleaseselect">Please Select Your Required Quote</option>
<option id="newwebsite" value="newwebsite">New Website</option>
<option id="websiteredevelopment" value="websiteredevelopment">Website Redevelopment</option>
<option id="other" value="other">Other</option>
</select>
</form>
<div id="newwebsiteSection">
<form action="" id="newwebsiteForm" method="get" accept-charset="utf-8">
<fieldset>
<label>Do You Require Hosting?</label><input type="radio" name="Yes" value="Yes">Yes</input><input type="radio" name="No" value="No">No</input>
<label>Do You Require A Domain?</label><input type="radio" name="Yes" value="Yes">Yes</input><input type="radio" name="No" value="No">No</input>
<label>Do You Have A Logo?</label><input type="radio" name="Yes" value="Yes">Yes</input><input type="radio" name="No" value="No">No</input>
<label>What is your Domain?</label>
<input type="url" name="domain" value="http://example.com"></input></div>
<label>Type of site Required?<label>
<select name="newwebsiteType" id="newwebsiteType">
<option value="shoppingCart">Shopping Cart</option>
<option value="CMS">Content Management System</option>
<option value="static">Static Website</option>
<option value="otherDevelopment">Other Development</option>
</select>
<label>Do You Require A Design?</label>
<input type="radio" name="Yes" value="Yes">Yes</input><input type="radio" name="No" value="No">No</input>
<label>Three Favorite colors?</label>
<input name="color1" value=""></input>
<input name="color2" value=""></input>
<input name="color3" value=""></input>
<label>What are your favorite websites?</label>
<input type="text" name="fav1" value=""></input>
<input type="text" name="fav2" value=""></input>
<input type="text" name="fav3" value=""></input>
<label>Comments?</label>
<textarea name="comments" id="comments"></textarea>
<input type="submit" name="submit" value="Send Quote Request">
</form>
</div>
<div id="websiteredevelopmentSection">
<p>Website Redevelopment</p>
</div>
<div id="otherSection">
<p>Other</p>
</div>
</section>
Just because tables are the easier option doesn't make using them right.
Here's a great article about css form design.
http://www.alistapart.com/articles/prettyaccessibleforms
The author suggests storing each label/input element in an ordered list element keeping them grouped.
I've just used this to implement a bunch of forms for various mini sites and it worked a treat!
You can align the label next to the input or above just by changing the ol li label element's display property from display:inline-block to display:block respectively.
Getting the text to align next to a radio button or checkbox can be a bit tricky but is possible by adding and styling a span element.
BEST OF ALL IT'S CROSS BROWSER COMPATIBLE!
Hope that helps.
This is probably related to the question: <div> usage correctly? Can't get the columns to line up: You can also check my comments there for some reference when dealing with semantically-correct forms.
The approach you will need to be in habit of is always structure your markup correctly first before jumping to any CSS (or styling).
A <form> is composed of the following:
The <form> itself.
The <fieldset>: acts a the container of the different sections of your <form>
The <legend>: acts as the heading of the <fieldset>
The <input />: for fields, checkboxes, radio buttons, and submit button
The <button>: an alternative for <input type="submit">, which can wrap something
inside of it.
The <select>: a list of values inside a drop-down menu.
The <label>: from the name itself, the label of the <input />, <button> and <select>
To illustrate, you can check this example:
<form>
<fieldset>
<legend>Form Heading: </legend>
<fieldset>
<legend>Group 1 Heading: </legend>
<label for="input-id">Input Label: </label>
<input id="input-id" />
</fieldset>
<fieldset>
<legend>Group 2 Heading: </legend>
<label for="select-id">Select Label: </label>
<select id="select-id">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</fieldset>
<input type="submit" value="Submit" />
</fieldset>
</form>
With the exception of radio (<input type="radio" />) and checkboxes (<input type="checkbox" />), where the <label> should come after the <input />
You have to use the label element as follows to correctly align them:
<FORM action="http://somesite.com/prog/adduser" method="post">
<P>
<LABEL for="firstname">First name: </LABEL>
<INPUT type="text" id="firstname"><BR>
<LABEL for="lastname">Last name: </LABEL>
<INPUT type="text" id="lastname"><BR>
<LABEL for="email">email: </LABEL>
<INPUT type="text" id="email"><BR>
<INPUT type="radio" name="sex" value="Male"> Male<BR>
<INPUT type="radio" name="sex" value="Female"> Female<BR>
<INPUT type="submit" value="Send"> <INPUT type="reset">
</P>
I wrap each input/label pair in a <div>. This helps a lot with styling.
<div class="form-item">
<label for="first_name">First Name</label>
<input type="text" name="first_name" id="first_name" />
</div>