I have this form:
<form id="br" method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]) ?>">
<table>
<tr>
<td>Report Title:*</td> <td><input name="title" type="text" required placeholder="The bug that you want to report" size="50" maxlength="35" /></td><td></td>
</tr><br />
<tr>
<td>Reporter:*</td> <td><input name="user" type="text" required class="username" placeholder="Your name" size="50" maxlength="35"></td><td><input type="checkbox" name="anonymous" id="cb" /><label for="cb">Report anonymously</label></td>
</tr>
<tr>
<td style="vertical-align: top;">Report summary:* </td> <td><textarea name="sum" cols="39" rows="15" required id="sum"></textarea></td></td><td></td>
</tr>
<tr><td style="font-size:12px;"><em>* - required field</em></td><td></td><td></td></tr>
</table>
<br />
<div class="submitform"></div>
<br />
</form>
But the required fields won't validate, even if I put the required attribute to them. It would immediately submit the form without validating anymore...
ok , i got it
<div class="submitform"></div>
It should be
<input type="submit" name="submit" />
Related
It's my first time using HTML and would like to incorporate a checkbox that will enable or disable the "login" button if the user doesn't tick the checkbox to agree and enable the button when the box is tick.
<td>
<input style="width: 80px" name="username" type="text" value="$(username)" />
</td>
</tr>
<tr>
<td align="right" class="style6">Password</td>
<td>
<input style="width: 80px" name="password" type="password" />
</td>
</tr>
<tr>
<td> </td>
<td>
<input type="submit" name="submit" value="Login" />
</td>
</tr>
</table>
<div class="notice" style="color: #c1c1c1; font-size: 12px">
<br />
<input type="checkbox" name="checkbox" value="check" id="agree" />I agree to the statement above.
<br />
</div>
Just add the required attribute.
<form>
<input type="checkbox" name="1" value="1" required>
<input type="submit">
</form>
You can do it using a bit of javascript like this :
<input type="checkbox" name="checkbox" value="check" id="agree" onclick="if(this.checked){ document.getElementById('login').disabled=true; }else{ document.getElementById('login').disabled=false; }" />
You just have to give an ID to your submit button !
if you want to do it with javascript you can try this ( Use #Quention Solution in my opinion it's better )
document.getElementById("submit").disabled = true;
function agree() {
if (document.getElementById('agree').checked) {
document.getElementById("submit").disabled = false;
} else {
document.getElementById("submit").disabled = true;
}
}
<td><input style="width: 80px" name="username" type="text" value="$(username)" required/></td>
</tr>
<tr>
<td align="right" class="style6">Password</td>
<td><input style="width: 80px" name="password" type="password"/></td>
</tr>
<tr>
<td> </td>
<td><input id="submit" type="submit" name="submit" value="Login" /></td>
</tr>
</table>
<div class="notice" style="color: #c1c1c1; font-size: 12px"><br />
<input type="checkbox" name="checkbox" value="check" id="agree" onclick="agree()" required/> I agree to the statement above.
<br q v/>
</div>
I have read the other questions, but i cant seem to apply it to my problem.
In the validator it is giving me the problem 'The for attribute of the label element must refer to a form control'.
Can someone help me out? here is my code:
<h2>Contact Us</h2>
<form name="contactform" method="post"
action="http://dev.itas.ca/~christopher.allison/send_form_email.php">
<table>
<tr>
<td>
<label for="first_name">First Name *</label>
</td>
<td>
<input type="text" name="first_name" maxlength="50" size="30">
</td>
</tr>
<tr>
<td>
<label for="last_name">Last Name *</label>
</td>
<td>
<input type="text" name="last_name" maxlength="50" size="30">
</td>
</tr>
<tr>
<td>
<label for="email">Email Address *</label>
</td>
<td>
<input type="text" name="email" maxlength="80" size="30">
</td>
</tr>
<tr>
<td>
<label for="telephone">Telephone Number</label>
</td>
<td>
<input type="text" name="telephone" maxlength="30" size="30">
</td>
</tr>
<tr>
<td>
<label for="comments">Comments *</label>
</td>
<td >
<textarea name="comments" maxlength="1000" cols="25" rows="6"></textarea>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center">
<div class="buttonHolder">
<input value="Submit" title="submit" name="lucky" type="submit" id="btn_i">
</div>
</td>
</tr>
</table>
</form>
</div><!--close form_settings-->
The issue you have is that the for attribute must reference the id attribute of the input instead of the name:
<label for="first_name">First Name *</label>
<input type="text" id="first_name" name="first_name" maxlength="50" size="30">
You can still use the name attribute for whatever you want but to link label with input you need to add an id.
Check out label documentation.
I'm not sure what I'm missing here. I'm just trying to get the submit button to send the information to my email. What am I doing wrong? Sorry for all the table code, had to be a table for an assignment.
<form method="post" action="mailto:suzanne#nielsenwebdesigns.com" > <table width="478" align="center">
<tr>
<td width="166" style="font-family: 'Letter Gothic Std', 'Lithos Pro Regular', 'Mesquite Std', 'Trebuchet MS'">Name:
</td>
<td width="281">
<input name="name" type="text" required id="name" title="name" size="30">
</td>
</tr>
<tr>
<td>Email:
</td>
<td><input name="email" type="text" required id="email" title="email" size="30"></td>
</tr>
<tr>
<td>Phone:</td>
<td><input name="phone" type="text" id="phone" size="30"></td>
</tr>
<tr>
<td>Subject:</td>
<td><select name="subject" required id="subject" title="subject">
<option value="info">General Information</option>
<option value="web design">Web Design</option>
<option value="hosting">Hosting services</option>
<option value="logo design">Logo Design</option>
</select></td>
</tr>
<tr>
<td>How did you hear of us?</td>
<td>
<label>
<input type="radio" name="how did you hear" value="friend" id="howdidyouhear_0">
friend
</label>
<label>
<input type="radio" name="how did you hear" value="search" id="howdidyouhear_1">
search
</label>
<label>
<input type="radio" name="how did you hear" value="ad" id="howdidyouhear_2">
ad
</label>
</td>
</tr>
<tr>
<td>Message:</td>
<td><textarea name="message" cols="60" rows="15" id="message" title="message">
</textarea>
</td>
</tr>
<tr>
<td><input name="clear" type="image" id="clear" src="clear.png" alt="clear" /></td>
<td>
<input name="submit" type="image" id="submit" src="submit.png" alt="submit" value="send email" />
</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</form>
are you dutch? a lot of dutch people have that name ;) )
I think what you're trying to do is send information which is in an input field to your e-mail adress. You can do this using PHP and maybe some other solution, but i dont know them.
For sending the mail with php i would recommend using something like this:
first change the html to:
<form action="mail.php" method="post">
<textarea cols='40' rows='7' name='mailcontent'></textarea>
<input type="submit" value="Submit"/>
</form>
Then create a file called "mail.php" and add this code to it:
<?php
$mail_content = $_POST['mailcontent'];
$mail_subject = "a subject you like, can not be removed."
$mail_to = "suzanne#nielsenwebdesigns.com";
$mail = mail($mail_to, $mail_subject, $mail_content);
if($mail){echo "Success!";}else{echo "Something went wrong, please try again later.";}
?>
or if you just want to let please send a mail themselves i suggest you use this:
Click here to send me a mail
This is what the following code produces. Could someone please help me make the text line up with the textboxes on all screen sizes? Originally I wanted to set the height of each text to line it up with the textboxes, but then realized it wouldn't be lined up on different sized screens. Any help is appreciated.
<body>
<h1>Contact Us</h1>
<p>Please take a few moments to fill out our feedback form. It will help us to better address your needs. Thank you.</p>
<div id="mainLeft">
<table border="0" style="z-index: 1; position: inline; width: 440px; height: 334px; left: 0px; top: 0px;" width="644">
<tbody>
<tr>
<td height="40" scope="col" width="144"><strong><span class="style4"><span class="style5">Your Name:</span> </span></strong></td>
<td height="269" rowspan="10" scope="col" width="267">
<form action="send-form.php" id="form" method="post" name="form">
<p><input id="name" name="name" size="35" type="text" value="" /> </p>
<p><input id="email" maxlength="55" name="email" size="35" type="text" /></p>
<p><input id="address" maxlength="55" name="address" size="35" type="text" /></p>
<p><input id="city" maxlength="55" name="city" size="35" type="text" /></p>
<p><input id="state" maxlength="55" name="state" size="15" type="text" /></p>
<p><input id="zip" maxlength="55" name="zip" size="25" type="text" /></p>
<p><input id="telephone" maxlength="55" name="telephone" size="35" type="text" /></p>
<p><input id="fax" maxlength="55" name="fax" size="35" type="text" /></p>
<p><input id="feedback" maxlength="55" name="feedback" size="35" type="text" /></p>
<p><textarea cols="30" id="comments" name="comments" rows="7" wrap="virtual"></textarea></p>
<input name="Submit" onclick="MM_validateForm('email','','RisEmail','phone','','NisNum','comments','','R');ret​urn document.MM_returnValue" tabindex="1" type="submit" value="Submit" /> </form>
</td>
</tr>
<tr>
<td height="0" scope="col"><strong><span class="style6">Email Address: </span><br /></strong></td>
</tr>
<tr>
<td height="0" scope="col"><strong><span class="style6">Mailing Address: </span><br /></strong></td>
</tr>
<tr>
<td height="0" scope="col"><strong><span class="style6">City: </span></strong></td>
</tr>
<tr>
<td height="0" scope="col"><strong><span class="style6">State: </span></strong></td>
</tr>
<tr>
<td height="0" scope="col"><strong><span class="style6">Zip Code: </span></strong></td>
</tr>
<tr>
<td height="0" scope="col"><strong><span class="style6">Telephone: </span></strong></td>
</tr>
<tr>
<td height="0"scope="col"><strong><span class="style6">Fax: </span></strong></td>
</tr>
<tr>
<td height="0" scope="col"><strong><span class="style6">How did you hear about us?: </span></strong></td>
</tr>
<td scope="col"><span class="style6"><strong>Explanation of your legal situation: </strong></span><strong><span class="style4"> </span></strong></td>
</tr>
<tr>
<td align="right"> </td>
<td align="right" height="35"> </td>
<td align="left" height="35"> </td>
</tr>
</tbody>
</table>
</div>
</body>
Don't use tables for that... use something as simple as:
<label for="name">Your name:</label><input type="text" name="name" /><br />
<label for="email">Email address:</label><input type="text" name="email" /><br />
etc...
You might not even need the line breaks (<br />s) if you style everything properly with CSS.
You don't need tables here, but you can take a look at example below how to do this:
<html>
<body>
<h1>Contact Us</h1>
<p>Please take a few moments to fill out our feedback form. It will help us to better address your needs. Thank you.</p>
<div id="mainLeft">
<form action="send-form.php" id="form" method="post" name="form">
<table border="0" style="z-index: 1; position: inline; width: 440px; height: 334px; left: 0px; top: 0px;" width="644">
<tbody>
<tr>
<td scope="col" width="144"><strong><span class="style4"><span class="style5">Your Name:</span> </span></strong></td>
<td><input id="name" name="name" size="35" type="text" value="" /></td>
</tr>
<tr>
<td scope="col"><strong><span class="style6">Email Address: </span><br /></strong></td>
<td><input id="email" maxlength="55" name="email" size="35" type="text" /></td>
</tr>
<tr>
<td scope="col"><strong><span class="style6">Mailing Address: </span><br /></strong></td>
<td><input id="address" maxlength="55" name="address" size="35" type="text" /></td>
</tr>
<tr>
<td scope="col"><strong><span class="style6">City: </span></strong></td>
<td><input id="city" maxlength="55" name="city" size="35" type="text" /></td>
</tr>
<tr>
<td scope="col"><strong><span class="style6">State: </span></strong></td>
<td><input id="state" maxlength="55" name="state" size="15" type="text" /></td>
</tr>
<tr>
<td scope="col"><strong><span class="style6">Zip Code: </span></strong></td>
<td><input id="zip" maxlength="55" name="zip" size="25" type="text" /></td>
</tr>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Proper way to do this is:
<label for="test">Test</label>
<input type="text" name="test"/><br/>
Take a search/read some CSS tutorial to properly format your html.
Hope this help! :)
Try using a label with the for attribute.
This example would actually place a label next to your text field.
<label for="myField">foo</label>
<input type="text" name="myField" id="myField" />
You don't need table here.
Everyone's going nuts seeing tables for a form, but forgot to answer your question: A css property called vertical-align can be played around with to get everything aligned. In my example, I've set it to 'top'. But you can use pixels (positive and negative values) to change the alignment as well. e.g vertical-align: 1px; or vertical-align:-1px;
Anyways, You shouldn't use tables for this (especially the way you're using them). You can achieve the same thing quite simply using divs/spans/etc:
HTML (snippet from your attached code)
<form action="send-form.php" id="form" method="post" name="form">
<div class="fields">
<label>Your name:</label>
<span><input id="name" name="name" size="35" type="text" value="" /></span>
</div>
<div class="fields">
<label>Email Address:</label>
<span><input id="email" maxlength="55" name="email" size="35" type="text" /></span>
</div>
<div class="fields">
<label>Comments:</label>
<span><textarea></textarea></span>
</div>
</form>
CSS to style the above
.fields {width: 500px;}
.fields > label { display:inline-block; width:150px; font-weight:bold; vertical-align:top; }
.fields > span { display: inline-block; }
Preview: http://jsfiddle.net/JESqY/5/
Does this code contain anything invalid. I have a form with a table inside. Is that alright?
<form name="myForm" id="myForm">
<table id="myTab">
<tr>
<td>
<label for="id">User ID:</label>
<input type="text" id="id" />
</td>
</tr>
<tr>
<td>
<label for="pass">Password:</label>
<input type="password" id="pass" name="pass" />
</td>
<td>
<button type="button" class="submit">Submit</button>
</td>
</tr>
<tr><td><input type="reset" /></td></tr>
</table>
<div class="error"></div><div class="correct"></div>
</form>
For the result -- http://jsfiddle.net/mBwAh/
A <form> can contain text and markup (paragraphs, lists, etc.), there are no restrictions listed for what it can contain. Here's the W3C spec which says so:
http://www.w3.org/TR/html4/interact/forms.html#h-17.3
As for you're <table> usage, it's perfectly valid HTML, in fact the <table> element is in the HTML5 spec Here's the W3C Spec for that:
http://www.w3.org/TR/html5/tabular-data.html#the-table-element
You'll want to also add a colspan to your <tr> which only contains one <td>, You should also add a name attribute to your <input> as it won't do anything on submit without it.
<input type="text" id="id" name="id" />
You're not saying what the problem is, but one thing that catches the eye is the fact that you have differing numbers of tds per row without a colspan to even them out.
<tr>
<td colspan="2"> <--- makes column span across three columns in the other rows
<form name="myForm" id="myForm">
<table id="myTab">
<tr>
<td colspan="2">
<label for="id">User ID:</label>
<input type="text" id="id" />
</td>
</tr>
<tr>
<td>
<label for="pass">Password:</label>
<input type="password" id="pass" name="pass" />
</td>
<td colspan="2">
<button type="button" class="submit">Submit</button>
</td>
</tr>
<tr><td colspan="2"><input type="reset" /></td></tr>
</table>
<div class="error"></div><div class="correct"></div>
</form>
Some colspans were missing.
You can check the code for HTML5 validity here: http://validator.w3.org/#validate_by_input
This might be "Valid", but you're using a table structure for layout purpose, which is not a great idea. If possible, you should change your stucture to something like this.
<form name="myForm" id="myForm">
<label for="id">User ID:</label>
<input type="text" id="id" /><br />
<label for="pass">Password:</label>
<input type="password" id="pass" name="pass" /><br />
<button type="button" class="submit">Submit</button><br />
<input type="reset" /><br />
<div class="error"></div><div class="correct"></div>
</form>
Hope this help :)