I'm trying to learn HTML and CSS and using the old-school approach by creating a login page with three input controls (two text and one button). However, I'm using <table></table> for the alignment issues of textboxes. But I've read somewhere that using tables is not considered a good approach. This is what I'm doing:
Home.html
<div>
<table>
<thead>
<tr><th><span>Login Page</span></th></tr>
</thead>
<tbody>
<tr>
<th><label>Username:</label></th>
<td><input type="text" value="" /></td>
</tr>
<tr>
<th><label>Password:</label></th>
<td><input type="text" value="" /></td>
</tr>
<tr>
<td><input type="button" value="Submit" /></td>
</tr>
</tbody>
</table>
</div>
However, I'm using some beginner stuff of CSS to align input controls without using tables and this is what I'm trying:
Home.html
<div class="box">
<span>Login Page</span>
<br />
<span>
<label>Username:</label>
<input type="text" value="" />
<br />
<label>Password:</label>
<input type="text" value="" />
<br />
<input type="button" value="Submit" />
</span>
</div>
style.css
.box {
margin: 10px 10px 10px 10px;
border: dotted 2px #fff;
width: 500px;
}
.box span:first-child {
border: dotted 1px;
margin-left: 30%;
font-family: Arial, sans-serif;
width: 50%;
}
.box span label:nth-of-type(odd)
{
color:blue;
font-family: Arial, sans-serif;
}
.box span label:nth-of-type(even)
{
color: red;
font-family: Arial, sans-serif;
display: inline-block;
}
My concern is using css, I'm able to align the input controls but I have to use multiple break tags (<br />) and also extra code for alignment which is easier by simply using the <table> tag. Can someone suggest me the standard approach and either I'm on the right path or not?
#iSahilSharma Please find following code without using table. I hope you were expecting the same. A part from it just a suggestion that start using Bootstrap framework instead of using custom coding.
.main_container{
width:100%;
}
.inner_box {
margin: 40px auto;
width: 30%;
}
.inner_box span{
clear: both;
display: block;
}
.inner_box span:first-child{
margin-bottom:10px;
}
.inner_box span:nth-child(n+2){
margin-bottom:20px;
}
<div class="main_container">
<div class="inner_box">
<span>Login Page</span>
<span>
<label>Username:</label>
<input type="text" value="" />
</span>
<span>
<label>Password:</label>
<input type="text" value="" />
</span>
<span>
<input type="button" value="Submit" />
</span>
</div>
</div>
Although tables are a very good approach for forms but I prefer the much shorter and easier method ie CSS tables
Here is a code:
form {
display: table;
}
p {
display: table-row;
}
label {
display: table-cell;
}
input {
display: table-cell;
}
<form>
<p>
<label for="a">Short label:</label>
<input id="a" type="text">
</p>
<p>
<label for="b">Very very very long label:</label>
<input id="b" type="text">
</p>
</form>
As a small addition to the things that are said already, I would recommend you to consider an option to use a separate container for a single form control and its label. Like this:
<form>
<div class="input-group">
<label for="name">Username:</label>
<input type="text" id="name" value="" />
</div>
<div class="input-group">
<label for="password">Password:</label>
<input type="text" id="password" value="" />
</div>
</form>
Perhaps, one might say this is redundant, but from my perspective, it gives you more control during positioning. On the other hand, Michael Seltenreich is making a good point. I still find tables used for forms in many places, although I'd prefer to keep away from this method.
P.S. In case you want to spread labels and inputs horizontally, you would probably want to use flexboxes.
Using table is not always good. One way to do is
<div class="form-wrap">
<h2>Login Form</h2>
<div class="form-field">
<label>User Name</label>
<input type="text" value="" />
</div>
<div class="form-field">
<label>Password</label>
<input type="text" value="" />
</div>
<input type="button" value="Submit" />
</div>
CSS:
.form-field label {
width: 80px;
display: inline-block;
}
.form-field {
margin-bottom: 10px;
}
link to codepen
Tables are not a good approach for many reasons, but tables ARE ideal for forms of the type you are trying to create.
Related
I am trying to make an HTML form, and I am trying to insert the "Plus" icon to the Input field. How would I do that, since I've already tried modifying it via CSS? Can someone help?
Also, I also want to create a "click" event which leads me to a secondary page where I can choose the Rooms and the capacity in my form, and go back once I am done with it. Any thoughts how I would do that?
This is my CSS Code:
*{
margin:0;
box-sizing: border-box;
padding:0px;
}
body{
height:100vh;
display: flex;
background-color: rgb(87,189,130);
}
.field-property,
.field-room,
.field-name-room,
.field-capacity,
.base-tariff{
position: relative;
top:30%;
left:100%;
}
.allinputs{
margin:10px;
padding:5px;
border-radius: 10px;
width:100%;
}
.client-form{
align-items: center;
justify-content: center;
display: flex;
}
This is my HTML Code:
<body>
<h1 class="client-form">Client Integration Form</h1>
<form>
<div class="field-property">
<label for="property Name">Property Name
<input type="text" class= "allinputs" name="name" placeholder="Property Name" required />
</label>
</div>
<div class="field-room">
<label for="rooms">Rooms
<input type="text" class="allinputs" name="name" placeholder="Rooms" required />
<div class="material-icon">
<i class="fa fa-plus-circle fa-2x" aria-hidden="true"></i>
</label>
</div>
</div>
<!-- Adding the Icon for Adding Rooms -->
<div class="field-name-room">
<label for="room Selected">Room Selected
<!-- Adding a Drop Down Value for the rooms -->
<select class="all inputs">
<option class="options">Pink Room</option>
<option class="options">Red Room</option>
<option class="options">Green Room</option>
</select>
</label>
</div>
<div class="field-capacity">
<label for="capacity">Capacity</label>
<input type="number" class="allinputs">
</div>
<div class="base-tariff">
<label for="base Tariff">Base Tariff of the Room:</label>
<input type="value" class="allinputs" name="name" placeholder="Base Tariff">
</div>
<!-- Yet to be decided how to integrate this -->
<!-- <div class="field-billing">
<label for="billing">Billing:</label>
</div>
<div class="field-phone">
<label for="phone Number">Phone Number</label>
<input type="number" class="allinputs">
</div>
</form>
</div>
</body>
</html>
To insert the '+' sign use a placeholder.
<input type="" id="" name="" placeholder="+">
A click event could be achieved by a simple hyperlink <a href=''>Example Hyperlink</a>
sorry for the question but i have problem with FadeIn() (and so with Jquery):
I have:
<div style="height:50px;width:700px">
<div id="Ipo" style="width: 100px;display:block; float: left; text-align:center; background-color:#ff0000; margin-left: 20%">
<input id="ipo" type="radio" name="eq" />
</div>
<div id="Time" style="width: 100px;display:block; float: left; text-align:center; background-color:#ffff00; margin-left: 31%">
<input id="time" type="radio" name="eq" />
</div>
with a form, i start a function in javascript, and in this function i would like to put this code:
$('#Ipo').hide().fadeIn(5000);
$('#Time').hide().fadeIn(5000);
but doesn't work :(
Thanks
i solved in this way:
This is html dom of buttons:
the first button (it is a button that i said in the first post is for form)
<div style="text-align:center">
<input id="ca" type="radio" onClick="start()"/>
</div>
And now the div that contains two div (with two buttons):
<div style="height:50px;width:700px">
<div id="Ipo" style="width: 100px;display:none; float: left; text-align:center; background-color:#ff0000; margin-left: 20%">
<input id="ipo" type="radio" name="eq" />
</div>
<div id="Time" style="width: 100px;display:none; float: left; text-align:center; background-color:#ffff00; margin-left: 31%">
<input id="time" type="radio" name="eq" />
</div>
</div>
And now the code:
$("#ca").click(start);
function start(){
$('#Ipo').fadeIn(2000);
$('#Time').fadeIn(2000);
}
In my first post there where two problems:
1) there was display:block;
2) i add in the code this line $("#ca").click(start);
Bye and thanks for the help ;)
I am trying to make a search bar. How can I make the "go" button and the search input be inline? I have put my code below, but I am not sure where the error is.
<div style="float:right;display:inline;">
<div>
<button class="ui-btn ui-corner-all ui-btn-inline ui-mini" style="margin:0 0 0
0;padding: 0 0 0 0;">GO!
</button>
<input name="searchword" id="search" value="" placeholder="Placeholder text..."
type="search" />
</div>
</div>
The code works fine.
If you want it to be exact, remove the sub-wrapping div, make the button 20px and use display: inline-flex; instead of inline. Maybe it will be what want
jQM wraps the input in a div. you can assign a css class to the wrapper using the data-wrapper-class attribute:
<div style="float:right;display:inline;">
<div>
<button class="ui-btn ui-corner-all ui-btn-inline ui-mini btnclass">GO!</button>
<input name="searchword" id="search" value="" placeholder="Placeholder text..." type="search" data-wrapper-class="inputWrap" />
</div>
</div>
.inputWrap {
display: inline;
float: left;
margin-right: 4px;
}
.btnclass {
margin-top: 8px;
height: 37px;
}
DEMO
I want to show a text like below in the html page, how to do this?
This is what I tried up to now.
<div class="filterleft" style="display: inline-block;">
<div id="filterleft_border" style="border-style:solid; border-width:1px;" >
<label class="category-label" for="category">Filter: </label>
<input type="checkbox" id="enableFilter"/>
<input type="search" id="filterValue" style="width: 50px"/>
</div>
</div>
I created a fiddle for this,
http://jsfiddle.net/KendoDev/kzf6257h/
But what I want is,
You'll have to use HTML <fieldset> and <legend> to make that work.Its really simpler to use it..See more about this in W3Schools
See the
fiddle
HTML
<div class="filterleft" style="display: inline-block;">
<fieldset id="filterleft_border" style="border-style:solid; border-width:1px;" >
<legend>Filter: </legend>
<input type="checkbox" id="enableFilter"/>
<input type="search" id="duration" style="width: 50px"/>
</fieldset>
</div>
If you dont want to use fieldset use it like below.
.category-label
{
position:absolute;
top:0px;
left:12px;
padding-left:3px;
padding-right:3px;
background:white;
}
DEMO
If you wanted it to be specifically the label that was positioned like the legend you could do:
http://jsfiddle.net/ahallicks/kzf6257h/5/
#filterleft_border {
padding: 10px;
position: relative;
}
.category-label {
background: #FFF;
left: 5px;
position: absolute;
top: -10px;
}
Note, the relative positioning will keep the label within the confines of the border in cae you needed to use it more than once.
It's a fieldset. I tried to change your code a little bit. Check it out.
<div class="filterleft" style="display: inline-block;">
<fieldset id="filterleft_border" style="border-style:solid; border-width:1px; border-radius:6px;" >
<legend style="font-family:Tahoma;font-size:11px;font-weight:bold">Filters: </legend>
<input type="checkbox" id="enableFilter"/>
<input type="search" id="duration" style="width: 150px"/>
</fieldset>
</div>
Here is the document in W3schools
In a form, I would like the input:text to fill the remain space after the label to the form is left and right justified.
The label have number of characters so I can't set a fixed width on the label.
Code example:
<fieldset>
<legend>User Info</legend>
<p><label>First Name :</label><input type="text"...></p>
<p><label>Last Name : </label><input type="text"...></p>
<p><label>Completed Email Address :</label><input type="text"...></p>
</fieldset>
How can I style the input to fill the remaining space after the text.
Thanks.
<!doctype html>
<html>
<head>
<style>
.grid { width: 100%; display: table; table-layout: auto; }
.row { display: table-row; }
label.cell { white-space: nowrap; display: table-cell; }
span.cell { width: 100%; display: table-cell; }
span.cell input { width: 100%; display: block; }
</style>
</head>
<body>
<fieldset>
<legend>User Info</legend>
<div class="grid">
<div class="row"><label class="cell">First Name:</label> <span class="cell"><input type="text" /></span></div>
</div>
<div class="grid">
<div class="row"><label class="cell">Last Name:</label> <span class="cell"><input type="text" /></span></div>
</div>
<div class="grid">
<div class="row"><label class="cell">Completed Email Address:</label> <span class="cell"><input type="text" /></span></div>
</div>
</fieldset>
</body>
</html>
Won't work in older browsers.
LE: if you don't need/want/have to support old browsers such as IE 6 and 7, use this code. Otherwise, use JavaScript. Ooor use this code an throw in some JavaScript for IE 6 and 7. Yeah, I think that's the best way to do it :D
I posted this in a comment first, but was advised to post as an answer instead. This is not a CSS solution, but a table-based one. However, it should work on all browsers (though I didn't test this). span inside label's td is needed to workaround IE's bug of not applying white-space: nowrap to table cells.
<table width="100%">
<tr>
<td width="1"><span style="white-space: nowrap;">First name:</span></td>
<td><input style="width:100%"/></td>
</tr>
</table>
<table width="100%">
<tr>
<td width="1"><span style="white-space: nowrap;">Last name:</span></td>
<td><input style="width:100%"/></td>
</tr>
</table>
<table width="100%">
<tr>
<td width="1"><span style="white-space: nowrap;">Completed Email Address:</span></td>
<td><input style="width:100%"/></td>
</tr>
</table>
You can try using floats for the left (or right) side, and "block formatting context"ifying the right side items.
Read about block formatting contexts in css at the YUIblog
Fiddle: http://jsfiddle.net/uS3Cv/1/