I am trying to make an html form and I have to replicate the following image:
I've done almost everything right but I can't get the positioning just right, specially on the submit button. What is the best to do this? and also how do I reposition the "message" caption next to the text box?
<style type="text/css">
form {
background-color: gray;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 20px;
width: 400px;
text-align:right;
}
#formElements{
width: 60%;
}
</style>
<body>
<form>
<div>
Name: <input type="text" name="name" id="formElements">
<p>
Email: <input type="email" name="email" id="formElements">
<p>
Message: <textarea name="message" id="formElements"> </textarea>
<p>
<input type="submit" id="button" value="send your message">
</div>
</form>
</body>
A few problems here:
1. Broken HTML
You have several places where the HTML is broken. Remember to always close your <p> tags, and close the <input> tags with a soft closing /> just for good practice.
2. Never use IDs in place of class
IDs are only ever meant to be assigned to one element. They are to be unique. If you want to assign some CSS to multiple elements, use a class:
.class
//Not
#id
3. Use Labels for text in forms
Not only can you style them independently, but you can use the for attribute to link them to your inputs.
4. Repaired CSS
I used some different CSS tricks, such as block-style display for the button to allow me to position it in the right spot.
form {
background-color: gray;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 20px;
width: 400px;
text-align:right;
}
.formElements {
width: 300px;
}
label {
display: inline-block;
vertical-align: top;
}
input[type="submit"] {
display: block;
margin-left: 95px;
}
5. Repaired HTML
Here it is. Always always always write proper HTML. It will save you a bunch of headaches.
<form>
<div>
<label>Name:</label>
<input type="text" name="name" class="formElements" />
<p>
<label>Email:</label>
<input type="email" name="email" class="formElements" />
</p>
<p>
<label>Message:</label>
<textarea name="message" class="formElements" rows="4"></textarea>
</p>
<p>
<input type="submit" id="button" value="send your message" />
</p>
</div>
</form>
Here is a JSFiddle that demo's the form for you.
I hope this helps.
Take a look at this.
There are a few things you should consider in your code:
Do Not use an ID more than once in a page, it must be specific to 1 element. Use classes instead to style multiple elements at once.
Use label tag to explain the form elements
Don't forget to close a container tag like p after opening it.
I would almost put it in a two columns table with the text on the left and the text boxes and button on the right.
I should look like this
<style type="text/css">
form {
background-color: gray;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 20px;
width: 400px;
text-align:right;
}
#formElements{
width: 100%;
}
.right {
text-align:right;
}
.wide {
width:300px;
}
</style>
<body>
<form>
<div>
<table>
<tr>
<td class="right">Name:</td>
<td class="wide"><input class = "wide" type="text" name="name" id="formElements"></td>
</tr> <tr>
<td class="right">Email:</td>
<td class="wide"> <input class="wide" type="email" name="email" id="formElements"></td>
</tr> <tr>
<td class="right">Message:</td>
<td class="wide"> <textarea class="wide" name="message" id="formElements"> </textarea></td>
</tr> <tr>
<td></td><td class="wide"><input type="submit" id="button" value="send your message"></td>
</tr>
</div>
</form>
</body>
Related
I want the two buttons "Upload File" and "New Catalog" stand right above the text "Catalog path: Main", but stay in the right side of the search form (like it looks like in the picture).
Putting a "margin top: 11em" or something like that does make the buttons move below (this is what I have done currently). But this doesn't make website look better: when you add a lot of tags on the search form the buttons are on the same place. Or when you resize the window the buttons keep a "too much distance" from search.
These two buttons are placed inside a <div id="upload-buttons>. In HTML file that comes after <div class="search"> which is the search table standing at the right side. Right after "upload-buttons" comes <div class="overview>. Both "upload-buttons" and "search" are placed in <div id="container>.
This is what I have written in the HTML code (it's a Twig template, but that's not that different from HTML):
<div id="container">
<div class="search">
{# <p>Today's date is: {{ object.date|date("Y-m-d") }}</p>#}
<table id="search-form">
<form method = "get">
<tr>
<th colspan="2">
<label>Search in file database </label>
</th>
<th colspan="2">
<label>Search by tags</label>
</th>
</tr>
<tr>
<td>
<br><input type="search" name="query" placeholder="Search" maxlength="45">
<br><button type="submit" name="search" value="search">Search</button>
</td>
<td>
<label for="start">Start date range:</label>
<br><input type="date" id="from date" name="from-date"
value=""
min="2020-03-01" max="">
<br><label for="end">End date range:</label>
<br><input type="date" id="to date" name="to-date"
value=""
min="2020-03-01" max="">
</td>
<td>
</td>
</form>
<form method = "get">
<td>
<br><input type="text" name="tags" data-role="tagsinput" placeholder="tag1,tag2,tag3">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="{{ rel }}js/dist/bootstrap-tagsinput.min.js"></script>
<br><button type="submit" name="search" value="tagssearch">Search</button>
</td>
<td>
<input type="checkbox" name="andcondition" value="1">
Check if you want each file to include all tags (AND condition)
</td>
</tr>
</form>
</table>
</div>
<div id="upload-buttons">
Upload File
New Catalog
</div>
</div>
<div class="overview">
<a id="catalogpath">
Catalog path: {{ catalogPath }}
</a>
And this is what I have written in CSS:
#container {
position: relative;
}
search {
float: right;
width: 45em;
height: fit-content;
background: midnightblue;
border-radius: 0.5em;
padding: 1em;
margin: 1em;
display: inline-block;
}
#search-form table {
vertical-align: top;
}
#search-form td, #search-form tr, #search-form th{
border-left: solid 0.5em transparent;
border-right: solid 0.5em transparent;
}
/*FILES AND OVERVIEW*/
#upload-buttons {
display: inline-block;
margin-top: 11em;
}
.overview {
clear: both;
}
#catalogpath {
font-size: 2em;
color: gold;
white-space: nowrap;
}
I have tried: to put "upload-buttons" inside "overview". It then appears right above the catalog path, but then they don't stay on the left side of the search forms.
I have tried vertical-alignment and vertical-align attributes on "upload-buttons" and "container" but they still stay on the same place.
How can I make the buttons stay right above (or almost right above the "catalog Path") but right side of the search forms without giving the button too big margin from any element above?
Try to make them position: absolute and write specific pixels from the top and left.
position: absolute;
top: ___px;
left: ___px;
I hope this helps.
so I am working to create this really simple website, but the problem that I keep facing is that when i put to things inside one div, I cant make them fit the container and when I zoom they keep going vertical, for example:
Here is the html:
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<div class="Form">
<form action="/action_page.php" method="post">
<fieldset class="Member">
<legend>Sign In</legend>
Sign in today for more experience <br><br>
<b>Email:</b> <br>
<input type="text" name="email" placeholder="Enter Email">
<br><br>
<b>Password:</b> <br>
<input type="password" name="password" placeholder="Password">
<br><br>
<input type="checkbox" name="remember" value="yes">remember me
<input type="submit" value="Log in">
</fieldset>
</form>
<fieldset class="Not_member">
<legend>Not a member ?</legend>
You can create an account:<br>
<i class="fa fa-sign-in" style="font-size:500%;color: grey;"></i>
</fieldset>
</div>
and here is my Css:
.Form{
border: 2px solid black;
background-color: white;
margin: 1px;
float: left;
width: 50%;
white-space: nowrap;
padding:0;
}
.Member {
width: 40%;
}
.Not_member {
width: 50%;
text-align: center;
}
fieldset {
margin:0;
float: left;
}
what i want to do is:
make each one fit half the container vertically and horizontally
make them stay horizontal and shrink with the container, so what i mean that when the window becomes smaller they become vertical, how can I stop that?
Edit: I want it like this: https://i.imgur.com/j27PQq4.jpg, and I want it to stop going down like this: https://i.imgur.com/DPwTwkD.jpg
thanks in advance
As long as your "Not a member?" is inside of its own div, you can use:
width: 100%;
and/or
height: 100%;
I have an example here: http://jsfiddle.net/3zSbt/
I don't know how I'd even up my input boxes with eachother...
Any help would be greatly appreciated.
HTML
<div id="contactContent">
<form>
Email: <input type="text" name="firstName">
<br>
Subject: <input type="text" name="lastName">
</form>
</div>
CSS
#contactContent { margin-top: 50px; margin-left: 300px;}
input { border: none; margin-left: 50px; margin-bottom: 30px; padding-right: 50px;}
There are many ways. One way is putting your value names in label. Example:
HTML
<label>Email:</label><input type="text" name="firstName" />
<br />
<label>Subject:</label><input type="text" name="lastName" />
CSS
label{
display:inline-block;
width:100px;
}
JSFiddle.
If you wanted to use HTML you could try putting it in a table, or if you just want to use CSS have you tried this;
input {
display:inline-block;
float:left;
}
I want to create a form so there is text on the left side and the inputs on the right, currently I am doing
<div id="labels">
<ul>
<li>The Label</li>
</ul>
</div>
<div id="inputs">
<ul>
<li><input type="text /></li>
</ul>
</div>
And the CSS
input[type=text] {
height: 14px;
}
#labels {
float: left;
}
#inputs {
float: right;
}
li {
padding-top: 4px;
padding-left: 10px;
}
// Text size is 14px
What happens is that the text and fields are not aligned perfectly (the inputs get progressively lower as I add items). I am thinking this is because not all the inputs can be 14px (I use drop downs, checkboxes, radios, etc.).
What would be the correct way to create this? I know a table would fix the problem but is that semantic?
This sort of question has been asked multiple times here in SO, you can do a simple search and find many solutions.
But here is a simple form to get you started:
HTML
<form>
<div class="line">
<label for="input">Full Name</label>
<div class="input">
<input type="text" size="30" name="input">
</div>
</div>
<div class="line">
<label for="input">Company</label>
<div class="input">
<input type="text" size="30" name="input">
</div>
</div>
<div class="line">
<label for="nselect">Dropdown Menu</label>
<div class="input">
<select name="select">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="line">
<label for="input">Text 1</label>
<div class="input">
<input type="text" size="30" name="input">
</div>
</div>
<div class="line">
<label for="input">Text 2</label>
<div class="input">
<input type="text" size="30" name="input">
</div>
</div>
<div class="line">
<label for="input">Text 3</label>
<div class="input">
<input type="text" size="15" name="input">
</div>
</div>
</form>
CSS
form {
margin:10px 0;
}
label {
color: #404040;
float: left;
font-size: 13px;
line-height: 18px;
padding-top: 6px;
text-align: right;
width: 130px;
}
label, input, select, textarea {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 13px;
font-weight: normal;
line-height: normal;
}
input, textarea, select {
-moz-border-radius: 3px 3px 3px 3px;
border: 1px solid #CCCCCC;
color: #808080;
display: inline-block;
font-size: 13px;
height: 18px;
line-height: 18px;
padding: 4px;
width: 210px;
}
select {
height: 27px;
line-height: 27px;
}
form .input {
margin-left: 150px;
}
form .line {
margin-bottom: 18px;
}
Here is a demo: http://jsfiddle.net/5aduZ/1/
A lot of people will not agree with my use of divs to separate the form elements but through testing i found this format to be the safest and surefire way to go about it as it separates the fields cleanly, and it works just fine under IE. Plus, it is the format used by the big boys (facebook, twitter, google).
It makes sense for the label to be next to the input in the HTML - it's easier to read and more maintainable. Typical HTML for this would be:
<div class="fieldWrapper">
<label for="something">Something</label>
<input type="text" id="something" name="something">
</div>
<div class="fieldWrapper">
<label for="something">Something</label>
<input type="text" id="something" name="something">
</div>
And CSS would be:
label, input {
float:left;
}
input {
font-size:14px;
padding: 2px; // instead of using fixed height
}
label {
width: 100px; // can use JavaScript if it needs to be dynamic
padding-top: 3px; // to make the label vertically inline with the input element
}
.fieldWrapper {
clear:left;
}
If you really can't change your HTML, you could set a CSS height on the <li> tag to fix the alignment problem. But I strongly recommend you to choose one of other proposed solutions, because your HTML is very hard to read in its current state. And you should use the <label> tag.
Write this <input type="text" name="firstname" /> and set the height width and padding
At my company, way back when we first started our first web application back in 2001, we used a table.
<table class="formTable">
<tbody>
<tr>
<td><label>Name:</label></td>
<td><input type="text" name="name" /></td>
</tr>
<tr>
<td><label>E-mail:/label></td>
<td><input type="text" name="email" /></td>
</tr>
</tbody>
</table>
And while this works, philosophically I don't like the approach, because as far as I am concerned, a table should hold table-ized data.
You could use CSS and DIV's, as well:
<style>
.formLabel, .formInput {
display:inline-block;
}
</style>
<div class="formField">
<div class="formLabel"><label>Name:</label></div>
<div class="formInput"><input type="text" name="name" /></div>
</div>
<div class="formField">
<div class="formLabel"><label>E-Mail:</label></div>
<div class="formInput"><input type="text" name="email" /></div>
</div>
See here: http://jsfiddle.net/9P7pg/
Or, you could avoid the use of div's all together, and just apply the display: inline-block for each label and input (or use classes). But then you will also have to remember to use a breaking space for carriage returns in between the label-field combination.
there is a special list for this actually! it's called definition list (dl) and is comprised of definition terms and definition definitions (dt/dd). i usually put the text in the dt and the input box in the dd. like this:
<form action="bla">
<dl>
<dt>Name*</dt>
<dd><input type="text" name="name" />
<dt>Email</dt>
<dd><input type="text" name="email" />
</dl>
<p><input type="submit" /></p>
</form>
I'm trying to take my Form layout away from tables and entering the world of div's and css.
I'm having difficulty though in my layout. I'd like to order the elements where a label is positioned directly above an input.
Here's what it currently looks like:
I'd like the District Label and Textbox to be vertically aligned, but they seem to be forming a stair pattern.
Here's the css:
#content
{
position: absolute;
top: 110px;
left: 350px;
width: 775px;
height: 605px;
}
#content label
{
display:inline;
margin-right:4px;
vertical-align:top;
}
#content input
{
float:left;
margin:1px 20px 1px 1px;
}
and the HTML:
<div id="content">
<label for="txt_RequestId">Request Id</label>
<input id="txt_RequestId" type="text" />
<label for="txt_District">District</label>
<input id="txt_District" type="text" />
</div>
nest the input elements in the labels so the text label and field are grouped.
this usage is specified in the HTML4 spec:
To associate a label with another control implicitly, the control element must be within the contents of the LABEL element. In this case, the LABEL may only contain one control element. The label itself may be positioned before or after the associated control.
<div id="content">
<label>
Request Id<br />
<input id="txt_RequestId" type="text" />
</label>
<label>
District<br />
<input id="txt_District" type="text" />
</label>
</div>
CSS:
#content
{
position: absolute;
top: 110px;
left: 350px;
width: 775px;
height: 605px;
}
#content label
{
display:inline;
float:left;
margin-right:4px;
vertical-align:top;
}
example
Then apply display:inline and float:left to the <label>s (or use display:inline-block instead if you don't have to worry about older browsers example)
Change this
#content input
{
float:left;
margin:1px 20px 1px 1px;
}
to this
#content input
{
display:inline;
margin:1px 20px 1px 1px;
}
That is remove the float:left and replace with display:inline;.
Example: http://jsfiddle.net/jasongennaro/ptKEh/
EDIT
#mdmullinax pointed out that the question also requested the text be above the input field
Missed that ;-)
In that case, remove the display rules and use three brs
<div id="content">
<label for="txt_RequestId">Request Id</label><br />
<input id="txt_RequestId" type="text" />
<br />
<label for="txt_District">District</label><br />
<input id="txt_District" type="text" />
</div>
Revised example: http://jsfiddle.net/jasongennaro/ptKEh/2/
I generally use tables for forms that are laid out like this. They are much easier to work with than CSS (IMO) and the structure is much more clear.
<table>
<tr>
<td>
<label for="txt_RequestId">Request Id</label>
<br /><input id="txt_RequestId" type="text" />
</td>
<td>
<label for="txt_District">District</label>
<br /><input id="txt_District" type="text" />
</td>
</tr>
</table>
CSS is very good for moving elements around with respect to their container. However when you want things to be positioned in a very regular way, dependent on other elements, it can really obfuscate the logic. <table>s are much more explicit about this.