<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
Related
I waned to use the checked attribute with a <select multiple></select> but the checked attribute didn't work.
I don't know what I did wrong
<body>
<form action="" method="get">
<fieldset>
<label for="skill">Skill</label>
<select name="skills" id="skill" multiple>
<option checked value="html">Html</option>
<option value="css">Css</option>
<option value="jss">Javascript</option>
</select>
<br>
<input type="submit">
<input type="reset">
</fieldset>
</form>
Thank you
<option checked> should be <option selected>, as this is an option, not a checkbox
Use below code in order to work
<form action="/">
<label for="skills">Skill</label>
<select name="skills" id="skills" multiple>
<option value="volvo">Html</option>
<option value="Css">Css</option>
<option value="Javascript">Javascript</option>
</select>
<br><br>
<input type="submit" value="Submit">
</form>
Hold down the Ctrl (windows) or Command (Mac) button to select multiple options.
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
I wish to show the input field when "Others" option is selected on dropdown, but can't figure out how to-
Here is my code
<div class="form-group">
<label for="college">College:</label>
<select class="form-control" id="college" ngModel name="college_name" required>
<option>Ajay Kumar Garg Engineering College</option>
<option>Others- Please Specify Below</option>
</select>
</div>
<div class="form-group" *ngIf="showfield">
<label for="name">Enter College Name:</label>
<input type="text" class="form-control" id="name" ngModel name="other_college_name" required>
</div>
showfield = false; is set in .ts file
In your component take a variable,
selectedValue: string = '';
Just assign selectedvalue to ngModel and use that value to display text field.
Also, options needs value attribute and it needs value to store in ngModel
<div class="form-group">
<label for="college">College:</label>
<select class="form-control" id="college" [(ngModel)]="selectedValue" name="college_name" required>
<option value="college">Ajay Kumar Garg Engineering College</option>
<option value="others">Others- Please Specify Below</option>
</select>
</div>
<div class="form-group" *ngIf="selectedValue == 'others'">
<label for="name">Enter College Name:</label>
<input type="text" class="form-control" id="name" ngModel name="other_college_name" required>
</div>
You can do like so
<div class="form-group">
<label for="college">College:</label>
<select class="form-control" id="college" [(ngModel)]="collegeName" name="college_name" required>
<option value="AKGEC">Ajay Kumar Garg Engineering College</option>
<option value="other">Others- Please Specify Below</option>
</select>
</div>
<div class="form-group" *ngIf="collegeName === 'other'">
<label for="name">Enter College Name:</label>
<input type="text" class="form-control" id="name" ngModel name="other_college_name" required>
</div>
Your options must have a value associated with them, the selected options value will get set to the model associated with your dropdown select. You can check that for show/hide as follows:
<div class="form-group">
<label for="college">College:</label>
<select class="form-control" id="college" [(ngModel)]="selectedVal" name="college_name" required>
<option value="ajay">Ajay Kumar Garg Engineering College</option>
<option value="others">Others- Please Specify Below</option>
</select>
</div>
<div class="form-group" *ngIf="selectedVal==='others'">
<label for="name">Enter College Name:</label>
<input type="text" class="form-control" id="name" ngModel name="other_college_name" required>
</div>
I am a bit new to coding. I have made a HTML form which is posting to one website after submission and is also landing on the other page for acknowledgement. but my form page is not disappearing. i am using google sites for this form so cant use any scripting language. Have to rely on html only
<form action="https://www.salesforce.com/servlet/servlet.WebToCase?encoding=UTF-8" method="POST">
<!-- ---------------------------------------------------------------------- -->
<!-- NOTE: These fields are optional debugging elements. Please uncomment -->
<!-- these lines if you wish to test in debug mode. -->
<!-- <input type="hidden" name="debug" value=1> -->
<!-- <input type="hidden" name="debugEmail" value="smoiz88#gmail.com"> -->
<!-- ---------------------------------------------------------------------- -->
<label for="first_name">First Name</label>
<input id="first_name" maxlength="40" name="first_name" size="40" type="text" required />
<br>
<label for="last_name">Last Name</label>
<input id="last_name" maxlength="40" name="last_name" size="40" type="text" required />
<br>
<label for="email">Email</label>
<input id="email" maxlength="80" name="email" size="40" type="text" required />
<br>
<label for="phone">Phone</label>
<input id="phone" maxlength="40" name="phone" size="40" type="number" />
<br>
<label class="label">Site</label>
<select class="select" id="Site" name="site" title="Site">
<option value="None">None</option>
<option value="Armadale">Armadale</option>
<option value="Elsternwick">Elsternwick</option>
<option value="Hawthorn">Hawthorn</option>
<option value="Manila">Manila</option>
<option value="UK">UK</option>
<option value="Other">Other</option>
</select>
<br>
<br>
<label class="label">Salesforce Profile</label>
<select class="select" id="Profile">
<option value="None">None</option>
<option value="Acquire Career Champion">Acquire Career Champion</option>
<option value="Acquire Career Advisor">Acquire Career Advisor</option>
<option value="Acquire Career Hunter">Acquire Career Hunter</option>
<option value="Acquire Data Analyst">Acquire Data Analyst</option>
<option value="Acquire Retention Specialist">Acquire Retention Specialist</option>
<option value="Acquire Training Admin">Acquire Training Admin</option>
<option value="Acquire Qualifier">Acquire Qualifier</option>
</select>
<br>
<br>
<label for="fault">Fault Title</label>
<input id="fault" maxlength="20" name="fault" size="30" type="text" required />
<br>
<br>
<label>Fault Type</label>
<select class="select" id="Type">
<option value="None">None</option>
<option value="Password Reset">Password Reset</option>
<option value="Report Required">Report Required</option>
<option value="Login Details">Login Details</option>
<option value="End Of Employment">End Of Employment</option>
<option value="File Merge">File Merge</option>
<option value="Insufficient Privilege">Insufficient Privilege</option>
<option value="Other">Other</option>
</select>
<br>
<br>
<label for="description">Description</label>
<textarea name="description"></textarea>
<br>
<div id="submit">
<input type="submit" name="submit">
</div>
</form>
any suggestions how can i make it disapper once it is submitted.
It seems the server brings you back because it doesn't know where to redirect after form submission.
Try create another page with confirmation text and configure server to redirect there after submission.
There must be a parameter or something on the server side to control submission behavior.
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