Develop Reference

Text alignment without using table in html and css

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.

Opening a form in an iFrame instead of new window

Currently I have the following code.
<form method="get" id="searchform" action="/scraper/l.php?">
<div>
<input type="text" placeholder="Some Name Here" value="" name="n" id="n" style="padding: 7px; border: 1px solid #ddd;width: 75%;">
<input type="submit" id="searchsubmit" value="Index" class="btn" style="padding: 6px; color: #fff; background-color: #ed207b; border: 2px solid #ed207b;">
</div>
</form>
I am trying to make it so that it opens the path example.com/scraper/l.php?n=(Our ID) in an iFrame window on the same page appose to creating a new window.

based on your requirement, you can check whether the $_GET['n'] param is set when the page is loaded.(because you are submitting to the same page itself) if it is loaded, you can display the iframe. since you are using php, i will give you the exact code as follows.
<html>
<head>
</head>
<body>
<form method="get" id="searchform" action="/scraper/l.php?">
<div>
<input type="text" placeholder="Some Name Here" value="" name="n" id="n" style="padding: 7px; border: 1px solid #ddd;width: 75%;">
<input type="submit" id="searchsubmit" value="Index" class="btn" style="padding: 6px; color: #fff; background-color: #ed207b; border: 2px solid #ed207b;">
</div>
</form>
<?php
if(isset($_GET['n']) && !empty($_GET['n'])){
?>
<iframe src="http://www.google.com"></iframe>
<?php
}
?>
</body>
</html>

Remove disabled attribute using JQuery [duplicate]

This question already has answers here:
How to remove "disabled" attribute using jQuery?
(11 answers)
Closed 2 years ago.
I have tried following code given in JSFIDDLE...
But it is not working...
I want to Enable submit button only after filling all input fields....
JSFIDDLE
code tried :
<script>
(function() {
$('form > input').keyup(function() {
var empty = false;
$('form > input').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$('#register').attr('disabled', 'disabled');
} else {
$('#register').removeAttr('disabled');
}
});
})()
</script>

What you're looking for is:
$('#register').prop('disabled', true); //makes it disabled
$('#register').prop('disabled', false); //makes it enabled

First of all, listen input event instead of keyup, The DOM input event is fired synchronously when the value of an <input> or <textarea> element is changed(including paste using right-click etc.)
You are updating empty value for every element. If last element is having valid value, variable will be false. use the same variable as flag in .each loop and prevent loop for next occurrences if value is false
(function() {
$('form input').on('input', function() {
var empty = false;
$('form input').each(function() {
if (!empty && $(this).val() == '') {
empty = true;
}
});
$('#register').prop('disabled', empty);
});
})()
.link-button-blue {
font: bold 14px Arial;
text-decoration: none;
background-color: #EEEEEE;
color: #002633;
padding: 10px 16px 10px 16px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-o-border-radius: 6px;
cursor: pointer;
}
.link-button-blue:disabled {
font: bold 14px Arial;
text-decoration: none;
background-color: #333;
color: #ccc;
padding: 10px 16px 10px 16px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-o-border-radius: 6px;
cursor: no-drop;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form>
<div class="form-field-input">
<input type="submit" value="Go To Step 2" id="register" class="link-button-blue" disabled="disabled">
</div>
<div class="form-field-label">Full Name :</div>
<div class="form-field-input">
<input type="text" value="" name="fname" id="fname" required>
</div>
<div class="form-field-label">Address :</div>
<div class="form-field-input">
<textarea value="" name="address" id="address" rows="4" pattern=".{15,}" required title="15 characters minimum" required></textarea>
</div>
<br>
<div class="form-field-label">Email :</div>
<div class="form-field-input">
<input type="text" value="" name="email" id="email" required>
</div>
<br>
<div class="form-field-label">Mobile :</div>
<div class="form-field-input">
<input type="text" value="" maxlength="12" minlength="10" name="mobile" id="mobile" onkeypress="return isNumber(event)" required>
</div>
<br>
<div class="form-field-label">Phone :</div>
<div class="form-field-input">
<input type="text" value="" name="phone" id="phone" onkeypress="return isNumber(event)" required>
</div>
<div class="form-field-label">Fax :</div>
<div class="form-field-input">
<input type="text" value="" name="fax" id="fax" onkeypress="return isNumber(event)">
</div>
<div class="form-field-label">Birthdate :</div>
<div class="form-field-input">
<input type="text" name="birthdate" id="birthdate" placeholder="Click To Open Calendar" required>
</div>
<br>
<div class="form-field-label">Age :</div>
<div class="form-field-input">
<input type="text" value="" name="age" id="age" placeholder="Select Birthdate" required>
</div>
<br>
<div class="form-field-label">Select Questionnaire Catagary :</div>
<div class="form-field-input">
<label class="checkbox">
<input id="select_question_category-0" type="checkbox" name="select_question_category[]" value="General" />General</label>
<br>
<label class="checkbox">
<input id="select_question_category-1" type="checkbox" name="select_question_category[]" value="Stressfull Life Like - IT/BPO/Management" />Stressfull Life Like - IT/BPO/Management</label>
<br>
<label class="checkbox">
<input id="select_question_category-2" type="checkbox" name="select_question_category[]" value="Heredity of Cancer/Presently Suffering from Cancer/Suffered from Cancer" />Heredity of Cancer/Presently Suffering from Cancer/Suffered from Cancer</label>
<br>
<label class="checkbox">
<input id="select_question_category-3" type="checkbox" name="select_question_category[]" value="Heredity of Diabetes/Presently Suffering from Diabetes" />Heredity of Diabetes/Presently Suffering from Diabetes</label>
<br>
<label class="checkbox">
<input id="select_question_category-4" type="checkbox" name="select_question_category[]" value="Heredity of Heart Disease/Detected IHD/Suffered from Heart Attack" />Heredity of Heart Disease/Detected IHD/Suffered from Heart Attack</label>
<br>
</div>
<br>
<div class="form-field-label">Gender :</div>
<div class="form-field-input">
<select name="gender" id="gender" required>
<option value="">Select</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
<br>
<div class="form-field-label"></div>
</form>
Fiddle demo

$(document).ready(function() {
$('.input-field').change(function() {
var empty = false;
$('.input-field').each(function() {
$('#btn').addClass('disabled');
if($(this).val() == ''){
empty = false;
return false; //u need to break out from each
}
empty = true; //then u need to set value when it's out from each
});
if(empty == true) {
$('#btn').removeClass('disabled');
}
});
});
u need to break out from each,then u need to set value when it's out from each

Checking for empty fields on HTML form

I am trying to create a form in HTML, and also trying to ensure that any field is not left empty.
Here is the HTML for the form
<form role="form" id="companyDetails" name="companyDetails" method="post" action="saveCompanyDetails.jsp" onsubmit="return false;">
<div class="col-lg-6">
<div class="form-group">
<label>Company Name</label>
<input type="text" class="form-control" id="cmpname" name="cmpname">
<p id="cmpnameError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<div class="form-group">
<label>Description</label>
<textarea class="form-control" rows="3" id="desc" name="desc"></textarea>
<p id="descError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<div class="form-group">
<label>Url</label>
<input type="text" class="form-control" name="url" id="url">
<p id="urlError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<div class="form-group">
<label>Email Id</label>
<input type="text" class="form-control" name="emailid" id="emailid">
<p id="emailidError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<div class="form-group">
<label>Address</label>
<textarea class="form-control" rows="3" id="address" name="address"></textarea>
<p id="addressError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<h1>All Links <i class="fa fa-link"></i></h1>
<div class="form-group">
<label>Facebook Link</label>
<input type="text" class="form-control" name="fblink" id="fblink">
<p id="fblinkError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<div class="form-group">
<label>Twitter Link</label>
<input type="text" class="form-control" name="twlink" id="twlink">
<p id="twlinkError" style="display: none; color: red; font-weight: bold;"></p>
</div>
</div>
<!-- /.col-lg-6 (nested) -->
<div class="col-lg-6">
<div class="form-group">
<label>Linkedin Link</label>
<input type="text" class="form-control" name="linkinlink" id="linkinlink">
<p id="linkinlinkError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<div class="form-group">
<label>Download Link</label>
<input type="text" class="form-control" name="downlink" id="downlink">
<p id="downlinkError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<div class="form-group">
<label>Live Help Link</label>
<input type="text" class="form-control" name="livehelplink" id="livehelplink">
<p id="livehelpError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<div class="form-group">
<label>Terms & Condition Link</label>
<input type="text" class="form-control" name="tclink" id="tclink">
<p id="tclinkError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<div class="form-group">
<label>Promotion Link</label>
<input type="text" class="form-control" name="prolink" id="prolink">
<p id="prolinkError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<div class="form-group">
<label>Sign Up Link</label>
<input type="text" class="form-control" name="signuplink" id="signuplink">
<p id="signuplinkError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<div class="form-group">
<label>Affiliate Link</label>
<input type="text" class="form-control" name="affiliatelink" id="affiliatelink">
<p id="affiliatelinkError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<div class="form-group">
<label>Game Link</label>
<input type="text" class="form-control" name="gamelink" id="gamelink">
<p id="gamelinkError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<button type="submit" class="btn btn-default" onclick="submitData()"><i class="fa fa-check"></i>Submit</button>
<button type="reset" class="btn btn-default"><i class="fa fa-refresh"></i>Reset</button>
</div>
</form>
Notice that I have a <p> tag just below every input field, whose ID value is constructed from the ID of its corresponding input field. For eg. the <p> tag below text field cmpname is given ID cmpnameError
Now the JavaScript code for displaying the error message below the text field is given below
function submitData() {
var elements = document.querySelectorAll('#companyDetails input, #companyDetails textarea');
for (var i = 0; i < elements.length; i++) {
if (elements[i].value == "") {
var errorElementId = "#" + elements[i].id + "Error";
// alert("Generated ID is " + errorElementId);
document.getElementById(errorElementId).style.display = '';
document.getElementById(errorElementId).innerHTML = "Please enter a value for this field";
return false;
}
}
document.forms['companyDetails'].submit();
return true;
}
My problem is that the proper error message is not getting displayed on the form when I click submit.
Can anybody please help me regarding this? Thank you very much in advance.
Here is the JSFiddle link- https://jsfiddle.net/v8ooy2e1/

The pound sign is used to select elements with ids using querySelectorAll, but it shouldn't be used with getElementById.
Remove the pound sign here:
var errorElementId = "#" + elements[i].id + "Error";
Should be:
var errorElementId = elements[i].id + "Error";
Working Fiddle

You know, assuming IE 10+, you could skip all this javascript fanciness and just use the "required" attribute:
<input type="text" class="form-control" id="cmpname" name="cmpname" required>
That'll invoke the browser supported form validation.

Why do you have:
var errorElementId = "#" + elements[i].id + "Error";
Leave out the "#" sign.

If you can use jQuery
var isValid = true;
$("#companyDetails").submit(function(event) {
$("input").each(function() {
var element = $(this);
if (element.val() == "") {
isValid = false;
}
})
if (!isValid) {
alert("nopes");
}
});
FIDDLE

Bootstrap / CSS Input Form not centring

The Bootstrap input form isn't centring even though I have it setup to be.
Here's what it looks like:
Form Not Centering:
Proper Form
The red is the problem and the green is what I want. Here is the code.
CSS:
.form-control {
height: 50px;
width: 330px;
padding-left: 5px;
font-size: 20px;
font-family: 'Lato', sans-serif;
}
HTML:
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Enter email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email address">
</div>
<div class="form-group">
<button type="submit" class="btn">Early Access</button>
</div>
</form>
All help would be amazing, thank you.

Does this fix your problem?
Just added a wrapper around it:
#wrapper {
text-align:center;
}
.form-control {
margin: 0 auto;
}

How about something along those lines:
Wrap your stuff with a <div class="container">, centering everything.
Add an id to that same div and set the width to whatever you want.
Set the width of your button to 100%.
html:
<div class="container" id="myContainer">
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Enter email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email address" />
</div>
<br>
<div class="form-group">
<button id="earlyAccessBtn" type="submit" class="btn">Early Access</button>
</div>
</form>
</div>
css:
#myContainer {
width: 350px;
}
#earlyAccessBtn {
width: 100%;
}
DEMO