I'm trying to change the alignment of specific columns of text to the right. Tried using class and it does not work. I even tried to use id element and it does not work either.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf=8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Book Ordering System</title>
</head>
<style>
.top-bottom {
background-color: skyblue;
}
.total_column {
background-color: silver;
}
.all:hover {
background-color: yellow;
}
</style>
<body>
<h1>Book Ordering System</h1>
<table border="2">
<form method="post" action="file.php">
<tr style="font-weight:bold" ; class="top-bottom all">
<td>No.</td>
<td>Book Title</td>
<td>Author</td>
<td>Category</td>
<td>Unit Price</td>
<td>Quantity</td>
<td>Total</td>
</tr>
<tr class="all">
<td>1</td>
<td>
<label for="sec1"></label>
<input type="text" name="sec1" id="sec1" value="" />
</td>
<td>
<label for="sec1.1"></label>
<input type="text" name="sec1.1" id="sec1.1" value="" />
</td>
<td>
<select name="category" id="category">
<option value="choose">Please choose the category...</option>
<option value="biz">Business</option>
<option value="fiction">Fiction</option>
<option value="maths">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td>
<label for="sec1.2"></label>
<input type="text" name="sec1.2" id="sec1.2" value="0.00" />
</td>
<td>
<label for="sec1.3"></label>
<input type="text" name="sec1.3" id="sec1.3" value="0" />
</td>
<td>
<label for="sec1.4"></label>
<input type="text" name="sec1.4" id="sec1.4" value="0.00" readonly="readonly" class="total_column" />
</td>
</tr>
<tr class="all">
<td>2</td>
<td>
<label for="sec1"></label>
<input type="text" name="sec1" id="sec1" value="" />
</td>
<td>
<label for="sec1.1"></label>
<input type="text" name="sec1.1" id="sec1.1" value="" />
</td>
<td>
<select name="category" id="category">
<option value="choose">Please choose the category...</option>
<option value="biz">Business</option>
<option value="fiction">Fiction</option>
<option value="maths">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td>
<label for="sec1.2"></label>
<input type="text" name="sec1.2" id="sec1.2" value="0.00" />
</td>
<td>
<label for="sec1.3"></label>
<input type="text" name="sec1.3" id="sec1.3" value="0" />
</td>
<td>
<label for="sec1.4"></label>
<input type="text" name="sec1.4" id="sec1.4" value="0.00" readonly="readonly" class="total_column " />
</td>
</tr>
<tr class="all">
<td>3</td>
<td>
<label for="sec1"></label>
<input type="text" name="sec1" id="sec1" value="" />
</td>
<td>
<label for="sec1.1"></label>
<input type="text" name="sec1.1" id="sec1.1" value="" />
</td>
<td>
<select name="category" id="category">
<option value="choose">Please choose the category...</option>
<option value="biz">Business</option>
<option value="fiction">Fiction</option>
<option value="maths">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td>
<label for="sec1.2"></label>
<input type="text" name="sec1.2" id="sec1.2" value="0.00" />
</td>
<td>
<label for="sec1.3"></label>
<input type="text" name="sec1.3" id="sec1.3" value="0" />
</td>
<td>
<label for="sec1.4"></label>
<input type="text" name="sec1.4" id="sec1.4" value="0.00" readonly="readonly" class="total_column" />
</td>
</tr>
<tr class="all">
<td>4</td>
<td>
<label for="sec1"></label>
<input type="text" name="sec1" id="sec1" value="" />
</td>
<td>
<label for="sec1.1"></label>
<input type="text" name="sec1.1" id="sec1.1" value="" />
</td>
<td>
<select name="category" id="category">
<option value="choose">Please choose the category...</option>
<option value="biz">Business</option>
<option value="fiction">Fiction</option>
<option value="maths">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td>
<label for="sec1.2"></label>
<input type="text" name="sec1.2" id="sec1.2" value="0.00" />
</td>
<td>
<label for="sec1.3"></label>
<input type="text" name="sec1.3" id="sec1.3" value="0" />
</td>
<td>
<label for="sec1.4"></label>
<input type="text" name="sec1.4" id="sec1.4" value="0.00" readonly="readonly" class="total_column" />
</td>
</tr>
<tr class="all">
<td>5</td>
<td>
<label for="sec1"></label>
<input type="text" name="sec1" id="sec1" value="" />
</td>
<td>
<label for="sec1.1"></label>
<input type="text" name="sec1.1" id="sec1.1" value="" />
</td>
<td>
<select name="category" id="category">
<option value="choose">Please choose the category...</option>
<option value="biz">Business</option>
<option value="fiction">Fiction</option>
<option value="maths">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td>
<label for="sec1.2"></label>
<input type="text" name="sec1.2" id="sec1.2" value="0.00" />
</td>
<td>
<label for="sec1.3"></label>
<input type="text" name="sec1.3" id="sec1.3" value="0" />
</td>
<td>
<label for="sec1.4"></label>
<input type="text" name="sec1.4" id="sec1.4" value="0.00" readonly="readonly" class="total_column" />
</td>
</tr>
<tr class="top-bottom all">
<td colspan="5" align="right"><input type="button" onclick="alert('Hello World!')" value="Calculate Grand Total Price"> </td>
<td colspan="2" align="right"><input type="text" name="sec3.1" id="sec3.1" value="0.00" readonly="readonly" /></td>
</tr>
</form>
</table>
</body>
</html>
Result:
The text you are trying to align is inside input fields. You want to align the text instead of the input fields.
td.align-right input {
text-align: right;
}
And then apply class="align-right" to all the td's you want to align right.
Related
I was making a dummy form page but my tag is not working, it puts everything in one row. Why is it so? Also placeholders in my drop down menu doesn't seem to be working, I want to show a text that says "day" "month" "year" when birthday section appear on screen. Thanks in advance
<!DOCTYPE html>
<html>
<head>
<title>Register</title>
</head>
<body>
<h1>Register</h1>
<form>
<table>
<tr>
<label for="firstName"><b> First Name: <input id="firstName" type="text" name="firstName" required></b></label>
<label for="lastName"><b> Last Name: <input id="lastname"type="text" name="lastName" required></b></label>
</tr>
<tr>
<label for="male"><b>Male <input id="male" type="radio" name="gender"></b></label>
<label for="female"><b>Female <input id="female" type="radio" name="gender"></b></label>
<label for="other"><b>Other <input id="other" type="radio" name="gender"></b></label>
</tr>
<tr>
<label for="email"><b> Email: <input id="email" type="email" name="email" placeholder="email" required></b></label>
<label for="password"><b> Password: <input id="password"type="password" name="password" minlength="5" maxlength="10" placeholder="password" required></b></label>
</tr>
<tr>
<label>Birthday:</label>
<select name="day" placeholder="day">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
</select>
<select name="month" placeholder="month">
<option>jan</option>
<option>feb</option>
<option>mar</option>
<option>apr</option>
<option>may</option>
<option>jun</option>
<option>jul</option>
<option>aug</option>
</select>
<select name="year" placeholder="year">
<option>1992</option>
<option>1882</option>
<option>1986</option>
<option>2016</option>
<option>2009</option>
<option>1973</option>
<option>1642</option>
<option>1558</option>
</select>
</tr>
<tr>
Agree to this text
<input type="checkbox" name="Agree" required>
</tr>
<tr>
<button>Go</button>
</tr>
</table>
</form>
</body>
</html>
You are having invalid html markup for <table>, the <td> tag within each row is mandatory.
<!DOCTYPE html>
<html>
<head>
<title>Register</title>
</head>
<body>
<h1>Register</h1>
<form>
<table>
<tr>
<td>
<label for="firstName"><b> First Name: <input id="firstName" type="text" name="firstName" required></b></label>
<label for="lastName"><b> Last Name: <input id="lastname"type="text" name="lastName" required></b></label>
</td>
</tr>
<tr>
<td>
<label for="male"><b>Male <input id="male" type="radio" name="gender"></b></label>
<label for="female"><b>Female <input id="female" type="radio" name="gender"></b></label>
<label for="other"><b>Other <input id="other" type="radio" name="gender"></b></label>
</td>
</tr>
<tr>
<td>
<label for="email"><b> Email: <input id="email" type="email" name="email" placeholder="email" required></b></label>
<label for="password"><b> Password: <input id="password"type="password" name="password" minlength="5" maxlength="10" placeholder="password" required></b></label>
</td>
</tr>
<tr>
<td>
<label>Birthday:</label>
<select name="day" placeholder="day">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
</select>
<select name="month" placeholder="month">
<option>jan</option>
<option>feb</option>
<option>mar</option>
<option>apr</option>
<option>may</option>
<option>jun</option>
<option>jul</option>
<option>aug</option>
</select>
<select name="year" placeholder="year">
<option>1992</option>
<option>1882</option>
<option>1986</option>
<option>2016</option>
<option>2009</option>
<option>1973</option>
<option>1642</option>
<option>1558</option>
</select>
</td>
</tr>
<tr>
<td>
Agree to this text
<input type="checkbox" name="Agree" required>
</td>
</tr>
<tr>
<td>
<button>Go</button>
</td>
</tr>
</table>
</form>
</body>
</html>
I am trying to make the select option wider but I cant get it to work. I have tried with width but it didn't work for me. I also couldn't find anything on the internet.
I hope somebody can help me.
This is my HTML:
<form action="" method="post">
<legend>Neem contact op</legend>
<table>
<tr>
<td>
<label for="Naam">Naam: </label>
</td>
<td>
<input type="text" id="Naam" name="Naam" placeholder="Naam" required="required" />
</td>
</tr>
<tr>
<td>
<label for="Email">Email :</label>
</td>
<td>
<input type="email" id="Email"name="Email" placeholder="Email" required="required" />
</td>
</tr>
<tr>
<td>
<label for="Seizoen">Seizoen: </label>
</td>
<td>
<select name="Seizoen" id="Seizoen" required>
<option value="">Kies hier je seizoen</option>
<option value="Lente">Lente</option>
<option value="Zomer">Zomer</option>
<option value="Herfst">Herfst</option>
<option value="Winter">Winter</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">
<hr />
</td>
</tr>
<tr>
<td>
<label for="benodigheden1">Benodigheden:</label>
</td>
<td>
<input type="text" id="benodigheden1"name="benodigheden1" placeholder="Benodigheden" required="required" />
</td>
</tr>
<tr>
<td>
<label for="ingrediënten1">Ingrediënten:</label>
</td>
<td>
<input type="text" id="ingrediënten1"name="ingrediënten1" placeholder="Ingrediënten" required="required" />
</td>
</tr>
<tr>
<td>
<label for="stappenplan">Stappenplanm:</label>
</td>
<td>
<textarea name="stappenplan" id="stappenplan" cols="40" rows="5" placeholder="Stappenplan" required="required" /></textarea>
</td>
</tr>
<tr>
<td colspan="2">
<hr />
</td>
</tr>
<tr>
<td>
<label for="Opmerking">Opmerking:</label>
</td>
<td>
<textarea name="Opmerking" id="Opmerking" cols="40" rows="5" placeholder="Opmerking" required="required" /></textarea>
</td>
</tr>
<tr>
<td>
</td>
<td>
<div class="submit"><input type="submit" value="Verzenden" name="Verzenden" /></div>
</td>
</tr>
</table>
Here is a link to JSFiddle.
See this fiddle
You have to add the below CSS for styling the select
select{
width: 300px;
}
The best option is to try padding like;
select{
padding: 20px;
}
Here is the demo..
i'm having trouble centering my checkboxes and radio buttons within a td. Ideally I would want the radio buttons to be left of the label, but it just hasn't been working the way I want it.
Here is a fiddle:
http://jsfiddle.net/3s4pcu3w/
Current CSS:
#justification {
display: none;
}
#public-school-eligibility {
text-align: center;
position: static;
}
#public-school-eligibility input, select {
margin-top: 0px;
width: 55px;
margin: 5px;
}
#public-school-eligibility td {
vertical-align: text-top;
text-align: center;
}
html:
<div class='container'>
<div class='content'>
<div id='public-school-eligibility'>
<div class='span12'>
<table border='5'>
<thead class='te'>
<tr>
<th>School Name</th>
<th>School #</th>
<th>Grade Code</th>
<th>School Type</th>
<th>Neglected and Delinquent</th>
<th>New School</th>
<th>Reported 2014-2015 Number of Children </th>
<th>Reported 2014-2015 Number of Children</th>
<th>Reported 2014-2015 Percent of Children</th>
<th>2014-2015 Number of Children</th>
<th>2014-2015 Number of Children</th>
<th>2014-2015 Percent of Children</th>
<th>Selection Code*</th>
<th>Select for Split-Funding</th>
<th>Program Type</th>
<th>2014-2015 </th>
<th>2014-2015 </th>
<th>Community</th>
<th>Parental </th>
</tr>
</thead>
<form action="/school_eligibility_data" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓" /><input type="hidden" name="authenticity_token" value="BRbQ4QP4N8DnudJDKiYmFGTboURhv+xr6rIGEl7YTXsnb44HK9NGT9WsHTo9yhAMEdQKa7qhirMB+ryZJSsvXA==" /> <tr class='school' data-id='2035' id='school_2035'>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td></td>
<input value="3" autosave="true" data-attribute="public_school_eligibility_survey_id" type="hidden" name="school_eligibility_data[public_school_eligibility_survey_id]" id="school_eligibility_data_public_school_eligibility_survey_id" />
<input value="2035" autosave="true" data-attribute="school_id" type="hidden" name="school_eligibility_data[school_id]" id="school_eligibility_data_school_id" />
<td>
<input id="children_attending_2035" autosave="true" data-percentage="true" data-attribute="children_attending" class="low-income-percentage" data-id="2035" type="number" value="318" name="school_eligibility_data[children_attending]" />
</td>
<td>
<input id="children_from_low_income_2035" autosave="true" data-percentage="true" data-attribute="children_from_low_income" class="low-income-percentage" data-id="2035" type="number" value="305" name="school_eligibility_data[children_from_low_income]" />
Use 1.6 Multiplier
<input type="checkbox" name="multiplier" id="test" value="1" />
</td>
<td>
<div class='percentage' id='percentage_2035'>
99
</div>
</td>
<td>
<div autosave class='selection_code' data-attribute='selection_code' data-id='2035' id='select_2035'>
<select name="school_eligibility_data[selection_code]" id="school_eligibility_data_selection_code"><option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option selected="selected" value="E">E</option>
<option value="F">F</option>
<option value="G">G</option>
<option value="H">H</option>
<option value="I">I</option>
<option value="J">J</option>
<option value="K">K</option>
<option value="L">L</option></select>
</div>
</td>
<td>
<div class='center'>
<input name="school_eligibility_data[split_funding]" type="hidden" value="false" /><input id="split_funding_2035" data-attribute="split_funding" type="checkbox" value="true" checked="checked" name="school_eligibility_data[split_funding]" />
</div>
</td>
<td>
<label for="program_type_SW">Sw</label>
<input name="program_type_2035" class="program_type" data-attribute="program_type" type="radio" value="SW" id="school_eligibility_data_program_type_sw" />
<br>
<label for="program_type_TA">Ta</label>
<input name="program_type_2035" class="program_type" data-attribute="program_type" type="radio" value="TA" id="school_eligibility_data_program_type_ta" />
<br>
<label for="program_type_N/A">N/a</label>
<input name="program_type_2035" class="program_type" data-attribute="program_type" type="radio" value="N/A" id="school_eligibility_data_program_type_na" />
</td>
<td>
<input id="per_pupil_allocation_2035" autosave="true" data-attribute="per_pupil_allocation" type="number" value="33" name="school_eligibility_data[per_pupil_allocation]" />
</td>
<td></td>
<td>
<input id="community_eligibility_provision_2035" autosave="true" data-attribute="community_eligibility_provision" type="number" value="333" name="school_eligibility_data[community_eligibility_provision]" />
</td>
<td>
<input id="parental_involvement_reservations_2035" autosave="true" data-attribute="parental_involvement_reservations" type="number" value="33" name="school_eligibility_data[parental_involvement_reservations]" />
</td>
<tr>
<td class='justification' colspan='12' data-id='2035' id='justification_2035'>
* You have selected one of the following Selection Codes: E, F, H, K, or L. Provide a justification below.
<textarea autosave="true" data-attribute="justification" name="school_eligibility_data[justification]" id="school_eligibility_data_justification">
</textarea>
</td>
</tr>
</tr>
Remove this width:55px from #public-school-eligibility input, select and put this in your css code
#public-school-eligibility td p{
display:inline;
}
I used p tag, but you may use label too instead.
Here is the jsfiddle http://jsfiddle.net/3s4pcu3w/5/
Problem is: I have form with radio buttons in it. One radio button checked as default. When I check another one and push apply button i have $_POST with duplicated properties but different values:
country: 55
country: 72
second one is previous checked value. Expected only one propertie.
I can't understand why this happens.
<div id="countries">
<table>
<tr>
<td>
<input name="country" type="radio" value="14" id="country_14" checked="checked"/> <label for="country_14">Austria</label>
</td>
<td>
<input name="country" type="radio" value="117" id="country_117"/> <label for="country_117">Latvia</label>
</td>
</tr>
<tr>
<td>
<input name="country" type="radio" value="21" id="country_21"/> <label for="country_21">Belgium</label>
</td>
<td>
<input name="country" type="radio" value="123" id="country_123"/> <label for="country_123">Lithuania</label>
</td>
</tr>
<tr>
<td nowrap>
<input name="country" type="radio" value="33" id="country_33"/> <label for="country_33">Bulgaria</label>
</td>
<td nowrap>
<input name="country" type="radio" value="124" id="country_124"/> <label for="country_124">Luxembourg</label>
</td>
</tr>
</table>
</div>
probably the POST was an array POST, like:
<form action="." method="POST">
<input value="val1" name="name[0]">
<input value="val2" name="name[1]">
<input type="sumbit" value="Submit">
</form>
Hi? I'm a university student of Korea,
and this semester I'm studying internet programming.
I made html, and I made tag.
However I think that there is problem in my tag.
In fact I hardly effort to find problem, but I cannot find that.
Experts!!!Please find the problem!!!!
This is my form tag.
<html>
<head></head>
<body>
<form name="firstForm" action="http://kisschks.hosting.paran.com/noname2.php">
<table width=500 border=1>
<tr>
<td width=100>이름</td>
<td><input name="name" type="text" size="15"></td>
</tr>
<tr>
<td>비밀번호</td>
<td><input type="password" name="password" size="20" maxlength="15"></td>
</tr>
<tr>
<td>학번</td>
<td><input type="text" name="schoolnum" size="21"></td>
</tr>
<tr>
<td>전화번호</td>
<td><select name="fst">
<option value="010" selected>010</option>
<option value="011">011</option>
<option value="016">016</option>
<option value="017">017</option>
<option value="018">018</option>
<option value="019">019</option>
</select> - <input name="sec" type="text" size="4" maxlength="4"> - <input name="trd" type="text" size="4" maxlength="4">
</td>
</tr>
<tr>
<td>캠퍼스</td>
<td>
<input type="radio" name="campus" value="명륜">명륜
<input type="radio" name="campus" value="율전" checked>율전
</td>
</tr>
<tr>
<td>학년</td>
<td>
<input type="checkbox" name="year" value="1학년" checked>1학년
<input type="checkbox" name="year" value="2학년">2학년
<input type="checkbox" name="year" value="3학년">3학년
<input type="checkbox" name="year" value="4학년">4학년
<input type="checkbox" name="year" value="휴학">휴학
</td>
</tr>
<tr>
<td>고향</td>
<td><textarea name="고향" rows=3 cols=20>
</textarea>
</td>
</tr>
<tr>
<td>하고픈말</td>
<td><textarea name="intro" rows=3 cols=20></textarea></td>
</tr>
<tr>
<td colspan=2 align="center">
<input type="button" value="안씁니다" disabled>
<input type="reset" value="다시작성">
<input type="submit" value="등록">
</td>
</tr>
</table>
</form>
</body>
</html>
You have not mentioned your problem exactly but I do find charset meta missing for the Korean language you are using on the form:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Interesting Resources:
What Beautiful HTML Code Looks Like
Fix Your Site With the Right DOCTYPE!
One thing that might be relevant is that you haven't specified either method="POST" or method="GET" in your form tag. Though if you're using $_REQUEST in your php it shouldn't matter either way.
Well, you didn't say what your code was doing wrong or what you expected but didn't get... but...
Go to:
http://validator.w3.org/#validate_by_input
and paste your code in there. It turns out the <head> element cannot be empty. Don't just take my revision below, you really should read the output of the Validator to understand what kind of changes needed to be made in order to achieve valid HTML.
Here is valid code that should work:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
hello
</title>
</head>
<body>
<form id="firstForm" action="http://kisschks.hosting.paran.com/noname2.php">
<table width="500" border="1">
<tr>
<td width="100">
이름
</td>
<td>
<input name="name" type="text" size="15" />
</td>
</tr>
<tr>
<td>
비밀번호
</td>
<td>
<input type="password" name="password" size="20" maxlength="15" />
</td>
</tr>
<tr>
<td>
학번
</td>
<td>
<input type="text" name="schoolnum" size="21" />
</td>
</tr>
<tr>
<td>
전화번호
</td>
<td>
<select name="fst">
<option value="010" selected="selected">
010
</option>
<option value="011">
011
</option>
<option value="016">
016
</option>
<option value="017">
017
</option>
<option value="018">
018
</option>
<option value="019">
019
</option>
</select> - <input name="sec" type="text" size="4" maxlength="4" />- <input name="trd" type="text" size="4" maxlength="4" />
</td>
</tr>
<tr>
<td>
캠퍼스
</td>
<td>
<input type="radio" name="campus" value="명륜" />명륜 <input type="radio" name="campus" value="율전" checked="checked" />율전
</td>
</tr>
<tr>
<td>
학년
</td>
<td>
<input type="checkbox" name="year" value="1학년" checked="checked" />1학년 <input type="checkbox" name="year" value="2학년" />2학년 <input type="checkbox" name="year" value="3학년" />3학년 <input type="checkbox" name="year" value="4학년" />4학년 <input type="checkbox" name="year" value="휴학" />휴학
</td>
</tr>
<tr>
<td>
고향
</td>
<td>
<textarea name="고향" rows="3" cols="20">
</textarea>
</td>
</tr>
<tr>
<td>
하고픈말
</td>
<td>
<textarea name="intro" rows="3" cols="20">
</textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="안씁니다" disabled="disabled" /><input type="reset" value="다시작성" /><input type="submit" value="등록" />
</td>
</tr>
</table>
</form>
<p>
html form ta
</p>
</body>
</html>
Note that in the <html> tag, it specifies English as the language. I suspect that is not the correct language, but you can fix that yourself once you get everything else working.
Good luck with your studies.