Why is it that the s:textfield is placed on bottom when I insert it in between other HTML elements inside a form?
How can I fix this?
<label><span class="required">*</span>First name</label>
<input type="text" id="firstName" name="firstName" value=""><br>
<div>
<s:select id="selectDrop" list="list" name="list"/>
</div>
<label><span class="required">*</span>Last name</label>
<input type="text" id="lastName" name="lastName"><br>
Result on browser:
First Name
Last Name
"The drop down element"
Ok I actually was able to solve by adding the them="simple" in the s:form element.
<s:form id="registrationForm" action="/registration/.action" method="post" theme="simple">
I guess if I don't add them property Struts2 UI components add their own stylesheet and therefore get weir behavior.
Related
I have an HTML form with 3 simple inputs and a submit button like this:
<form action="foo.php" method="post" id="form" name="form" target="_blank" autocomplete="on">
<input type="text" value="" name="firstname" id="firstname" placeholder="First Name" autocomplete="firstname" />
<input type="text" value="" name="lastname" id="lastname" placeholder="Last Name" autocomplete="lastname" />
<input type="email" value="" name="email" id="email" placeholder="Email Address" autocomplete="email" />
<input type="submit" value="Submit" name="send" />
</form>
When I click on the First Name input though and select the First Name to auto-complete, the browser doesn't complete the rest of the form (Last Name and Email). Using the Latest Chrome build: 90.0.44
Is that an expected behavior? How can I make the browser to autofill the whole form?
There is a description of autocomplete attributes here. MDN web docs - autocomplete.
"given-name"
The given (or "first") name.
"family-name"
The family (or "last") name.
email is the correct identifier for it tho. try correcting the others and see if that works for you.
Im working on one of my 5 projects in the freecodecamp Responsive Web Design course (the survey project) and I am trying to use the built in required function in html5 in my email input but it isn't working, when I click enter rather than giving the little popup asking for a valid email address with an # in it, nothing happens at all. Im a very new developer so humor me if im asking a dumb question but I can't seem to figure it out on my own.
HTML:
<form id="survey-form">
<label for="name">Full Name</label>
<input type="text" class="form-inputs" id="name" name="firstname" placeholder="Enter Name Here">
<label for="email">Email</label>
<input type="email" class="form-inputs" id="email" placeholder="Enter A Valid Email Adress" required>
</form>
Normally validation doesn't run unless you try to submit the form.
Add a submit button after your input element and try the same code. The end result could be something like this:
<form id="survey-form">
<label for="name">Full Name</label>
<input type="text" class="form-inputs" id="name" name="firstname" placeholder="Enter Name Here">
<label for="email">Email</label>
<input type="email" class="form-inputs" id="email" placeholder="Enter A Valid Email Adress" name="email" required>
<button type="submit">Submit Me</button>
</form>
If you require to send the form to a specific file to do the submission process you could add an action attribute to the form tag but from what you are saying that's outside of what you're currently studying.
EDIT based on Tieson T.'s comment
I added the name="email" to the email input in the code example.
I want to set autocomplete attribute to off for all the input elements in Angular 5 application.
for one input element, I am doing it like this :
<input type="text" id="myInput" autocomplete="off"style="max-width: 170px;">
I want to achieve this for all the input elements. Is there any way I can do this globally ?
Assuming that your input element inside form than you could use:
<form action="/" method="get" autocomplete="on">
First name:<input type="text" name="fname"><br>
E-mail: <input type="email" name="email"><br>
<input type="submit">
</form>
Syntax:
<form autocomplete="on|off">
I am using jQuery validationEngine.js plugin for validating input fields. It requires me to add a class="validate[required] text-input" so it can validate when submit the form. But I have class="form-control" and, due to this, the validation is not working. If I remove class="form-control" validation will work but input box will be misaligned. Is there any way I can keep both? Or any other solution for this problem ? Thanks!
<input
name="selectAgent"
type="text"
class="form-control"
id="selectAgent"
class="validate[required] text-input"
>
Add all your classes at once. Having two class declarations can cause an error.
Use (notice how form-control is added to the end of your class with a space that is how you can add another class)
<input
name="selectAgent"
type="text"
id="selectAgent"
class="validate[required] text-input form-control"
>
Instead of
<input
name="selectAgent"
type="text"
class="form-control"
id="selectAgent"
class="validate[required] text-input"
>
If I go visit my website, the page immediately scrolls to the first input in the contact form page, rather than display at the top of the page. I could probably set the scrollTop in a jquery script to fix it but I would rather get a solution that would work without manipulating the page using jquery or javascript. Can anyone explain this behaviour or how to fix it?
site: http://danmacmill.host22.com/
Remove the autofocus part of that input, and that problem is gone.
It's because you have autofocus on <input name="name"/>. Try removing it.
I think this will cause you the problem
<form action="demo_form.asp">
First name: <input type="text" name="fname" autofocus><br>
Last name: <input type="text" name="lname"><br>
<input type="submit">
</form>
but if you use it this way it will solve your problem
<form action="demo_form.asp">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit">
</form>
Check this out
Remove autofocus property:
<span>Name*:</span>
<input name="name" placeholder="Please enter your name" type="text" tabindex="1" required autofocus>
It is because of the autofocus parametter you have on that input. You must remove it or manipulate with js