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*/
}
Related
I am trying to create a form in my website for people to able to put phone number and submit the form. But when I type alphabets instead of numbers, it still accepted. Is there anyway I can check phone validation using Bootstrap 3?
Here is my code
<footer>
<hr>
<div class="container text-center">
<h3>Subscribe for special offer</h3>
<p>Enter your information</p>
<form action="" class="form-inline">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="Name" required="required">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" placeholder="Email" required="required">
</div>
<div class="form-group">
<label for="phone_no">Phone Number</label>
<input type="text" name="num" data-validation="number" data-validation-allowing="negative,number" input name="color" data-validation="number" datavalidation-ignore="$" required="required" class="form-control" id="phone_no" placeholder="Phone Number">
</div>
<button type="submit" class="btn btn-default">Subscribe</button>
<hr>
</form>
<!--End form-->
<hr>
</div>
<!--End Container-->
</footer>
You can use it using the pattern attribute. You can generate a pattern from this link.
HTML:
<form>
<h2>Phone Number Validation</h2>
<label for="phonenum">Phone Number (format: xxxx-xxx-xxxx):</label><br/>
<input id="phonenum" type="tel" pattern="^\d{4}-\d{3}-\d{4}$" required >
<input type="submit" value="Submit">
<p class="p">Demo by Agbonghama Collins. See article.</p>
</form>
CSS:
input[type="tel"] {
border: 1px solid #ddd;
padding: 4px 8px;
}
input[type="tel"]:focus {
border: 1px solid #000;
}
input[type="submit"] {
font-weight: bold;
padding: 4px 8px;
border:1px solid #000;
background: #3b5998;
color:#fff;
}
form {
width: 50%;
margin: 0 auto;
}
.p {
padding-top: 30px;
}
Fiddle here.
Bootstrap doesn't provide any form validation system.
You can use a little trick to allow only numbers or you can use one of the available JavaScript plugins (for example http://formvalidation.io/).
<input type="text" onkeypress="return event.charCode >= 48 && event.charCode <= 57" required>
<input type="text" name="num" data-validation="number"
data-validation-allowing="negative,number" input name="color"
data-validation="number" datavalidation-ignore="$" required="required" class="form-control"
id="phone_no" placeholder="Phone Number" maxlength="6" pattern="\d*">
While button is being clicked, it won't allow it to submit it, until it is 6 digit and numerical.
Change type="text" to type="number".
Also you can use Masks: https://igorescobar.github.io/jQuery-Mask-Plugin/
Is there a way to fix a form in such a way that the form does not fluctuate?
The desired shape of the form is:
The actual shape of the form fluctuates:
Here is the .css:
form {
background-color: white;
padding: 20px;
border: 1px solid black;
position: fixed;
top: 80%;
left: 50%;
transform: translate(-50%, -80%);
float: left;
}
#textarea-container {
float:right;
}
#inputs-container {
float: left;
width: 145px;
}
input[type=text] {
width: 100%;
}
input, textarea {
display: block;
}
textarea {
height: 100px;
width: 140px;
}
If you look at the .css, the form property for position is marked as fixed but the form still fluctuates.
Here is the HTML
<form name="contactform" method="post" action="mail.php">
<div id="textarea-container">
<textarea name="questions" placeholder="Questions" maxlength="1000" cols="25" rows="6"></textarea>
</div>
<div id="inputs-container">
<input type="text" name="first_name" placeholder="First Name">
<input type="text" name="last_name" placeholder="Last Name">
<input type="text" name="email" placeholder="Email">
<input type="text" name="telephone" placeholder="Telephone">
</div >
<input id="submit" type="submit" value="Submit">
</form>
Since you have floats on the two divs inside the form, you'll need to put a wrapper around them and set a fixed width, ie:
<form name="contactform" method="post" action="mail.php">
<div id="wrapper">
<div id="textarea-container">
<textarea name="questions" placeholder="Questions" maxlength="1000" cols="25" rows="6"></textarea>
</div>
<div id="inputs-container">
<input type="text" name="first_name" placeholder="First Name">
<input type="text" name="last_name" placeholder="Last Name">
<input type="text" name="email" placeholder="Email">
<input type="text" name="telephone" placeholder="Telephone">
</div >
</div>
<input id="submit" type="submit" value="Submit">
</form>
and
#wrapper{
width:250px;
}
I'm mocking up a Sharepoint Web Part in this fiddle and it currently looks like this (the second form has yet to be formatted/aligned, as you can see):
(even this, in addition to the ugly formatting on the second form, is not perfect, as the second form aligns a "row" below where I'd like it to be).
I'm using the exact same CSS and HTML on a Sharepoint Web Part, and it is considerably different:
I want the second form to the right, not below, the first form. The Sharepoint representation does not seem to restrict the form widths to allow this, though. Why the difference, and how can I make the Sharepoint Web Page more closely mimic the jsfiddle version?
Here is the code (again, exactly the same in both places):
CSS
.underline {
text-decoration: underline;
}
input[placeholder] {
font-size: 0.6em;
width: 500;
}
.firstblocklabel {
width: 160px;
display: inline-block;
margin: 2px;
}
.firstblockdatelabel {
width: 108px;
display: inline-block;
}
.firstblockinput {
width: 224px;
}
.dateinput {
width: 124px;
margin: 2px;
}
.timeinput {
width: 100px;
}
form {
display: inline-block;
vertical-align:top;
//float: left;
}
.borderedform {
border: 1px solid;
margin: 1em;
padding: 1em;
}
.reditalics {
color: red;
font-style: italic;
}
.wrappedlabel { width: 320px; display: block; }
HTML
<h2 class="underline">UCSC POST TRAVEL EXPENSE</h2>
<label>Form Filled Out:</label>
<input type="date" style="width=100px"></input>
<label>Access the Post Travel Guide for reimbursement validation</label>
<br/>
<br/>
<form>
<label class="firstblocklabel">Traveler's name:</label>
<input class="firstblockinput" type="text" id="travelername" title="Last Name, First Name, Middle Initial" />
<br/>
<label class="firstblocklabel">Traveler's E-mail:</label>
<input class="firstblockinput" type="email" id="traveleremail" />
<br/>
<label class="firstblocklabel">Traveler's Phone:</label>
<input class="firstblockinput" type="tel" id="travelerphone" />
<br/>
<label class="firstblocklabel">Traveler's Mail Stop:</label>
<input class="firstblockinput" type="text" id="travelermailstop" />
<br/>
<label class="firstblocklabel" id="travelerstreetorpoboxlabel">Traveler's Street or P.O.:</label>
<input class="firstblockinput" type="text" id="travelerstreetorpobox" />
<br/>
<label class="firstblocklabel">Traveler's Destinations:</label>
<input class="firstblockinput" type="text" id="travelersdestinations" />
<br/>
<label class="firstblocklabel">UC Business Purpose:</label>
<input class="firstblockinput" type="text" id="ucbusinesspurpose" />
<br/>
<label class="firstblockdatelabel">Departure Date:</label>
<input class="dateinput" type="date" id="travelersdeparturedate" />
<label>Time:</label>
<input class="timeinput" type="time" id="travelersdeparturetime" />
<br/>
<label class="firstblockdatelabel">Return Date:</label>
<input class="dateinput" type="date" id="travelersreturndate" />
<label>Time:</label>
<input class="timeinput" type="time" id="travelersreturntime" />
</form>
<form class="borderedform">
<label>Trip Number:</label>
<input type="text" id="tripnumber" title="If Applicable" />
<br/>
<label>Form prepared by:</label>
<input type="text" id="formpreparedby" />
<hr/>
<label>Dept / Division</label>
<input type="text" id="deptdivision" />
<br/>
<label>Email:</label>
<input type="email" id="email" />
<label>Ext:</label>
<input type="text" id="extension" />
<hr/>
<label class="reditalics">Required:</label>
<label>US Citizen - YES</label>
<input type="radio" id="uscitizenyes" value="YES" />
<label>NO</label>
<input type="radio" id="uscitizenno" value="NO" />
<br/>
<input type="radio" id="visitor" />Visitor
<label>Foreign Visa Type:</label>
<select title="Please select a visa type">
<option value="pleaseselect">Please Select</option>
. . .
</select>
<br/>
<input type="radio" id="ucstudent" />UC Student
<br/>
<input type="radio" id="ucemployee" />UC Employee
<label>UC Campus:</label>
<select title="Please select a campus">
<option value="pleaseselect">Please Select</option>
. . .
</select>
<br/>
<label class="wrappedlabel"><span style="color:red">Note: </span>If traveler chooses to include personal travel, record times/dates based only on the business portion of the trip. Provide explanation of personal travel.</label>
</form>
UPDATE
Adding Sully's CSS and HTML, the jsfiddle looks better, but the same additions to the Sharepoint Web Part don't change it at all there.
Maybe Sharepoint disallows multiple forms to be on the same "row"?
UPDATE 2
Unfortunately but not surprisingly, it looks different in Chrome (the other non-fiddle scream shot was IE):
Try making your forms float:left.
Bonus: for borderedform, use margin-left instead of just margin in order to remove that vertical space at the top.
CSS
.firstform { float: left; }
.borderedform {
float: left;
border: 1px solid;
margin-left: 1em;
padding: 1em;
}
To use that CSS, add class="firstform" to the first form.
http://jsfiddle.net/z8y6L303/
hello i'm creating a login form .but my check box and term text related to it not positioning correctly .i have add <br> tag but no effect .i tried clearfix it's not work either.here is the fiddle preview.
this is my html code
<div class="mainlog">
<form>
<label class="la" for="xname">Name</label><input name="xname" class="in" value="" type="text"><br>
<label class="la" for="xemail">Email</label><input name="xemail" class="in" value="" type="text"><br>
<label class="la" for="xpass">password</label><input name="xpass" class="in" value="" type="text"><br>
<label class="la" for="xpasscon">confirm</label><input name="xpasscon" class="in" value="" type="text"><br>
<input type="checkbox" name="term"/><label class="lb" for="term" >I have read and agree to the Terms of Use and the Privacy Policy</label><br>
<input type="submit" value="Sign Up" />
</form>
</div>
Wrap the checkbox and text in a div and float it left. Avoid the usage of <center> it will not be supported in HTML5
.mainlog {
width: 450px;
height: 250px;
border: 5px solid #DBDBDB;
border-radius: 5px;
padding: 20px;
}
.in {
padding: 8px;
border: 1px solid #DFDFDF;
width: 250px;
float: left;
margin-bottom: 10px;
border-radius: 5px;
}
.la {
width: 120px;
float: left;
text-align: left;
text-transform: uppercase;
color: #6B6B6B;
clear: both;
}
.lb {} .checkbox {
float: left;
}
}
<center>
<div class="mainlog">
<form>
<label class="la" for="xname">Name</label>
<input name="xname" class="in" value="" type="text">
<br>
<label class="la" for="xemail">Email</label>
<input name="xemail" class="in" value="" type="text">
<br>
<label class="la" for="xpass">password</label>
<input name="xpass" class="in" value="" type="text">
<br>
<label class="la" for="xpasscon">confirm</label>
<input name="xpasscon" class="in" value="" type="text">
<br>
<div class="checkbox">
<input type="checkbox" name="term" />
<label class="lb" for="term">I have read and agree to the Terms of Use and the Privacy Policy</label>
<br />
</div>
<input type="submit" value="Sign Up" />
</form>
</div>
</center>
Quick fix: wrapp checkbox with it's label into div with class "width".
Then in CSS add ".width" with styles: width:100%; clear:both.
.width{
width:100%;
clear:both;
}
Demo
I did a minor change in your code and it looks good to me. I am not sure if this is what you were looking for.
Please check the fiddle here.
These were the changes I made.
HTML:
<div class="lb"> <!-- added class "lb" to <div> and removed it from <label> -->
<input type="checkbox" name="term" />
<label for="term">I have read and agree to the Terms of Use and the Privacy Policy</label>
</div>
CSS:
.lb {
float:left; /* Floats the element to left */
}
I hope this works for you. :)
P.S. I have removed all the <br> tags inside the <form>
I am trying to style my form with labels and the label styles don't seem to work correctly.
Here is what my html looks like for the form:
<h1 class="allpages">Questions or Concerns about Compliance Issues?</h1>
<h3>We welcome all compliments and constructive criticism!</h3>
<form class="webform" action="http://hsc.unm.edu/scripts/cfmailform/cfmailer.cfm" method="post">
<!--Required hidden operators-->
<input name="recipient" type="hidden" value="bfloran#salud.unm.edu" />
<input name="subject" type="hidden" value="HSC Compliance Office Email Form" />
<input type="hidden" name="cc" value="mgwilson#salud.unm.edu" />
<input name="redirect" type="hidden" value="http://hsc.unm.edu/admin/compliance/ThankYOU.html" /> <!-- Field validation for the user -->
<!-- Our form in HTML -->
<label for "name">Your Name (optional):</label>
<br />
<input name="name" type="text" id="name" value="" /><br />
Your E-mail (Optional):<br />
<input name="mail" type="text" value="" />
<br /> comment:<br /> <textarea name="comment" value="" ></textarea><br /> <br /> <input type="submit" value="Send" /> <br /> <input type="reset" value="Reset" /></div>
My css for this part looks like this:
.allpages {text-align:center;color:#007a86;}
h3{text-align:center;}
.webform {background-color: #eeeeee;
width: 655px; border: solid;
border-color: #e9e9e9;margin-left: auto; margin-right: auto; padding: 15px 0px 15px 17px;}
.webform .label {display:inline-block; width:200px; vertical-align:top; text-align:right;}
label is not a class... it is a tag.
Working CSS for that piece:
.webform label { } /* see .label changed to label */
Also: Your elements were not laid out properly in HTML, some were not even labels.
Fixed fiddle: http://jsfiddle.net/digitalextremist/mt4jK/2/
Excerpt:
.webform label {
width:200px;
vertical-align:top;
text-align:right;
float: left
}
<label for="name">Your Name (optional):</label>
<input name="name" type="text" id="name" value="" />
You created a class selector to reference some tag with class=label