i managed to build this form using many sources over internet , and it actually works. But do not know if it is good against any breaks.
<form action="/some/server/some.cgi" method="POST">
<fieldset>
<legend>contact me:</legend>
<input type="hidden" name="recipient"
value="some#some.com">
<input type="hidden" name="subject"
value="message ">
<br>
<br>
<table>
<tr>
<td>
<input type="text" name="name"
placeholder="Your Name please" size="30"
maxlength="30" title="Your name (no numbers)"
pattern="[a-zA-Z]{2,30}" required>
</td>
</tr>
<tr>
<td>
<input type="email" value="email"
name="email" placeholder="Provide valid email please"
pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,3}$"
title="Your VALID email address" size="30"
maxlength="50" required>
</td>
</tr>
<tr>
<td>
<input type="text" name="message"
placeholder="Message" size="30" maxlength="200"
title="Long text is not allowed"
pattern="[a-zA-Z0-9\s]{5,200}" required>
</td>
</tr>
<tr>
<td>
<input type="submit" value="Send"
name="Submit">
</td>
</tr>
</table>
</fieldset>
</form>
i am new to regEx and would like to know any issues that can happen with this form. thanks
There is no One particular answer whether or not the form is secure. It always depends on the attacker's way of thinking .There many creative ways hackers can think of to bypass a particular form.
The main place to work on is Server-Side for security Not the
Client-Side because Client-Side HTML andJavaScript can be manipulated
any how.
Anyways,
You can refer to these links :
code.tutsplus.com/tutorials/secure-your-forms-with-orm-keys--net-4753"
www.youtube.com/watch?v=ATBdUB-aXko"
www.formstack.com/features/security
In the name field you cannot provide space because your regular expression won't allow it.. If you want to allow space please change the below pattern
[a-z A-Z]{2,30}
The regex will reject valid email addresses. Client side data validation provides no protection against someone trying to subvert your application. The "pattern" attribute is (from memory) a fairly recent addition and ignored by Safarai and older browsers.
What are your criteria for "secure".
Related
I am currently working on a html form. How do I set the minimum length of the password to 8 so that it will reject any password the user inputs that are less than 8. How to do this?
Here is the code:
<div id="login-form">
<form method="post">
<table align="center" width="30%" border="0">
<tr>
<td><input type="text" name="email" placeholder="Your Email" required /></td>
</tr>
<tr>
<td><input type="password" name="pass" placeholder="Your Password" required /></td>
</tr>
<tr>
<td><button type="submit" name="btn-login">Sign In</button></td>
</tr>
<tr>
<td>Sign Up Here</td>
</tr>
</table>
</form>
</div>
If you are using HTML5 you can use the pattern and required attributes for the input tag:
<input type="password" pattern=".{8,}" required title="8 characters minimum">
<input type="password" pattern=".{8,12}" required title="8 to 12 characters">
Also there is a minlength attribute for input tags but it does not work in some browsers:
<input type="password" minlength="8" required>
You can use the pattern attribute:
<input pattern=".{8,}" type="password" name="pass" placeholder="Your Password" required />
Change your button to :
<button name="btn-login">Sign In</button>
And add this code JavaScript (using jquery) :
$('button[name="btn-login"]').click(function() {
if($('input[name="pass"]').val().length < 8) {
alert('Minimum length = 8');
} else {
$('form').submit();
}
});
Dont forget to add this condition into your PHP code.
You could use minlength and maxlength
As usual, you can use the minlength and maxlength attributes to
establish minimum and maximum acceptable lengths for the password.
This example expands on the previous one by specifying that the user's
PIN must be at least four and no more than eight digits. The size
attribute is used to ensure that the password entry control is eight
characters wide.
Source
But it works on Chrome only at the moment.
Or, as someone already mentioned, you could use pattern.
If your application has character set restrictions or any other
requirement for the actual content of the entered password, you can
use the pattern attribute to establish a regular expression to be used
to automatically ensure that your passwords meet those requirements.
Source
Unfortunately, the minimum length attribute is not supported by the all browsers. Please check this out
Because of this, an alternate method has to used.
I've chosen the using of regex like the below;
<input type="password" name="pass" title="Password must be 8 characters including 1 uppercase letter, 1 lowercase letter and numeric characters" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" >
<input type="Password" name="pd" placeholder="Password" pattern=".{8,16}" title="8 or more Character" size=30 pattern="[!##$%^&*][a-z][A-Z][0-9]" required>
This code worked for me. Try this
I've reviewed this post and this post, but they work for me. Those posts are 4-5 years old, so perhaps the browser rules for this have changed or gotten more specific?
Here is the form for login. There is no ajax and no javascript of any kind. I've tried changing the the input name from usernameOrEmailAddress to username and that doesn't change anything.
<form method="post" name="loginForm" id="loginForm" action="login-check.php" autocomplete="on">
<table>
<tr>
<th>Username or Email Address</th>
<td><input autofocus type="text" name="usernameOrEmailAddress" value="" required></td>
</tr>
<tr>
<th>Password</th>
<td><input id="password" type="password" name="password" value="" required title="Password"></td>
</tr>
</table>
<div class='row'>
<input class="inputsubmit button" name="login" type="submit" value="Login" />
</div>
</form>
Neither Chrome nor Firefox prompt to save the password for next time. What am I doing wrong?
Most browsers will do this automatically as long it can detect a username and a password field. Here is a picture on my computer when I just copy and pasted your code.
If it doesn't work for you, clear your cache and cookies then attempt again. Also what browser(s) are you using?
This is a pure semantic question.
On my website, I have a guestbook in which you can post a comment and edit it. For posting or editing your comment, there are two very similar forms. Javascript will choose whether the form for posting or the form for editing will be visible (since all happens asynchronously). These are the two forms:
<form class="comment">
<h1>Comment</h1>
<label>Title: <input type="text" name="title" size="50" maxlength="60" /></label>
<label class="title_error error">Required.</label>
<label>Author: <input type="text" name="author_name" size="25" maxlength="35" /></label>
<textarea name="content" cols="60" rows="8" maxlength="1500"></textarea>
<label class="content_error error">Required.</label>
<input type="submit" value="Comment" onclick="return addComment($(this).parent());" />
</form>
<form class="edit">
<h1>Edit your comment</h1>
<label>Title: <input type="text" name="title" size="50" maxlength="60" /></label>
<label class="title_error error">Required.</label>
<label>Author: <input type="text" name="author_name" size="25" maxlength="35" /></label>
<textarea name="content" cols="60" rows="8" maxlength="1500"></textarea>
<label class="content_error error">Required.</label>
<input type="hidden" name="id">
<input type="submit" value="Edit" onclick="return editComment($(this).parent());" />
</form>
First off, I'd like to optimize these forms so that they are the best HTML5 semanticly. So What do you think, should everything within a form be wrapped in fieldset and why? Shouldn't h1 be legend or label? And the error messages, is it legit that they are now a label or should they rather be span?
But my main question is: since these forms are so similar, I could do three things with it:
keep the forms separate and make javascript hide one and show the other at the right time (as in the code above)
combine the forms in one form, giving some tags class="only_for_commenting" and others class="only_for_editing" (as in the code below)
combine the forms in one form, wrapping the tags in fieldsets according to when they should be shown (as in the code at the very bottom)
combined using classes:
<form>
<h1 class="only_for_commenting">Comment</h1>
<h1 class="only_for_editing" style="display:none;">Edit your comment</h1>
<label>Title: <input type="text" name="title" size="50" maxlength="60" /></label>
<label class="title_error error">Required.</label>
<label>Author: <input type="text" name="author_name" size="25" maxlength="35" /></label>
<textarea name="content" cols="60" rows="8" maxlength="1500"></textarea>
<label class="content_error error">Required.</label>
<input class="only_for_editing" type="hidden" name="id">
<input class="only_for_commenting" type="submit" value="Reageer" onclick="return addComment($(this).parent());" />
<input class="only_for_editing" type="submit" value="Wijzig" onclick="return editComment($(this).parent());" style="display:none;" />
</form>
combined using fieldsets: Edit: I've been conviced that this solution is the worst
<form>
<fieldset class="only_for_commenting">
<h1>Comment</h1>
</fieldset>
<fieldset class="only_for_editing">
<h1 style="display:none;">Edit your comment</h1>
</fieldset>
<fieldset class="for_both">
<label>Title: <input type="text" name="title" size="50" maxlength="60" /></label>
<label class="title_error error">Required.</label>
<label>Author: <input type="text" name="author_name" size="25" maxlength="35" /></label>
<textarea name="content" cols="60" rows="8" maxlength="1500"></textarea>
<label class="content_error error">Required.</label>
</fieldset>
<fieldset class="only_for_editing">
<input type="hidden" name="id">
<input type="submit" value="Wijzig" onclick="return editComment($(this).parent());" style="display:none;" />
</fieldset>
<fieldset class="only_for_commenting">
<input type="submit" value="Reageer" onclick="return addComment($(this).parent());" />
</fieldset>
</form>
So which option is the best semantically?
Edit: so I'm still thinking of three different solutions. I could have two separate forms (first block of code), or these two forms in different fieldset tags enclosed in one form tag, or I could have one combined form with classes for every input so javascript can hide one class and show the other (second block of code). In order to be able to choose between them, I'd like some advice. Which one of the three options is true:
The comment and edit form are two totally different forms semantically
The comment and edit form are different fieldsets of one same form
The comment and edit form are in fact to be seen as one and the same form
Well semantics is always debatable, but i think what you could try is that wrap both the forms in different field sets as the purpose of both the forms are different and according to me that is the point of semantics. You could give both the forms different class names and switch accordingly.
And regarding the error message query you should use a label as if a screen reader is in place its more likely to detect the error than a non-label element.
But as i said semantics are always debatable, you could at the end choose what makes more sense to you.
I'm working on a page where I have 2 textboxes.
I want to send the user inputs for these 2 mailboxes to my email but my code doesn't seem to work. Is there anything I've missed?
<form method="post" action="mailto:youremail#youremail.com" >
First:<input type="text" name="First" size="12" maxlength="12" />
Last:<input type="text" name="Last" size="24" maxlength="24" />
<input type="submit" value="Send Email" />
</form>
Your code is correct, it does work for me. It probably doesn't work for you because you don't have an email client, or your browser turns off this feature for security (or something like that). I would recommend that you use a service to perform this action such as http://www.braveapps.com/emailfwd/ or http://allforms.mailjol.net/.
I am using codeigniter. I have written simple from code with html5 validation.but its not working.its still go to the controller..This is my code.
<?php echo form_open('welcome/RigesterValue');?>
<h4> Rigesteration </h4>
<table border="2" align="center">
<tr><td><label>First name</td>
<td><input type="text" maxlength="20" id="First_name" name="First_name" required pattern="[A-Z ]+"></td></tr>
<tr><td><label>Last name</td>
<td><input type="text" maxlength="20" name="Last_name"></td></tr>
<tr><td><label>User name</td>
<td><input type="text" maxlength="20" name="User_name"></td></tr>
<tr><td><label>Password</td>
<td><input type="password" maxlength="20" name="Password"></td></tr>
<tr><td><label>Confirm Password</td>
<td><input type="password" maxlength="20" name="Confirm_Password"></td></tr>
<tr><td><label>Address</td>
<td><input type="text" maxlength="20" name="Address"></td></tr>
<tr><td><label>Cell number</td>
<td><input type="text" maxlength="20" name="Cell_number"></td></tr>
<tr><td><label>Email</td>
<td><input type="text" maxlength="20" name="Email"></td></tr>
<tr><td><Label>Status</Label></td>
</td></tr><br>
<tr><td align="center" colspan="2"><input type="Submit" value="Register"></td></tr>
</table>
<?php echo form_close();?
I have apply html5 validation on just first field ..Which is First_name..but still it go to the controller page.
CodeIgniter's own validation often does the trick. It's most safe since it will receive values, validate them and then process them.
Validation through the browser isn't reliable due to things like Firebug and so on. In the end I can easily post whatever values I want to your page, and if validation only covers HTML5 etc, your system won't know what hit it.
Always let your server validate everything, but you may aswell let some thing be done also inside your view. For instance, finding an unoccupied username can be a hazzle if you need to post every time just to hear that it's taken, therefor the part can be done through ajax that checks if username is taken or not and shows before submit.
If you get form_validation to work as intended, you probably won't see much need for more ways to validate your fields.