I have a form and I want to align all input fields and the select field to right line the 1st 5-6 elements. I wrote the following .css for the labels:
label {
display: inline-block;
width: 200px;
text-align: left;
}
but why only the first elemeents are right aligned ?
I wantto divide the labels and options to two columns
The below is the screenshot of my form.
HTML code:
<span class="screen-reader-text">Gallery Posts Widget</span>
</a>
</div>
<div class="widget-title"><h3>Gallery Posts Widget<span class="in-widget-title"></span></h3></div>
</div>
<div class="widget-inside">
<form method="post"> <div class="widget-content"> <p>
<label for="widget-gallery-posts-widget-__i__-title">Title:</label>
<input class="widefat" id="widget-gallery-posts-widget-__i__-title" name="widget-gallery-posts-widget[__i__][title]" type="text" value="" />
</p>
<p>
<label for="widget-gallery-posts-widget-__i__-post_count">Posts to display:</label>
<input class="small-text" id="widget-gallery-posts-widget-__i__-post_count" name="widget-gallery-posts-widget[__i__][post_count]" type="number" value="4" />
</p>
<p>
<label for="widget-gallery-posts-widget-__i__-post_offset">Posts offset:</label>
<input class="small-text" id="widget-gallery-posts-widget-__i__-post_offset" name="widget-gallery-posts-widget[__i__][post_offset]" type="number" value="0" />
</p>
<p>
<label for="widget-gallery-posts-widget-__i__-column_qty">Posts per row:</label>
<input class="small-text" id="widget-gallery-posts-widget-__i__-column_qty" name="widget-gallery-posts-widget[__i__][column_qty]" type="number" value="1" />
</p>
<p>
Cell size (px)<br /></small>
<small><label for="widget-gallery-posts-widget-__i__-cell_width">Width:</label></small>
<input class="small-text" id="widget-gallery-posts-widget-__i__-cell_width" name="widget-gallery-posts-widget[__i__][cell_width]" type="number" value="200" />
<small><label for="widget-gallery-posts-widget-__i__-cell_height">Height:</label></small>
<input class="small-text" id="widget-gallery-posts-widget-__i__-cell_height" name="widget-gallery-posts-widget[__i__][cell_height]" type="number" value="200" />
</p>
<p>
Gap between<br /></small>
<small><label for="widget-gallery-posts-widget-__i__-cell_gap_horizontal">Columns:</label></small>
<input class="small-text" id="widget-gallery-posts-widget-__i__-cell_gap_horizontal" name="widget-gallery-posts-widget[__i__][cell_gap_horizontal]" type="text" value="0px" />
<small><label for="widget-gallery-posts-widget-__i__-cell_gap_vertical">Rows:</label></small>
<input class="small-text" id="widget-gallery-posts-widget-__i__-cell_gap_vertical" name="widget-gallery-posts-widget[__i__][cell_gap_vertical]" type="text" value="0px" />
</p>
<p>
<label for="widget-gallery-posts-widget-__i__-widget_taxonomy">Taxonomy:</label>
<select id="widget-gallery-posts-widget-__i__-widget_taxonomy" name="widget-gallery-posts-widget[__i__][widget_taxonomy]">
<option value="">All</option>
<option value="category" >Categories (category)</option>
<option value="post_tag" >Tags (post_tag)</option>
<option value="post_format" >Format (post_format)</option>
</select>
</p>
<p>
<label for="widget-gallery-posts-widget-__i__-taxonomy_term_id">Taxonomy Term IDs:</label>
<input id="widget-gallery-posts-widget-__i__-taxonomy_term_id" name="widget-gallery-posts-widget[__i__][taxonomy_term_id]" type="number" value="" />
</p>
<p>
<label for="widget-gallery-posts-widget-__i__-custom_post_type">Custom Post Type:</label>
<select id="widget-gallery-posts-widget-__i__-custom_post_type" name="widget-gallery-posts-widget[__i__][custom_post_type]">
<option value="">All</option>
<option value="post" >Posts (post)</option>
<option value="page" >Pages (page)</option>
<option value="attachment" >Media (attachment)</option>
</select>
</p>
<p>
<label for="widget-gallery-posts-widget-__i__-order_field">Order:</label>
<select id="widget-gallery-posts-widget-__i__-order_field" name="widget-gallery-posts-widget[__i__][order_field]">
<option value="date" >Date</option>
<option value="title" >Title</option>
<option value="modified" >Modified Date</option>
<option value="ID" >ID</option>
<option value="author" >Author</option>
<option value="comment_count" >Comment Count</option>
<option value="rand" >Random</option>
</select>
<select id="widget-gallery-posts-widget-__i__-order_type" name="widget-gallery-posts-widget[__i__][order_type]">
<option value="DESC" >Desc</option>
<option value="ASC" >Asc</option>
</select>
</p>
<p>
<label for="widget-gallery-posts-widget-__i__-post_layout">Layout:</label>
<br />
<textarea class="widefat" style="resize:none;height:85px" id="widget-gallery-posts-widget-__i__-post_layout" name="widget-gallery-posts-widget[__i__][post_layout]"></textarea>
<br />
<small>
Available tags: <br />
[TITLE] [DATE] [AUTHOR] [EXCERPT] [COMMENT-COUNT] [TAGS] [WOO-PRODUCT-PRICE]
</small>
</p>
<label for="widget-gallery-posts-widget-__i__-widget_css_class">CSS classes:</label>
<input id="widget-gallery-posts-widget-__i__-widget_css_class" name="widget-gallery-posts-widget[__i__][widget_css_class]" type="text" value="" />
<p>
<label for="widget-gallery-posts-widget-__i__-post_date_format">Date Format:</label>
<input size="12" id="widget-gallery-posts-widget-__i__-post_date_format" name="widget-gallery-posts-widget[__i__][post_date_format]" type="text" value="F j, Y g:i a" />
</p>
<p>
<label for="widget-gallery-posts-widget-__i__-post_excerpt_size">Excerpt size (words):</label>
<input size="3" id="widget-gallery-posts-widget-__i__-post_excerpt_size" name="widget-gallery-posts-widget[__i__][post_excerpt_size]" type="number" value="10" />
</p>
<p>
<label for="widget-gallery-posts-widget-__i__-post_excerpt_link">'Read More' Text:</label>
<input id="widget-gallery-posts-widget-__i__-post_excerpt_link" name="widget-gallery-posts-widget[__i__][post_excerpt_link]" type="text" value="more>>" />
</p>
<p>
You didn't add style to the inputs. You only styled the labels. Even those that seem to be right-aligned are not. They just fit there because of the label width and their width.
Related
HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> FreeCodeCamp Survey</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 id="title"> FreeCodeCamp Survey</h1>
<p id="description"> Thanks for taking the time to help us improve!</p>
<form id="survey-form">
<div class="details">
<label for="name" id="name-label"> Name <input id="name" type="text" required placeholder="Enter Your Name">
</label>
<label for="email" id="email-label"> Email <input id="email" type="email" required placeholder="Enter Your Email">
</label>
<label for="number" id="number-label"> Number <input id="number" type="number" required min="11" max="20" placeholder="Enter Your Number">
</label>
<label for="current-role" id="current-role-label">Which option best describes your current role?<br>
<select id="dropdown" name="dropdown">
<option value="current-role">(Select Current Role)</option>
<option value="student">Student</option>
<option value="full-time-job">Full Time Job</option>
<option value="full-time-learner">Full Time Learner</option>
<option value="prefer-not-to-say">Prefer Not to Say</option>
<option value="other">Other</option>
</select>
</label>
</div>
<div class="recommend">
<label>Would you Recommend FCC.com to a friend?</label>
<label for="definitely"><input id="definitely" name="definitely" value="definitely" type="radio"> Definitely</label>
<label for="maybe"><input id="maybe" type="radio" value="maybe" name="definitely"> Maybe</label>
<label><input id="not-sure" type="radio" value="not-sure" name="definitely"> Not Sure</label>
</div>
<div class="features">
<label for="favorite-feature" id="favorite-feature-label">What is your favorite feature of freeCodeCamp? (select an option/s)</label>
<select id="dropdown" name="dropdown">
<option value="favorite-feature">(Select Favorite Feature)
</option>
<option value="challenges">Challenges</options>
<option value="projects">Projects</options>
<option value="community">Community</options>
<option value="open-source">Open Source</option>
</select>
</div>
<div class="improvements">
<label>What would you like to see improved? (check all that apply)</label>
<label for="front-end"><input type="checkbox" value="front-end" name="front-end" id="front-end">Front-end Projects</label>
<label for="back-end"><input type="checkbox" value="back-end" name="back-end" id="back-end">Back-end Projects</label>
<label><input type="checkbox" value="challenges" name="challenges" id="challenges">Challenges</label>
</div>
<div class="comment">
<label for="comments">Any Comments or Suggestions?</label>
<textarea id="comments" name="comments" placeholder="Enter your comments here"></textarea>
</div>
<div>
<button type="submit" id="submit"> Submit</button>
</div>
</form>
</body>
</html>
I have tried styling using .features for example which is a class that I gave to my div but it doesn't seem to do anything. However if I use
label, input{ display:block;}
It seems to do the trick! I'm not sure if this makes sense. Anyhow, any help or guidance would be much appreciated. I'm having so much fun learning all this new stuff!
your class .features class is working. The option tags closing was wrong. Had an extra s in the end mentioned by #Nasser in the comment. Run the code below and you will get border which I have given through features class.
I think you should check stylesheets name 'styles.css' whether it's same with the css file name.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> FreeCodeCamp Survey</title>
<style>
label, input{ display:block;}
.features{
border: 2px solid #fcba03;
}
</style>
</head>
<body>
<h1 id="title"> FreeCodeCamp Survey</h1>
<p id="description"> Thanks for taking the time to help us improve!</p>
<form id="survey-form">
<div class="details">
<label for="name" id="name-label"> Name <input id="name" type="text" required placeholder="Enter Your Name">
</label>
<label for="email" id="email-label"> Email <input id="email" type="email" required placeholder="Enter Your Email">
</label>
<label for="number" id="number-label"> Number <input id="number" type="number" required min="11" max="20" placeholder="Enter Your Number">
</label>
<label for="current-role" id="current-role-label">Which option best describes your current role?<br>
<select id="dropdown" name="dropdown">
<option value="current-role">(Select Current Role)</option>
<option value="student">Student</option>
<option value="full-time-job">Full Time Job</option>
<option value="full-time-learner">Full Time Learner</option>
<option value="prefer-not-to-say">Prefer Not to Say</option>
<option value="other">Other</option>
</select>
</label>
</div>
<div class="recommend">
<label>Would you Recommend FCC.com to a friend?</label>
<label for="definitely"><input id="definitely" name="definitely" value="definitely" type="radio"> Definitely</label>
<label for="maybe"><input id="maybe" type="radio" value="maybe" name="definitely"> Maybe</label>
<label><input id="not-sure" type="radio" value="not-sure" name="definitely"> Not Sure</label>
</div>
<div class="features">
<label for="favorite-feature" id="favorite-feature-label">What is your favorite feature of freeCodeCamp? (select an option/s)</label>
<select id="dropdown" name="dropdown">
<option value="favorite-feature">(Select Favorite Feature)
</option>
<option value="challenges">Challenges</option>
<option value="projects">Projects</option>
<option value="community">Community</option>
<option value="open-source">Open Source</option>
</select>
</div>
<div class="improvements">
<label>What would you like to see improved? (check all that apply)</label>
<label for="front-end"><input type="checkbox" value="front-end" name="front-end" id="front-end">Front-end Projects</label>
<label for="back-end"><input type="checkbox" value="back-end" name="back-end" id="back-end">Back-end Projects</label>
<label><input type="checkbox" value="challenges" name="challenges" id="challenges">Challenges</label>
</div>
<div class="comment">
<label for="comments">Any Comments or Suggestions?</label>
<textarea id="comments" name="comments" placeholder="Enter your comments here"></textarea>
</div>
<div>
<button type="submit" id="submit"> Submit</button>
</div>
</form>
</body>
</html>
I am making a Guestbook page right now and am having trouble aligning the input fields so it looks nice. Right now it looks very ugly and not organized. I just want everything (the inputs) to line up nicely. Thank you!
html:
<form>
Name <input type="text" name="guest" id="guest" input size="45" maxlength="40" required/> <br />
E-mail address <input type="text" name="email" id="email" input size="60" maxlength="60" required/> <br />
City <input type="text" name="city" id="city" input size="35" maxlength="30" required/> <br />
<select id="province" name="province" size="15" required>
<option value="Alberta">Alberta</option>
<option value="British Columbia">British Columbia</option>
<option value="Manitoba">Manitoba</option>
<option value="New Brunswick">New Brunswick</option>
<option value="Newfoundland and Labrador">Newfoundland and Labrador</option>
<option value="Nova Scotia">Nova Scotia</option>
<option value="Ontario" selected="selected">Ontario</option>
<option value="Prince Edward Island">Prince Edward Island</option>
<option value="Quebec">Quebec</option>
<option value="Saskatchewan">Saskatchewan</option>
<option value="Northwest Territories">Northwest Territories</option>
<option value="Nunavut">Nunavut</option>
<option value="Yukon">Yukon</option>
</select> <br />
Web Page URL <input type="text" name="web_url" id="web_url" input size="60" maxlength="60" /> <br />
Web Page Title <input type="text" name="web_title" id="web_title" input size="25" /> <br />
<textarea rows="4" cols="50" name="comments" id="comments" >
Enter comments here...</textarea>
</form>
CSS:
body {
max-width: 1000px;
font-size: 14px;
line-height: 1.4em;
font-family: Helvetica, Verdana, sans-serif;
}
Wrap labels with <label> tag:
<label>Name </label><input type="text" name="guest" id="guest" input size="45" maxlength="40" required/> <br />
Then add css:
label{width: 200px; float: left;}
Full code snippet
For horizontal align:
Put all your inputs in a <div> tag and add this css to it:
div {
float: left;
}
For vertical align:
Put all your inputs as a <div> and make each input a list:
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
Use this CSS:
div li {
float: left;
}
The secret is DIVs.
Use an outer div to surround each grouping, and inner divs for each inline group (left = title, right = input field).
Note that the inner divs are floated left -- this places them side by side. But it also removes them from the HTML "flow" and the .outer divs will have zero height. So, we add overflow:______ (auto or hidden) to counter this. Try removing the overflow:hidden and watch everything go to pieces.
jsFiddle for experimenting
body {
max-width: 1000px;
font-size: 14px;
line-height: 1.4em;
font-family: Helvetica, Verdana, sans-serif;
}
.outer{overflow:hidden;margin-bottom:5px;}
.in_left {float:left;width:100px;padding-right:10px;text-align:right;}
.in_right{float:left;width:250px;}
.in_right input{width:250px;}
.outer:last-of-type{margin-bottom:25px;}
<form>
<div class="outer">
<div class="in_left">Name</div>
<div class="in_right"><input type="text" name="guest" id="guest" size="45" maxlength="40" required/></div>
</div><!-- .outer -->
<div class="outer">
<div class="in_left">E-mail address </div>
<div class="in_right"><input type="text" name="email" id="email" size="60" maxlength="60" required/> </div>
</div><!-- .outer -->
<div class="outer">
<div class="in_left">City</div>
<div class="in_right"><input type="text" name="city" id="city" size="35" maxlength="30" required/></div>
</div><!-- .outer -->
<select id="province" name="province" size="15" required>
<option value="Alberta">Alberta</option>
<option value="British Columbia">British Columbia</option>
<option value="Manitoba">Manitoba</option>
<option value="New Brunswick">New Brunswick</option>
<option value="Newfoundland and Labrador">Newfoundland and Labrador</option>
<option value="Nova Scotia">Nova Scotia</option>
<option value="Ontario" selected="selected">Ontario</option>
<option value="Prince Edward Island">Prince Edward Island</option>
<option value="Quebec">Quebec</option>
<option value="Saskatchewan">Saskatchewan</option>
<option value="Northwest Territories">Northwest Territories</option>
<option value="Nunavut">Nunavut</option>
<option value="Yukon">Yukon</option>
</select> <br />
Web Page URL <input type="text" name="web_url" id="web_url" size="60" maxlength="60" /> <br />
Web Page Title <input type="text" name="web_title" id="web_title" size="25" /> <br />
<textarea rows="4" cols="50" name="comments" id="comments" >
Enter comments here...</textarea>
</form>
Sorry but i'm new in html and i would like to ask how can i enable specific textboxes when a specific combo box option is chosen.
I've seen the topic how to activate a textbox if I select an other option in drop down box but i don't understoond what am i doing wrong.
I want when a combo box option such as option1 is selected to enable textboxes with the name lesson1, lesson2, lesson3, when a combo box option such as option2 is selected to enable textboxes with the name lesson4, lesson5, lesson6 etc for the user to fill.
Here is my code
function Select(val) {
var element=document.getElementById("options1");
var element2=document.getElementById("options2");
var element3=document.getElementById("options3");
if (val=="option 1"){
element.style.display="block";
else
element.style.display="none"; }
else if (val=="option2"){
element2.style.display="block";
else
element2.style.display="none"; }
else if (val=="option 3"){
element3.style.display="block";
else
element3.style.display="none"; }
}
<label class="formLabel">
Options*</label><br />
<select name="select2" required="" onchange="Select(this.value);">
<option disabled="disabled" selected="selected" value=""></option>
<option value="">option 1</option>
<option value="">option 2</option>
<option value="">option 3</option>
</select><br />
<div id="options1" style="display: none;">
<label class="classLabel">
lesson 1*
</label>
<label class="classLabel">
lesson 2*</label>
<label class="classLabel">
lesson 3*</label><br />
<input class="formText" name="field7" required="" type="text" />
<input class="formText" name="field8" required="" type="text" />
<input class="formText" name="field9" required="" type="text" /><br />
</div>
<div id="options2" style="display: none;">
<label class="classLabel">
lesson 4*
</label>
<label class="classLabel">
lesson 5*</label>
<label class="classLabel">
lesson 6*</label><br />
<input class="formText" name="field10" required="" type="text" />
<input class="formText" name="field11" required="" type="text" />
<input class="formText" name="field12" required="" type="text" /><br />
</div>
<div id="options3" style="display: none;">
<label class="classLabel">
lesson 7*
</label>
<label class="classLabel">
lesson 8*</label>
<label class="classLabel">
lesson 9*</label><br />
<input class="formText" name="field13" required="" type="text" />
<input class="formText" name="field14" required="" type="text" />
<input class="formText" name="field15" required="" type="text" /><br />
</div>
<input id="submitButton" type="submit" value="send" /></form> </div>
You have not added values to combo box , combo box must be like
<select name="select2" required="" onchange="Select(this.value);">
<option disabled="disabled" selected="selected" value=""></option>
<option value="option 1">option 1</option>
<option value="option 2">option 2</option>
<option value="option 3">option 3</option>
</select>
and there is some syntax error in your js script also
please try the following code
syntax of if else wrong
<script>function Select(val) {
var element=document.getElementById("options1");
var element2=document.getElementById("options2");
var element3=document.getElementById("options3");
if (val=="option 1")
element.style.display="block";
else
element.style.display="none";
if (val=="option 2")
element2.style.display="block";
else
element2.style.display="none";
if (val=="option 3")
element3.style.display="block";
else
element3.style.display="none";
}
</script>
<script>
function Select(val) {
var element=document.getElementById("options1");
var element2=document.getElementById("options2");
var element3=document.getElementById("options3");
if (val=="option 1")
element.style.display="block";
else
element.style.display="none";
if (val=="option 2")
element2.style.display="block";
else
element2.style.display="none";
if (val=="option 3")
element3.style.display="block";
else
element3.style.display="none";
}
</script>
<label class="formLabel">Options*</label><br />
<select name="select2" required="" onchange="Select(this.value);">
<option disabled="disabled" selected="selected" value=""></option>
<option value="option 1">option 1</option>
<option value="option 2">option 2</option>
<option value="option 3">option 3</option></select><br />
<div id="options1" style="display:none;">
<label class="classLabel">lesson 1* </label>
<label class="classLabel">lesson 2*</label>
<label class="classLabel" >lesson 3*</label><br />
<input class="formText" name="field7" required="" type="text" />
<input class="formText" name="field8 required="" type="text" />
<input class="formText" name="field9" required="" type="text" /><br />
</div>
<div id="options2" style="display:none;">
<label class="classLabel" >lesson 4* </label>
<label class="classLabel">lesson 5*</label>
<label class="classLabel" >lesson 6*</label><br />
<input class="formText" name="field10" required="" type="text" />
<input class="formText" name="field11" required="" type="text" />
<input class="formText" name="field12" required="" type="text" /><br />
</div>
<div id="options3" style="display:none;">
<label class="classLabel">lesson 7* </label>
<label class="classLabel">lesson 8*</label>
<label class="classLabel">lesson 9*</label><br />
<input class="formText" name="field13" required="" type="text" />
<input class="formText" name="field14" required="" type="text" />
<input class="formText" name="field15" required="" type="text" /><br />
</div>
<input id="submitButton" type="submit" value="send" /></form>
</div>
I have a basic form, that I'm trying to get two inputs per line. Unless the 'province' select tag is floated right, it breaks the spacing. If it's 5th, like in the code I posted, there becomes a blank spot between Postal Code and Fax. The tab order even remains correct (phone -> fax -> email -> web).
Where if it's floated right (6th in this screenshot) everything spaces fine.
My form:
<form id="form" action="submit.php" method="post">
<fieldset>
<p>
<label for="first_name">* First Name:</label>
<input type="text" name="first_name" id="first_name" required />
</p>
<p>
<label for="last_name">* Last Name:</label>
<input type="text" name="last_name" id="last_name" required />
</p>
<p>
<label for="address">Company Address:</label>
<input type="text" name="address" id="address" />
</p>
<p>
<label for="city">City:</label>
<input type="text" name="city" id="city" />
</p>
<p>
<label for="province">Province:</label>
<select name="province" id="province">
<option value="">Select location</option>
<option value="AB">Alberta</option>
<option value="BC">British Columbia</option>
<option value="MB">Manitoba</option>
<option value="NB">New Brunswick</option>
<option value="NL">Newfoundland and Labrador</option>
<option value="NS">Nova Scotia</option>
<option value="NT">Northwest Territories</option>
<option value="NT">Nunavut</option>
<option value="ON">Ontario</option>
<option value="PE">Prince Edward Island</option>
<option value="QC">Quebec</option>
<option value="SK">Saskatchewan</option>
<option value="YT">Yukon</option>
<option value="US">(US State)</option>
</select>
</p>
<p>
<label for="postal_code">Postal Code:</label>
<input type="text" name="postal_code" id="postal_code" />
</p>
<p>
<label for="phone">* Phone:</label>
<input type="tel" name="phone" id="phone" required />
</p>
<p>
<label for="fax">Fax:</label>
<input type="tel" name="fax" id="fax" />
</p>
<p>
<label for="email">E-Mail Address:</label>
<input type="email" name="email" id="email" />
</p>
<p>
<label for="web_address">Website Address:</label>
<input type="text" name="web_address" id="web_address" />
</p>
</fieldset>
</form>
And my CSS:
fieldset p {
display: inline-block;
width: 49%;
}
fieldset p:nth-of-type(even){
float:right;
}
And if I remove the 'province' select tag everything spaces fine. With the province list, it always breaks the second 'float: right' after the select tag. Is there something wrong with my select tag? Or is it something with my CSS?
JSFiddles:
First screenshot: http://jsfiddle.net/sB2W7/
Second screenshot: http://jsfiddle.net/4CfQ5/
I would use display: inline-block instead of float
DEMO http://jsfiddle.net/LLJ6Z/2/
p {
display: inline-block;
width: 45%
}
label {
display: inline-block;
width: 130px;
display
}
input, select {
display: inline-block;
width: 100px;
}
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