HTML registration form is created with gender option and now CSS failed to format radio buttons in table cells. How to put them in a aesthetic format with the help of external stylesheet?
I have tried MDN's guideline to create form and format them using external CSS. MDN suggested with table and table-cell format in the CSS file!
form.form-example {
display: table;
}
div.form-example {
display: table-row;
}
label,
input,
select,
option {
display: table-cell;
margin-bottom: 10px;
}
<form id="registration" action="" , method="post" class="form-example">
<div class="form-example">
<h1>Registration Form</h1>
</div>
<div class="form-example">
<label for="fname">First Name:</label>
<input name="first_name" type="text" id="fname" placeholder="Python" required>
</div>
<div class="form-example">
<label for="lname">Last Name:</label>
<input name="last_name" type="text" id="lname" placeholder="Buddha" required>
</div>
<div class="form-example">
<label for="bdate">Date of Birth:</label>
<input name="dob" type="date" id="bdate">
</div>
<div class="form-example">
<label for="country">Country:</label>
<select name="country" id="country">
<option>USA</option>
<option>Canada</option>
<option>Mexico</option>
</select>
</div>
<div class="form-example">
<label for="email">Email:</label>
<input type="email" id="email" required>
</div>
<div class="form-example">
<label for="password">Password:</label>
<input type="password" id="password" required>
</div>
<div class="form-example">
<label>Gender:</label>
<label for="male">Male</label>
<input type="radio" id="male" name="gender" value="male" required>
<label for="female">Female</label>
<input type="radio" id="female" name="gender" value="female">
<label for="other">Other</label>
<input type="radio" id="other" name="gender" value="other">
</div>
<div class="form-example">
<button>Submit</button>
</div>
</form>
</div>
I would suggest to change your css styles a bit. Because this:
label,input,select,option{
display: table-cell;
margin-bottom: 10px;
}
Will make all inputs on the page to be displayed as a table cell and thus there will be the spacing between radio inputs that you don't like.
I'm sure that there are other options, but what worked for me was removing your label,input,select,option line and adding .table-cell class so you can use it freely on any element that should be displayed as a table-cell.
form.form-example{
display: table;
}
div.form-example{
display: table-row;
height: 30px;
}
.table-cell {
display: table-cell;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="author" content="Kuldeep Gadhavi">
<title>Registration Form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form id ="registration" action="", method="post" class="form-example">
<div class="form-example">
<h1>Registration Form</h1>
</div>
<div class="form-example">
<label for="fname" class="table-cell">First Name:</label>
<input name="first_name" type="text" id="fname" placeholder="Python" required class="table-cell">
</div>
<div class="form-example">
<label for="lname" class="table-cell">Last Name:</label>
<input name="last_name" type="text" id="lname" placeholder="Buddha" required class="table-cell">
</div>
<div class="form-example">
<label for="bdate" class="table-cell">Date of Birth:</label>
<input name="dob" clsss="table-cell" type="date" id="bdate">
</div>
<div class="form-example">
<label for="country" class="table-cell">Country:</label>
<select name="country" class="table-cell" id="country">
<option>USA</option>
<option>Canada</option>
<option>Mexico</option>
</select>
</div>
<div class="form-example">
<label for="email" class="table-cell">Email:</label>
<input type="email" id="email" required class="table-cell">
</div>
<div class="form-example">
<label for="password" class="table-cell">Password:</label>
<input type="password" id="password" class="table-cell" required>
</div>
<div class="form-example">
<label class="table-cell">Gender:</label>
<div class="table-cell">
<label for="male">Male</label>
<input type="radio" id="male" name="gender" value="male" required>
<label for="female">Female</label>
<input type="radio" id="female" name="gender" value="female">
<label for="other">Other</label>
<input type="radio" id="other" name="gender" value="other">
</div>
</div>
<div class="form-example table-cell" >
<button>Submit</button>
</div>
</form>
</div>
</body>
</html>
The group with radio buttons is inside a div with class .table-cell therefore only this div will be rendered as a table cell. The radio inputs inside will remain rendered as inline elements and thus there will be no white-space between them. Also don't forget to add .table-cell class to other elements that should be rendered as table cells (so the inputs and labels.. I have also slightly modified the height of the .form-example, because I have removed the margin on .table-cell class.
label,input,select,option{
display: table-cell;
margin-bottom: 10px;
}
This makes every label, input, select and options as cell.
that's why your radio buttons aren't displayed correctly.
you can see that the male, female and other labels are displayed as cell (border property)
removing label tag should fix the problem.
Male
<input type="radio" id="male" name="gender" value="male" checked>
Female
<input type="radio" id="female" name="gender" value="female">
Other
<input type="radio" id="other" name="gender" value="other">
By the way, consider using grid or flex for such things.
Related
I would like to shift the form up to the image. However, I have tried but I still could not shift the whole form up.
Below is the html and css codes:
/* Container holding the image and the text */
.container {
position: relative;
text-align: left;
color: black;
}
/* Encounter issues here, please take a look at the second image*/
.formcontainer {
position: absolute;
top: 8px;
left: 16px;
}
<div class="container">
<img src="https://picsum.photos/1000/600.jpg" class="body">
<h2> Registration </h2>
<div class="formcontainer">
<form action>
<label for="name">Name :</label> <br>
<input type="text" name="name" value="Enter your name"></input>
<br>
<label for="age">Age :</label> <br>
<input type="number" name="age" min="1"></input>
<br>
<label for="gender">Gender :</label> <br>
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<br>
<label for="membertype">Types of membership :</label> <br>
<select name="type">
<option value="OneYr">1 Year</option>
<option value="FiveYr" selected>5 Years</option>
<option value="LifeTime">Life Time</option>
</select>
<br>
<br/>
<label for="interests">Interests :</label>
<br>
<input type="checkbox" name="interest" value="Bike"> Travel<br>
<input type="checkbox" name="interest" value="Food"> Food<br>
<input type="checkbox" name="interest" value="Shopping"> Shopping<br>
<input type="checkbox" name="interest" value="Cars"> Cars<br>
</br>
<input type ="button" name="submit" value="Submit">
</form>
</div>
</div>
After I have tried using the above .formcontainer css codes:
Just add your image in .container style not using img tag.
.container{
background-image: url("../img/gym.jpg");
}
See the Snippet below:
.container{
background-image: url("https://i.stack.imgur.com/3dbsg.png");
}
<div class="container">
<img src="../img/gym.jpg" class="body">
<h2> Registration </h2>
<div class="formcontainer">
<form action>
<label for="name">Name :</label> <br>
<input type="text" name="name" value="Enter your name"></input>
<br>
<label for="age">Age :</label> <br>
<input type="number" name="age" min="1"></input>
<br>
<label for="gender">Gender :</label> <br>
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<br>
<label for="membertype">Types of membership :</label> <br>
<select name="type">
<option value="OneYr">1 Year</option>
<option value="FiveYr" selected>5 Years</option>
<option value="LifeTime">Life Time</option>
</select>
<br>
<br/>
<label for="interests">Interests :</label>
<br>
<input type="checkbox" name="interest" value="Bike"> Travel<br>
<input type="checkbox" name="interest" value="Food"> Food<br>
<input type="checkbox" name="interest" value="Shopping"> Shopping<br>
<input type="checkbox" name="interest" value="Cars"> Cars<br>
</br>
<input type ="button" name="submit" value="Submit">
</form>
</div>
</div>
Not a UI expert, but adding the image as background to the parent-div should do.
.container {
background-image: url("https://i.ibb.co/xJCmfmT/test3.jpg");
position: relative;
text-align: left;
color: black;
}
You can do this in couple of ways as far as I know.
set the image as parent div (container here) background using
.container {
background-image: url(IMAGE_URL);
}
set position of formcontainer as absolute
.formcontainer {
position: absolute;
}
I'm trying to use flexbox in the following snippet.
However, the header and the div below it do not seem to get the CSS styling. If I remove the flexbox setting in the container div the header shows on top of the form div. But when I add display flex it puts the header and form div side by side.
Why does this happen? I am trying to show the header on top and form div below it and then horizontally center with justify-content: center. Thanks.
.container {
display: flex;
justify-content: center;
align-items: center;
}
header {
border: 1px solid black;
}
#form {
border: 1px solid black;
}
<div class="container">
<header>
<h1 id="title">Survey Form</h1>
<p id="description">Thank you for helping us improve by taking this survey.</p>
</header>
<div id="form">
<form id="survey-form">
<div class="form-group">
<label id="name-label" for="name">Name</label>
<input type="text" id="name" name="name" placeholder="Enter your name" required>
</div>
<div class="form-group">
<label id="email-label" for="email">Email</label>
<input type="email" id="email" name="email" placeholder="Enter your email" pattern=".+#.+\..+" required>
<div>
<div class="form-group">
<label id="number-label" for="number">Age (optional)</label>
<input type="number" id="number" name="age" placeholder="Enter your email" min="1" max="200" required>
<div class="form-group">
<p>What's your coding experience?</p>
<label>
<input type="radio" name="user-experience" value="noob" class="input-radio" />
Noob
</label>
<label>
<input type="radio" name="user-experience" value="dangerous" class="input-radio" checked/>
Dangerous
</label>
<label>
<input type="radio" name="user-experience" value="veteran" class="input-radio" />
Veteran
</label>
</div>
<div class="form-group">
<p>What programing language do you use the most at work?</p>
<select id="dropdown" class="form-group" name="language" required>
<option disabled selected value>Select a language</option>
<option value="java">Java</option>
<option value="javascript">JavaScript</option>
<option value="python">Python</option>
<option value="c++">C++</option>
<option value="c">C</option>
<option value="c#">C#</option>
<option value="php">PHP</option>
<option value="ruby">Ruby</option>
</select>
</div>
<div class="form-group">
<p>Do you like to work on the Front-end or Back-end? <span class="clue">(Check all that apply)</span</p>
<label>
<input name="prefer" value="front-end-projects" type="checkbox" class="input-checkbox" />Front-end
</label>
<label>
<input name="prefer" value="back-end-projects" type="checkbox" class="input-checkbox" />Back-end
</label>
</div>
<div class="form-group">
<p>Please provide any comments if we missed anything?</p>
<textArea id="comments" name="comment" placeholder="Place your comments here..."></textArea>
<div>
<div class="form-group">
<button type="submit" id="submit" class="submit-button">Submit</button>
<div>
</form>
</div>
</div>
You wanna use the flex-direction property. It takes four values:
row
column
row-reverse
column-reverse
You wanna edit container class to this:
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
For more information on Ordering Flex Items see the docs
Edit:
You can use the flex-flow property, which is a css-shorthand property for:
flex-direction
flex-wrap
Default behaviour for display: flex is to align items in a row. You can change this by adding flex-flow: column to align the items in a column.
.container {
display: flex;
justify-content: center;
align-items: center;
flex-flow: column; /* added flex-flow: column here*/
}
header {
border: 1px solid black;
}
#form {
border: 1px solid black;
}
<div class="container">
<header>
<h1 id="title">Survey Form</h1>
<p id="description">Thank you for helping us improve by taking this survey.</p>
</header>
<div id="form">
<form id="survey-form">
<div class="form-group">
<label id="name-label" for="name">Name</label>
<input type="text" id="name" name="name" placeholder="Enter your name" required>
</div>
<div class="form-group">
<label id="email-label" for="email">Email</label>
<input type="email" id="email" name="email" placeholder="Enter your email" pattern=".+#.+\..+" required>
<div>
<div class="form-group">
<label id="number-label" for="number">Age (optional)</label>
<input type="number" id="number" name="age" placeholder="Enter your email" min="1" max="200" required>
<div class="form-group">
<p>What's your coding experience?</p>
<label>
<input type="radio" name="user-experience" value="noob" class="input-radio" />
Noob
</label>
<label>
<input type="radio" name="user-experience" value="dangerous" class="input-radio" checked/>
Dangerous
</label>
<label>
<input type="radio" name="user-experience" value="veteran" class="input-radio" />
Veteran
</label>
</div>
<div class="form-group">
<p>What programing language do you use the most at work?</p>
<select id="dropdown" class="form-group" name="language" required>
<option disabled selected value>Select a language</option>
<option value="java">Java</option>
<option value="javascript">JavaScript</option>
<option value="python">Python</option>
<option value="c++">C++</option>
<option value="c">C</option>
<option value="c#">C#</option>
<option value="php">PHP</option>
<option value="ruby">Ruby</option>
</select>
</div>
<div class="form-group">
<p>Do you like to work on the Front-end or Back-end? <span class="clue">(Check all that apply)</span</p>
<label>
<input name="prefer" value="front-end-projects" type="checkbox" class="input-checkbox" />Front-end
</label>
<label>
<input name="prefer" value="back-end-projects" type="checkbox" class="input-checkbox" />Back-end
</label>
</div>
<div class="form-group">
<p>Please provide any comments if we missed anything?</p>
<textArea id="comments" name="comment" placeholder="Place your comments here..."></textArea>
<div>
<div class="form-group">
<button type="submit" id="submit" class="submit-button">Submit</button>
<div>
</form>
</div>
</div>
try this it:
.container {
display: flex;
justify-content: center;
flex-direction: column;
width: fit-content;
margin: auto;
}
header {
border: 1px solid black;
}
#form {
border: 1px solid black;
}
<div class="container">
<header>
<h1 id="title">Survey Form</h1>
<p id="description">Thank you for helping us improve by taking this survey.</p>
</header>
<div id="form">
<form id="survey-form">
<div class="form-group">
<label id="name-label" for="name">Name</label>
<input type="text" id="name" name="name" placeholder="Enter your name" required>
</div>
<div class="form-group">
<label id="email-label" for="email">Email</label>
<input type="email" id="email" name="email" placeholder="Enter your email" pattern=".+#.+\..+" required>
<div>
<div class="form-group">
<label id="number-label" for="number">Age (optional)</label>
<input type="number" id="number" name="age" placeholder="Enter your email" min="1" max="200" required>
<div class="form-group">
<p>What's your coding experience?</p>
<label>
<input type="radio" name="user-experience" value="noob" class="input-radio" />
Noob
</label>
<label>
<input type="radio" name="user-experience" value="dangerous" class="input-radio" checked/>
Dangerous
</label>
<label>
<input type="radio" name="user-experience" value="veteran" class="input-radio" />
Veteran
</label>
</div>
<div class="form-group">
<p>What programing language do you use the most at work?</p>
<select id="dropdown" class="form-group" name="language" required>
<option disabled selected value>Select a language</option>
<option value="java">Java</option>
<option value="javascript">JavaScript</option>
<option value="python">Python</option>
<option value="c++">C++</option>
<option value="c">C</option>
<option value="c#">C#</option>
<option value="php">PHP</option>
<option value="ruby">Ruby</option>
</select>
</div>
<div class="form-group">
<p>Do you like to work on the Front-end or Back-end? <span class="clue">(Check all that apply)</span</p>
<label>
<input name="prefer" value="front-end-projects" type="checkbox" class="input-checkbox" />Front-end
</label>
<label>
<input name="prefer" value="back-end-projects" type="checkbox" class="input-checkbox" />Back-end
</label>
</div>
<div class="form-group">
<p>Please provide any comments if we missed anything?</p>
<textArea id="comments" name="comment" placeholder="Place your comments here..."></textArea>
<div>
<div class="form-group">
<button type="submit" id="submit" class="submit-button">Submit</button>
<div>
</form>
</div>
</div>
Use flex-flow:column to container
.container {
display: flex;
flex-flow: column;
}
Add style below to header for align content inside the header to center.
header {
align-items: center;
justify-content:center;
display:flex;
flex-flow:column;
}
Try this snippet
.container {
display: flex;
flex-flow: column;
}
header {
border: 1px solid black;
margin-bottom: 10px;
align-items: center;
justify-content:center;
display:flex;
flex-flow:column;
}
#form {
border: 1px solid black;
}
<div class="container">
<header>
<h1 id="title">Survey Form</h1>
<p id="description">Thank you for helping us improve by taking this survey.</p>
</header>
<div id="form">
<form id="survey-form">
<div class="form-group">
<label id="name-label" for="name">Name</label>
<input type="text" id="name" name="name" placeholder="Enter your name" required>
</div>
<div class="form-group">
<label id="email-label" for="email">Email</label>
<input type="email" id="email" name="email" placeholder="Enter your email" pattern=".+#.+\..+" required>
<div>
<div class="form-group">
<label id="number-label" for="number">Age (optional)</label>
<input type="number" id="number" name="age" placeholder="Enter your email" min="1" max="200" required>
<div class="form-group">
<p>What's your coding experience?</p>
<label>
<input type="radio" name="user-experience" value="noob" class="input-radio" />
Noob
</label>
<label>
<input type="radio" name="user-experience" value="dangerous" class="input-radio" checked/>
Dangerous
</label>
<label>
<input type="radio" name="user-experience" value="veteran" class="input-radio" />
Veteran
</label>
</div>
<div class="form-group">
<p>What programing language do you use the most at work?</p>
<select id="dropdown" class="form-group" name="language" required>
<option disabled selected value>Select a language</option>
<option value="java">Java</option>
<option value="javascript">JavaScript</option>
<option value="python">Python</option>
<option value="c++">C++</option>
<option value="c">C</option>
<option value="c#">C#</option>
<option value="php">PHP</option>
<option value="ruby">Ruby</option>
</select>
</div>
<div class="form-group">
<p>Do you like to work on the Front-end or Back-end? <span class="clue">(Check all that apply)</span</p>
<label>
<input name="prefer" value="front-end-projects" type="checkbox" class="input-checkbox" />Front-end
</label>
<label>
<input name="prefer" value="back-end-projects" type="checkbox" class="input-checkbox" />Back-end
</label>
</div>
<div class="form-group">
<p>Please provide any comments if we missed anything?</p>
<textArea id="comments" name="comment" placeholder="Place your comments here..."></textArea>
<div>
<div class="form-group">
<button type="submit" id="submit" class="submit-button">Submit</button>
<div>
</form>
</div>
</div>
<!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 newcomer in html code so that i have no huge knowledge about html coding.
When I use inline style, it seems to be working fine but the css code inside the head element doesn't show in the web page. The code seems fine to me. I've tried running this code in both Chrome and Firefox, but the problem persists in both of them. Please check my code & give me any advice or solution. Thanks.
fieldset: {
background: lightyellow;
border: 10px solid yellow;
margin-bottom: 10px;
width: 720px;
}
label: {
width: 180px;
}
<h1>Please Enter Your Details For Our Dating Website!</h1>
<form action="https://ihome.ust.hk/~rossiter/cgi-bin/show_everything.php" method="post">
<fieldset>
<legend>Your Face</legend>
<label for="image">Your image:</label>
<input type="file" name="image" required>
<br>
Image preview:
<img src="" id="preview">
</fieldset>
<fieldset>
<legend>Your General Details</legend>
<label for="name">Name:</label>
<input type="text" name="name" required>
<br>
<label for="gender">Gender:</label>
<input type="radio" name="gender" required>
Male
<input type="radio" name="gender" required>
Female
<br>
<label for="age">Age:</label>
<input type="number" name="age" required>
<br>
<label for="dob">Date of birth:</label>
<input type="date" name="dob">
<br>
<label for="color">Favorite color:</label>
<input type="color" name="color">
<br>
<label for="country">Which country:</label>
<select name="country">
<option value="no"></option>
<option value="en">England</option>
<option value="in">India</option>
<option value="jp">Japan</option>
<option value="sp">Spain</option>
<option value="us">USA</option>
</select>
</fieldset>
<fieldset>
<legend>Your Indicators</legend>
<label for="height">Height:</label>
Short
<input type="range" name="height" min="0" max="100">
Tall
<br>
<label for="salary">Salary:</label>
Poor
<input type="range" name="salary" min="0" max="100">
Rich
<br>
</fieldset>
<fieldset>
<legend>Your Contact Information</legend>
<label for="email">Email:</label>
<input type="email" name="email" required>
<br>
<label for="mobile">Mobile:</label>
<input type="tel" name="mobile">
<br>
<label for="address">Address:</label>
<textarea name="address"></textarea>
<br>
<label for="contact">Method to contact you:</label>
<input type="checkbox" name="contact">
Email
<input type="checkbox" name="contact">
Whatsapp
<input type="checkbox" name="contact">
In-app chat
</fieldset>
<input type="submit" name="Submit">
</form>
Remove this "colon :" from styles properties.
fieldset : {
Then others will work fine.
<!DOCTYPE html>
<html>
<head>
<title>Dating Web Site</title>
<style>
fieldset {
background: lightyellow;
border: 10px solid yellow;
margin-bottom: 10px;
width: 720px;
}
label {
width: 180px;
}
</style>
</head>
<body>
<h1>Please Enter Your Details For Our Dating Website!</h1>
<form action="https://ihome.ust.hk/~rossiter/cgi-bin/show_everything.php" method="post">
<fieldset>
<legend>Your Face</legend>
<label for="image">Your image:</label>
<input type="file" name="image" required>
<br>
Image preview:
<img src="" id="preview">
</fieldset>
<fieldset>
<legend>Your General Details</legend>
<label for="name">Name:</label>
<input type="text" name="name" required>
<br>
<label for="gender">Gender:</label>
<input type="radio" name="gender" required>
Male
<input type="radio" name="gender" required>
Female
<br>
<label for="age">Age:</label>
<input type="number" name="age" required>
<br>
<label for="dob">Date of birth:</label>
<input type="date" name="dob">
<br>
<label for="color">Favorite color:</label>
<input type="color" name="color">
<br>
<label for="country">Which country:</label>
<select name="country">
<option value="no"></option>
<option value="en">England</option>
<option value="in">India</option>
<option value="jp">Japan</option>
<option value="sp">Spain</option>
<option value="us">USA</option>
</select>
</fieldset>
<fieldset>
<legend>Your Indicators</legend>
<label for="height">Height:</label>
Short
<input type="range" name="height" min="0" max="100">
Tall
<br>
<label for="salary">Salary:</label>
Poor
<input type="range" name="salary" min="0" max="100">
Rich
<br>
</fieldset>
<fieldset>
<legend>Your Contact Information</legend>
<label for="email">Email:</label>
<input type="email" name="email" required>
<br>
<label for="mobile">Mobile:</label>
<input type="tel" name="mobile">
<br>
<label for="address">Address:</label>
<textarea name="address"></textarea>
<br>
<label for="contact">Method to contact you:</label>
<input type="checkbox" name="contact">
Email
<input type="checkbox" name="contact">
Whatsapp
<input type="checkbox" name="contact">
In-app chat
</fieldset>
<input type="submit" name="Submit">
</form>
</body>
</html>
This question already has answers here:
Justify elements with fix space (variable width)
(2 answers)
Closed 6 years ago.
I have designed the following HTML form :
div{
display: inline-block;
}
fieldset{
display: inline-block;
}
<body>
<form action="index.html" method="post">
<h1><center>FCNB Loan Request</center></h1>
<center>
<fieldset>
<div>
<label for="name">Branch Name and Code:</label>
<input type="text" id="name" name="user_name">
<label for="pfnumber">PF Number:</label>
<input type="text" id="name" name="pfnumber">
<label for="cpname">Contact Person Name:</label>
<input type="text" id="name" name="cpname">
<label for="cnumber">Contact Number:</label>
<input type="text" id="name" name="cnumber">
</div>
<hr> </hr>
<!-- Input Fields -->
<div>
<label for="customer">Customer:</label>
<input type="text" id="name" name="customer">
<label for="cif">CIF Number:</label>
<input type="text" id="name" name="cif">
<label for="dfgt">If exporter, mention DGFT No. : </label>
<input type="text" id="name" name="dfgt">
<label for="activity">Activity:</label>
<input type="text" id="name" name="activity">
</div>
<hr />
</fieldset>
</center>
</form>
</body>
The form elements are aligned in a centered manner without covering the width of the screen. I would like the form elements to be aligned in a "justified" manner, ie, to cover the width of the screen. How can this be done?
I have added the following snippet to the style:
form label, form input {
display: block;
margin-bottom: 10px;
}
This will make your label and input tag take the full width of browser and also add some margin bottom to it.
div{
display: inline-block;
}
fieldset{
display: inline-block;
}
form label, form input {
display: block;
margin-bottom: 10px;
}
<body>
<form action="index.html" method="post">
<h1><center>FCNB Loan Request</center></h1>
<center>
<fieldset>
<div>
<label for="name">Branch Name and Code:</label>
<input type="text" id="name" name="user_name">
<label for="pfnumber">PF Number:</label>
<input type="text" id="name" name="pfnumber">
<label for="cpname">Contact Person Name:</label>
<input type="text" id="name" name="cpname">
<label for="cnumber">Contact Number:</label>
<input type="text" id="name" name="cnumber">
</div>
<hr> </hr>
<!-- Input Fields -->
<div>
<label for="customer">Customer:</label>
<input type="text" id="name" name="customer">
<label for="cif">CIF Number:</label>
<input type="text" id="name" name="cif">
<label for="dfgt">If exporter, mention DGFT No. : </label>
<input type="text" id="name" name="dfgt">
<label for="activity">Activity:</label>
<input type="text" id="name" name="activity">
</div>
<hr />
</fieldset>
</center>
</form>
</body>
Hi change width:100% with form elements,
form label, form input {
width:100%;
}
div{
display: inline-block;
}
fieldset{
display: inline-block;
}
form label, form input {
width:100%;
}
<body>
<form action="index.html" method="post">
<h1><center>FCNB Loan Request</center></h1>
<center>
<fieldset>
<div>
<label for="name">Branch Name and Code:</label>
<input type="text" id="name" name="user_name">
<label for="pfnumber">PF Number:</label>
<input type="text" id="name" name="pfnumber">
<label for="cpname">Contact Person Name:</label>
<input type="text" id="name" name="cpname">
<label for="cnumber">Contact Number:</label>
<input type="text" id="name" name="cnumber">
</div>
<hr> </hr>
<!-- Input Fields -->
<div>
<label for="customer">Customer:</label>
<input type="text" id="name" name="customer">
<label for="cif">CIF Number:</label>
<input type="text" id="name" name="cif">
<label for="dfgt">If exporter, mention DGFT No. : </label>
<input type="text" id="name" name="dfgt">
<label for="activity">Activity:</label>
<input type="text" id="name" name="activity">
</div>
<hr />
</fieldset>
</center>
</form>
</body>