Block specify Email ID (jhonedoe#gmail.com) in HTML input field? - html

<form action="">
<label for="email"> Email </label>
<input type="email" id="email" name="email">
<input type="submit"> submit </input>
</form>
What pattern code I should write to validate to block a perticular email ?

Related

How to keep multiple buttons inline in a form?

I am creating a form using html and css.
But when I keep multiple buttons inside the form tag, they act as a submit button even though one out of it was used for going back. If I keep the another button outside the form tag then the button is placed at the new line but I want both the buttons in the same line.
<form action="login.php" method="POST">
<label class="label">
email:
<input type="email" name="email"
placeholder="example#gmail.com"
maxlength="40" required>
</label>
<label class="label">
password:
<input type="password" name="password"
required>
</label>
<input class="submit" type="submit">
</form>
<button>Back</button>
Help me in this.
by default buttons in a form is type submit, so all you need to do is change the type of the button to button (<button type="button">Back</button>).
like this:
<form action="login.php" method="POST">
<label class="label">
email:
<input type="email" name="email"
placeholder="example#gmail.com"
maxlength="40" required>
</label>
<label class="label">
password:
<input type="password" name="password"
required>
</label>
<input class="submit" type="submit">
<button type="button">Back</button>
</form>

"contact us" button and "reset fields" button doesn't redirect to links

I'm trying to make a "contact" button that doesn't allow you to submit until the required fields are filled, then redirects you to another html site. It currently doesn't allow you to submit correctly, but when the fields are filled it just resets the page instead of redirecting it. I think it's ignoring the "form action" part.
Also the reset button just doesn't work at all.
Does anyone see anything that might be the reason?
Thanks!
<form method="get">
<label>First Name: <input type="text" name="fmail" id="fmail" required="required" placeholder="your
first name"></label><br><br>
<label>Last Name: <input type="text" name="lmail" id="lmail" required="required" placeholder="your
last name"></label><br><br>
<label>E-mail: <input type="text" name="email" id="email" required="required" placeholder="your
email"></label><br><br>
<label for="comments">Comments:</label><br>
<textarea name="comments" id="comments" rows="4" cols="40" required="required"></textarea>
<br><br>
<form action="contact2.html" method="post">
<input type="submit" value="Contact" />
</form>
<form action="contactus.html">
<input type="reset">
</form>
</form>
Here's an image of what it looks like when you click contact without filling in the fields
https://i.gyazo.com/dc3a77b5eed0dbad2d6f6e2da1cf3075.png
Below is working code
<form method="post" action="/abc.html">
<label>First Name: <input type="text" name="fmail" id="fmail" required="required" placeholder="your
first name"></label><br><br>
<label>Last Name: <input type="text" name="lmail" id="lmail" required="required" placeholder="your
last name"></label><br><br>
<label>E-mail: <input type="text" name="email" id="email" required="required" placeholder="your
email"></label><br><br>
<label for="comments">Comments:</label><br>
<textarea name="comments" id="comments" rows="4" cols="40" required="required"></textarea>
<br><br>
<input type="submit" value="Contact"/>
<input type="reset">
</form>
Explanation:
All form-elements buttons, textarea, input should be wrapped in one form element.
you need to add form method as post and in action pass the URL of the page where you want to redirect after successful form submission.

How I can make a maximum length in a form?

I made this form:
<form>
Name:<br>
<input type="text" name="name">
Last mame:<br>
<input type="text" name="lastname">
Email:<br>
<input type="text" name="email">
Phone number:<br>
<input type="text" name="phone">
</form>
but I need only 9 numbers in Phone number.
How can i do this?
Then I need a form to chose a color something like this:
You can make a maximum length in a form with the maxlength attribute.
You can see this attribute in the example:
<form>
Phone number:<br>
<input type="text" name="phone" maxlength="9" >
</form>
2.You can make a form to chose the color with input type: color
<form>
Color:
<input type="color" name="color">
</form>

changing default browser value for attribute "required"

Is it possible to change default value of the attribute required that we add to an element in HTML?
For example:
<form action="" method="post">
<input type="email" name="signup-email" id="signup-email" placeholder="enter your email address" required />
<input type="submit" value="Notify Me" />
</form>
I do believe that the HTML code block you have given ought be as below:
<form action="" method="post">
<input type="email" name="signup-email" id="signup-email" placeholder="enter your email address" required="required" />
<input type="submit" value="Notify Me" />
</form>
And if you wanted to remove it completely:
<form action="" method="post">
<input type="email" name="signup-email" id="signup-email" placeholder="enter your email address" />
<input type="submit" value="Notify Me" />
</form>
Obviously as you have no URL address in the ACTION attribute of the form, the form will POST back to itself (ie. meaning the page it is hosted on, so if it was on your contact.aspx form it will post back to contact.aspx)

On clicking second username or password input box, cursor jumps to first

The 3 forms allow access as member, guest or then as newly registered.
However if someone clicks on the lower part of the form it automatically sends the cursor to the top part.
<form action="schlogin.php" method="post">
<fieldset>
<legend>Member's Login</legend>
<label for="username">Username:
<input type="text" name="username" id="username" value=""/>
</label>
</br>
<label for="password">Password:
<input type="password" name="password" id="password"/>
</label>
</br>
<input type="submit" name="login" class="loginButtons" value="login"/>
</label>
</br>
</fieldset>
</form>
<form action="schlogin.php" method="POST">
<fieldset>
<legend>Guest Player</legend>
<input type="submit" name="guest" class="loginButtons" value="Play as GUEST!" />
</label>
</br>
</fieldset>
</form>
<form action="schlogin.php" method="POST">
<fieldset>
<legend>FAST Register</legend>
<label for="username">Username:
<input type="text" name="username" id="username" value =""/>
</label>
</br>
<label for="password">Password:
<input type="password" name="password" id="password"/>
</label>
</br>
<label for="email">E-mail:
<input type="text" name="email" value=""/>
</label>
</br>
<input type="submit" name="register" class="loginButtons" value="I WANT TO PLAY TOO!"/>
</label>
</br>
I've forgotten my password:
<input type="submit" name="forgotten" class="loginButtons" value="Send me a new password!"/>
</label>
</br>
</fieldset>
</form>
Validate, validate, validate.
You have duplicate id attributes, so the labels in your second form are for the inputs in the first form.
In your second form change
<label for="username">Username:
<input type="text" name="username" id="username" value ="<?php if (isset($username)){echo $username; }?>"/></label></br>
to:
<label for="register_username">Username:
<input type="text" name="username" id="register_username" value ="<?php if (isset($username)){echo $username; }?>"/></label></br>
or whatever you like.
The point is that the id for every html element should always be unique. And the label element's for attribute should match it's associated input element's id attribute.