I have the HTML:
#container {
width: 600px;
max-width: 100%;
margin: 1em auto;
}
<div id="container">
<form>
<input type="text" id="text" placeholder="enter some text" required maxlength="10" pattern="^[a-z,A-Z]{1,10}$"><br />
<input type="number" id="number" placeholder="enter a number" required maxlength="10" pattern="\d{10}"><br />
<input type="submit">
</form>
</div>
When I enter a number with more than 10 digits in the 2nd field, and click Submit, as long as I have 1-10 letters in the first field, the form will be submitted.
I thought pattern="\d{10}" ensured the field had to have no more than 10 digits?
The problem is that the pattern attribute only works with the following input types:
date
email
password
search
tel
text
url
Because it doesn't work with number, your validation won't trigger.
To remedy this, I would reccomend using type="text" instead, as your pattern already explicitly requires a numeric input:
<!doctype html>
<html>
<head>
<style>
#container {width: 600px; max-width: 100%; margin: 1em auto;}
</style>
</head>
<body>
<div id="container">
<form>
<input type="text" id="text" placeholder="enter some text" required maxlength="10" pattern="^[a-z,A-Z]{1,10}$"><br />
<input type="text" id="number" placeholder="enter a number" required maxlength="10" pattern="^\d{10}$"><br />
<input type="submit">
</form>
</div>
</body>
</html>
You can use max="9999999999":
#container {
width: 600px;
max-width: 100%;
margin: 1em auto;
}
<div id="container">
<form>
<input type="text" id="text" placeholder="enter some text" required maxlength="10" pattern="^[a-z,A-Z]{1,10}$"><br />
<input type="number" id="number" placeholder="enter a number" required max="9999999999"><br />
<input type="submit">
</form>
</div>
Related
I'm doing a form where I want 3 input boxes to the left and to the right. Now, I copied the code from a past project of mine where it worked but now it wont work in this new project. I've tried every text-align and float I know about. I really don't know what to do anymore.
This is the code i have for this so far.
input[id=fname], input[id=lname], input[id=phone], input[id=city],i nput[id=email], input[id=birthday] {
width: 420px;
margin-bottom: 15px;
padding: 3px;
}
#left {
width: 40px;
display: inline-block;
box-sizing: border-box;
}
#right {
width: 440px;
display: inline-block;
float: right;
padding-left: 8px;
box-sizing: border-box;
}
<!doctype html>
<html>
<head>
<title>Employee Directory</title>
<link rel="stylesheet" type="text/css" href="css/Styles.css">
</head>
<body>
<div class="form">
<form method="post">
<div id="left">
<label>First Name</label>
<input id="fname" type="text" tabindex="1" >
<label>Phone</label>
<input id="phone" type="phone" tabindex="3">
<label>City</label>
<input id="city" type="text" tabindex="5">
</div>
<div id="right" class="box">
<label>Last Name</label>
<input id="lname" type="text" tabindex="2">
<label>Email</label>
<input id="email" type="email" tabindex="4">
<label>Birthday</label>
<input id="bday" type="date" tabindex="6">
</div>
</form>
</div>
</body>
</html>
You can simplify the HTML and CSS a lot here. Use display:grid to align everything:
form {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 9px 20px;
}
input {
display: block;
width: 100%;
}
<form class="form" method="post">
<label>First Name
<input name="fname" type="text">
</label>
<label>Last Name
<input name="lname" type="text">
</label>
<label>Phone
<input name="phone" type="phone">
</label>
<label>Email
<input name="email" type="email">
</label>
<label>City
<input name="city" type="text">
</label>
<label>Birthday
<input name="bday" type="date">
</label>
</form>
You should try to make it so your order of inputs is left to right down the page as tabbing from first name to Phone and then back up to last name is not very intuitive (Although fixed with tabindex this can be default).
Here is how I would do it.
input[id=fname], input[id=lname], input[id=phone], input[id=city],input[id=email], input[id=birthday] {
width: 50%;
margin-bottom: 15px;
padding: 3px;
}
#form_fields {
display:flex;
flex-wrap:wrap;
}
#form_fields label {
width:50%;
}
#form_fields label input {
width:50%;
}
<!doctype html>
<html>
<head>
<title>Employee Directory</title>
<link rel="stylesheet" type="text/css" href="css/Styles.css">
</head>
<body>
<div class="form">
<form method="post">
<div id="form_fields">
<label>First Name<br />
<input id="fname" type="text" />
</label>
<label>Last Name<br />
<input id="lname" type="text" />
</label>
<label>Phone<br />
<input id="phone" type="phone" />
</label>
<label>Email<br />
<input id="email" type="email" />
</label>
<label>City<br />
<input id="city" type="text" />
</label>
<label>Birthday<br />
<input id="bday" type="date" />
</label>
</div>
</form>
</div>
</body>
</html>
I have this HTML form that previously I had the width of the input fields to be 100% but I made some changes and did not know what caused the change.
<form action="/forms.php" method="post">
<div>
<input type="text" id="name" name="fullname" placeholder="Name" width:100%>
</div>
<div>
<textarea id="msg" name="message" placeholder="Description"></textarea>
</div>
<div>
<input type="text" name="emailaddress" placeholder="Email Address">
<input type="text" name="contactno" placeholder="Contact Number">
</div>
<input type="submit" name="send" value="Submit" id="subsubmit" class="btn2"/>
</form>
I have already added the following CSS in my HTML
.input {
width: 100%;
}
.textarea {
width: 100%;
}
.form {
width: 100%;
}
Fiddle link - https://jsfiddle.net/v83g4003/
input textarea form are HTML tags not a class. You have used . in css before HTML tags which indicates it as a class thats why your css is not working.
Just remove . in your css
Stack Snippet
input {
width: 100%;
}
textarea {
width: 100%;
}
form {
width: 100%;
}
<form action="/forms.php" method="post">
<div>
<input type="text" id="name" name="fullname" placeholder="Name" width:100%>
</div>
<div>
<textarea id="msg" name="message" placeholder="Description"></textarea>
</div>
<div>
<input type="text" name="emailaddress" placeholder="Email Address">
<input type="text" name="contactno" placeholder="Contact Number">
</div>
<input type="submit" name="send" value="Submit" id="subsubmit" class="btn2" />
</form>
Have a look at this edited jsfiddle: jsfiddle example
Also using width:100% as a html attribute will not work, in html you will need to do it like 'width="100%"'. Though using a CSS is better since it seperates your design from your logic (as you probably already knew)
I want to divide page horizontally in two parts. On upper part I want a form and on lower part I want an image. But it's not working. Please help me.
<!DOCTYPE html>
<html>
<head>
<title>JN DIAMONDS</title>
</head>
<style>
#upper {
height:50%;
}
#lower {
height: 50%;
background-image: r1.jpg;
}
</style>
<body>
<div id="upper">
<form align="center" method="POST" action="insert_rough.php">
<fieldset>
<legend>JN Patel <b>Rough Diamond</b> Information</legend>
<br>
<input type="text" name="fname" placeholder="Name" required><br><br>
<input type="text" name="twait" placeholder="Total Rough Weight"><br><br>
<input type="text" name="cprice" placeholder="1 Carat Price"><br><br>
<input type="text" name="dprice" placeholder="Dollar Rate"><br><br>
<input type="text" name="date" placeholder="Payment Days" required><br><br>
<input type="image" src="submit.jpg" alt="Submit" width="90" height="35"><br>
</fieldset>
</div>
<body>
<div id="lower"></div>
</body>
</form>
</body>
</html>
So I took out the extra body tag and added an image under the form. Here is a working codepen of what I think you want.
http://codepen.io/anon/pen/epeWYQ?editors=100
<!DOCTYPE html>
<html>
<head>
<title>JN DIAMONDS</title>
</head>
<style>
#upper {
height:50%;
}
#lower {
height: 50%;
background-image: r1.jpg;
}
</style>
<body>
<div id="upper">
<form align="center" method="POST" action="insert_rough.php">
<fieldset>
<legend>JN Patel <b>Rough Diamond</b> Information</legend>
<br>
<input type="text" name="fname" placeholder="Name" required><br><br>
<input type="text" name="twait" placeholder="Total Rough Weight"><br><br>
<input type="text" name="cprice" placeholder="1 Carat Price"><br><br>
<input type="text" name="dprice" placeholder="Dollar Rate"><br><br>
<input type="text" name="date" placeholder="Payment Days" required><br><br>
<input type="image" src="submit.jpg" alt="Submit" width="90" height="35"><br>
</fieldset>
</div>
<div id="lower"></div>
<img src="http://i.cdn.turner.com/asfix/repository//8a250ba13f865824013fc9db8b6b0400/thumbnail_8234390180613999969.jpg" alt="" />
</form>
</body>
</html>
You need an image tag which is why it’s not working if you're linking it to css use background: url(./img/r1.jpg) no-repeat; you need to change the img folder name to whatever the folder is called that you keep your images in.
I have two HTML forms. I want the second one to align to the right of the first one (not below it).
I fiddled (no pun intended) with "display: inline-block;"
The pertinent CSS:
.form {
display: inline-block;
}
The pertinent HTML:
<form>
<label class="firstblocklabel">Traveler's name:</label>
<input class="firstblockinput" type="text" id="travelername" title="Last Name, First Name, Middle Initial" />
</br>
. . .
</form>
<form>
<label>Trip Number:</label>
<input type="text" id="tripnumber" title="If Applicable" />
</br>
</form>
The whole shebang can be seen here.
Is the solution to place the two forms in a table, or is there a more elegant element solution?
Use float...
form {
float: left
}
Stick a float:right on the 2nd form to align it to the right side.
When you use inline-block a width must be defined as inline just say to browser that you don't want to jump to the next line.
a best practice is to have a container then for each element you want side-by-side you put a percent value corresponding to 100% divided by the number of columns. Example : 100% / 2 columns make columns of 50% each; 100% / 4 columns would make 25% each; etc.
make sure that you columns have padding/margin/border to 0 as it wouldn't work otherwise and if you need padding, place it in a child element inside the column element.
everythings is better with examples so here it is :
input{
width: 100%;
margin: 5px 0 0 -2px;
}
form{
/* we can add geometry to our form */
border: 4px solid #ddd;
margin: 6px;
padding: 10px;
}
.container{
padding: 0;
}
.col{
vertical-align: top;
display: inline-block;
padding: 0;
margin: 0;
border: none;
}
.col:hover{
/* just to see it */
box-shadow: 0 0 2px 0px red;
}
.col-half{
width: 50%;
}
.col-quater{
width: 25%;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.js"></script>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>example 1</h1>
<div class="container">
<div class="col col-half">
<form class="" action="index.html" method="post">
<h3>Some form...</h3>
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
</form>
</div><div class="col col-half">
<form class="" action="index.html" method="post">
<h3>Another form...</h3>
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
</form>
</div>
</div>
<h1>example 2</h1>
<div class="container">
<div class="col col-half">
<form class="" action="index.html" method="post">
<h3>1/2 form...</h3>
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
</form>
</div><div class="col col-quater">
<form class="" action="index.html" method="post">
<h3>1/4 form...</h3>
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
</form>
</div><div class="col col-quater">
<form class="" action="index.html" method="post">
<h3>Another 1/4 form...</h3>
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
</form>
</div>
</div>
</body>
</html>
Bonus:
Usually, frameworks works on a grid system : If we take bootstrap as an example, they work on a 12 col grid. meaning that if you use the class col-6 6 being half of 12 you get 50% width, and there goes for all other sizes. 12 is very flexible, the more cols your grid have, the more possibility it have (and the more css you must write) in my example, I made a gird of 4. we could rename col-half for col-2 and col-quater for col-1 so that makes sense as a grid system
First of all, you accidently used a .form class instead of using form for your selector.
Second, adding vertical-align: top to your form selector will allow it to align to the right of your first form as long as there is space.
form {
display: inline-block;
vertical-align:top;
}
However, if your view is too narrow it will slide underneath anyways.
You added a . (.form) means class selection but your html tag doesn't contain a class
So remove the . should make your form work correctly.
form {
vertical-align:top;
display:inline-block;
}
Try this :
form {
display: inline-block;
vertical-align:top; // Added
}
What about using Bootstrap and their helper classes to accomplish this? Especially if you already have Bootstrap loaded? Could use their grid to accomplish a 2 column layout.
I am new on here and would really appreciate some help, I am trying to format an input form with css however the the form has a text area that I need to format to the same as the rest of the form.
Here is what I have so far:
<div id="login">
<h2>Data Archive</h2>
<hr/>
<form action="" method="post">
<label>HDD Name :</label>
<input type="text" name="hdd_name" id="hdd_name" required="required" placeholder="Please enter HDD name"/><br /><br />
<label>Date Archived :</label>
<input type="text" name="date_archived" id="date_archived" required="required" placeholder="Date data was archived"/><br/><br />
<label>Project Name :</label>
<input type="text" name="project_name" id="project_name" required="required" placeholder="Project name"/><br/><br />
<label>Client :</label>
<input type="text" name="client" id="client" required="required" placeholder="Client name"/><br/><br />
<label>Archived by :</label>
<input type="text" name="archived_by" id="archived_by" required="required" placeholder="Name of person archiving data"/><br/><br />
<label>Editor :</label>
<input type="text" name="editor" id="editor" required="required" placeholder="Editor name"/><br/><br />
<label>Other information :</label>
<div class="textarea"><textarea name="other_information" id="other_information" wrap="virtual"/>Any other information</textarea><br/><br /> </div>
<input type="submit" value=" Submit " name="submit"/><br />
</form>
</div>
and the CSS:
textarea{
width: 290px;
height: 75px;
border-radius: 10px;
font-family:raleway;
border: 2px solid #ccc;
}
#login{
width:300px;
float: left;
border-radius: 10px;
font-family:raleway;
border: 2px solid #ccc;
padding: 10px 40px 25px;
margin-top: 70px;
}
Really hoping you can shed some light on this for me.
You need to give each item that you want to be the same a CSS class.
<input class="mytextboxes" type="text" ... />
<textarea class="mytextboxes" name="other_information" ... />Any other information</textarea>
Then you can use the CSS class like this:
.mytextboxes{
/* styling here */
}
Here's a tutorial from W3 schools to get you started.
http://www.w3schools.com/cssref/sel_class.asp
You can do the styling of inputs of type by using a CSS like this.
input[type="text"] {
/* Your styles*/
}