This is my html
<form action="" id="form">
<label for="name">NAME:</label>
<input class="inputfield" type="text" name="name" placeholder="Full name">
<br>
<label for="email">E-MAIL:</label>
<input class="inputfield" type="email" name="email" placeholder="Email adress">
<br>
<label for="subject">SUBJECT:</label>
<input class="inputfield" type="text" name="subject" placeholder="Subject">
<br>
<label for="message">MESSAGE:</label>
<textarea cols="50" rows="4" class="textarea" name="message" placeholder="Message"></textarea>
<br>
<input class="submitform" type="submit" name="submit" value="Send">
</form>
and it linked to bootstrap. and to another simple css file.
It works good in all the other sizes. I tried some things but nothing works.
Thanks.
Chances are you're additional stylesheet is overriding the Bootstrap CSS because of a media query you may have added to it.
Or have you done anything to the Bootstrap CSS itself instead of using a new stylesheet to override it?
Check your stylesheet and if your stylesheet isn't too large you should post it if you still need help.
Related
How would I fix this code for it to be validated in html 5 correctly? When I test my page in Chrome, it shows the page correctly, but I am validating with errors...
<div class="form">
<form action="#">
<div class="flexBox">
<input type="text" name="" id="" placeholder="Your name">
<input type="email" name="" id="text" placeholder="Your email">
</div>
<input type="text" name="" id="" placeholder="Your subject">
<textarea "name" id="" cols="30" rows="8" placeholder="Your message">
</textarea>
<button type="submit">Send</button>
</form>
</div>
There are multiple errors in your HTML code.
Firstly, you need to remove the name string on the <textarea> element.
I think you wanted to set the name attribute to something. In that case, you can use the code below.
<textarea name="name"></textarea>
Secondly, you have to remove all of the empty name and id attributes. So, all of these:
<input name="" id="" />
Can simply be removed.
<input />
So, in summary, you need to:
Change the "name" text on the <textarea> element to be an attribute (and have a value).
Remove all empty name and id attributes.
All the issues that have been pointed out are right. I strongly recommend you to use a linter within your IDE
Or check out sites like validator.w3.org where you can paste/upload/urled your code and it will analyze it.
Here is my corrected code which validates perfectly. Just in case someone runs into a similar issue in the future. Thanks everyone.
<div class="form">
<form action="#">
<div class="flexBox">
<input type="text" placeholder="Your name">
<input type="email" placeholder="Your email">
</div>
<input type="text" placeholder="Your subject">
<textarea cols="30" rows="8" placeholder="Your message">
</textarea>
<button type="submit">Send</button>
</form>
</div>
I have a form in my HTML file, when I use it on my computer it does submit, but when I try to use it on my phone it doesn't. Does anyone know why, and how to fix it? I also tried it with a JS, but that didn't help either.
<form id="contact_form" action="mailto:example#somewhere.com" method="post">
<label for="name">Name</label>
<input type="text" id="name" name="name" placeholder="Your name.."><br>
<label for="email">Email</label>
<input type="text" id="email" name="email" placeholder="Your email.."><br>
<label for="phone">Phone</label>
<input type="text" id="phone" name="phone" placeholder="Your phone number.."><br>
<label for="subject">Subject</label>
<input type="text" id="subject" name="subject" placeholder="The subject of the message.."><br>
<label for="subject">Question</label>
<textarea id="question" name="question" placeholder="Write your question here.."></textarea><br>
<!-- <input type="button" value="Submit" onclick="checkAndSubmit('contact_form')"> -->
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
function checkAndSubmit(formID) {
a=prompt("Input");
if(a=="ok"){
document.getElementById(formID).submit();
}
}
I have tried multiple things that were suggested on Stack Overflow and some other sites, but they didn't solve it either.
EDIT: Just tested it on Safari on an iPhone 11, where it works, the phone that it doesn't work on is an Android 6.0 with Chrome
When using several forms control together with "fieldset" tag the line around them doesn't appear. I have tried it in Firefox, Chrome, Explorer and Safari and the same thing happens in all of them. This is the code I am using for it:
<form name="form" id="form" method="get">
<fieldset>
<legend>Contact details:</legend><br>
<label for="name">Name:</label>
<input type="text" name="nom" id="name"><br><br>
<label for="surname">Surname:</label>
<input type="text" name="ape" id="surname"><br><br>
<label for="age">Age:</label>
<input type="number" name="ed" id="age" min="1" max="95"><br><br>
<label for="email">Email:</label>
<input type="email" name="em" id="email"><br><br>
<input type="submit">
</fieldset>
</form>
Are you using bootstrap? i have tried to comment out bootstrap link from my file and the fieldset border appear.
If you included Bootstrap you might need some additional customization.
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.
I'm still trying to think up how to re-word this title.
Anyways so I have this contact form on my page here: http://leongaban.com/
When you click in name and fill it out you can then tab to the next field email. After entering in email, it is natural for the user to tab again into the message box.
However for some reason my tab selection jumps all the way up to the top of the page and seems to select my portfolio main nav link. A few more tabs and I'm back down into the message textarea.
This of course is not ideal at all, is there a way I can force the tab selections to go in the correct order? ie: Name > Email > Message > Captcha > Submit
My current form (HTML)
<div class="the-form">
<form id="myForm" action="#" method="post">
<div>
<label for="name">Your Name</label>
<input type="text" name="name" id="name" value="" tabindex="1">
</div>
<div>
<label for="email">Your Email</label>
<input type="text" name="email" id="email" value="" tabindex="1">
</div>
<div>
<label for="textarea">Message:</label>
</div>
<div>
<textarea cols="40" rows="8" name="message" id="message"></textarea>
</div>
<p><em>Hi, what is 2 + 3?</em></p>
<input type="text" name="captcha" id="captcha" />
<div>
<input class="submit-button" type="submit" value="Submit">
</div>
</form>
</div>
</footer>
You have to number your tabindex in the order you'd like them to go.
<input type="text" name="name" id="name" value="" tabindex="1">
<input type="text" name="email" id="email" value="" tabindex="2">
<textarea cols="40" rows="8" name="message" id="message" tabindex="3"></textarea>
<input type="text" name="captcha" id="captcha" tabindex="4"/>
<input class="submit-button" type="submit" value="Submit" tabindex="5">
etc.
Right now you have two tabindexes set to 1, so they will go first, as they are the only ones with a defined tabindex.
Try utilizing the tabindex property for your input fields. This will let you control the order in which the user can tab through your page elements.
Example code for this can be found here, though you are already setting a tabindex on the name and email inputs. Just add that property to the rest of your inputs and set them in the order you would like.