Struts and Twitter Bootstrap signup form - html

I'm developing a web application with Struts2 and Twitter Bootstrap.
I've created a simple registration form that uses HTML tags and bootstrap attributes, while the form of Struts uses Struts tags.
Is there a way to integrate them? Below are the two code snippets:
Using HTML and Twitter Bootstrap:
<div class="row">
<div class="col-md-6">
<form class="form-horizontal" action="" method="POST">
<fieldset>
<div class="control-group">
<label class="control-label" for="username">Username</label>
<div class="controls">
<input type="text" id="username" name="username" placeholder="" class="form-control input-lg">
<p class="help-block">Username may contain any letters or numbers, no spaces</p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="password">Password</label>
<div class="controls">
<input type="password" id="password" name="password" placeholder="" class="form-control input-lg">
<p class="help-block">Password must be at least 6 characters</p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="password_confirm">Password (Conferma)</label>
<div class="controls">
<input type="password" id="password_confirm" name="password_confirm" placeholder="" class="form-control input-lg">
<p class="help-block">Confirm password</p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="email">E-mail</label>
<div class="controls">
<input type="email" id="email" name="email" placeholder="" class="form-control input-lg">
<p class="help-block">Insert your email</p>
</div>
</div>
<div class="control-group">
<!-- Button -->
<div class="controls">
<button class="btn btn-success">Confirm</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
Form in Struts:
<s:actionerror/>
<s:form action="Registrazione" method="POST" id="formRegistrazione">
<p align="center">Inserisci i tuoi dati per registrarti al sistema: </p>
<s:textfield name="user.username" label="Username" />
<s:password name="user.password" label="Password" />
<s:password name="user.confermaPassword" label="Confirm Password" />
<s:textfield name="user.email" label="Email"/>
<s:submit value="Registrazione" align="center" />
</s:form>

Related

HTML Form action="#"

I am taking a course and one of our projects is to create a form. Forgive me as I am a total newbie here.
The instructor is asking that the form action attribute="#" and the method="post"
When I use the # I just get an error
<form name="my-form" action='#' method='post'>
<fieldset>
<legend>Sign Up Here</legend>
<div class="form-box">
<label for="username">Username</label>
<input type="text" id="username" name="username" tabindex="1" placeholder="Username">
</div>
<div class="form-box">
<label for="email">Email</label>
<input type="email" id="email" name="email" tabindex="2" placeholder="Email" required>
</div>
<div class="form-box">
<label for="phone-number">Phone</label>
<input type="text" id="phone-number" name="phone-number" tabindex="3" placeholder="Phone" required>
</div>
<div class="form-box">
<label for="password">Password</label>
<input type="password" id="password" name="pass" tabindex="4" placeholder="Password" required>
</div>
<div id="message">
<h6>Password must contain the following:</h6>
<p id="letter" class="invalid">A <b>lowercase</b> letter</p>
<p id="capital" class="invalid">A <b>capital (uppercase)</b> letter</p>
<p id="number" class="invalid">A <b>number</b></p>
<p id="length" class="invalid">Minimum <b>8 characters</b></p>
</div>
<div class="form-box">
<label for="password-confirm">Confirm Password</label>
<input type="password" id="password-confirm" name="password-confirm" tabindex="5" placeholder="Confirm Password" required>
</div>
<div class="form-box">
<label for="avatar">Choose a profile picture:</label>
<input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg" class="uploader button-upload">
</div>
<div class="form-box">
<button class="btn" id="btnSend" tabindex="6">Register</button>
</div>
</fieldset>
</form>
This page isn’t working If the problem continues, contact the site owner.HTTP ERROR 405
This is on google chrome.

how can I edit the size of back ground box size to make it adjust to inside boxes with node.js

image of web page
hello I'm making school project for assignment.
but I don't know how to change the size of background grey box to make adjust with inside E-mail, password... etc box.
here's my code which I'm struggling.
{{!-- 회원 가입 페이지 view --}}
<br/><br/>
<form action="" style-"width: 700px; margin: auto"
<div class="jumbotron">
<div class="col-md-5 col-md-offset-5">
<h1>Sign up</h1>
{{# if hasErrors}}
<div class="alert alert-danger">
{{# each messages}}
<p>{{ this }}</p>
{{/each}}
</div>
{{/if}}
<form action="/user/signup" method="post" style="width: 500px; margin:auto">
<br/>
<div class="form-group">
<label for="email">E-Mail</label>
<input type="text" id="email" name="email" class="form-control">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" class="form-control">
</div>
<div class="form-group">
<label for="name">Name</label>
<input type="text" id="name" name="name" class="form-control">
</div>
<div class="form-group">
<label for="address">Address</label>
<input type="text" id="address" name="address" class="form-control">
</div>
<div class="form-group">
<label for="phone">Phone</label>
<input type="text" id="phone" name="phone" class="form-control">
</div>
<input type="hidden" name="_csrf" value="{{ csrfToken }}">
<button type="submit" class="btn btn-primary pull-right">Sign up</button>
</form>
</div>
</div>
I think it is because you have put everything inside
<div class="jumbotron">
Try moving <div class="jumbotron"> inside <div class="col-md-5 col-md-offset-5">
You might have to change the col-md-5 to col-md-6

bootstrap messed up form

Screenshot of form
I'm having trouble with Bootstrap. I have a form with three textboxes. The top textbox, email, is not aligned with the rest of the textboxes. I've included the HTML:
<form role="form" action="register.php" method="POST" form-horizontal novalidate>
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="control-label col-sm-4" for="email"></label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter Email">
</div>
</form>
</div>
<form class="form-horizontal" role="form">
<div class="form-group">
<span></span>
<div class="col-sm-10">
<input type="text" class="form-control" id="username" placeholder="Enter username">
</div>
</div>
</form>
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="control-label col-sm-4" for="username"></label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password" placeholder="Enter password ">
</div>
</div>
</form>
<div class="form-group">
<div class="col-sm-offset-0 col-sm-10">
<button type="submit" class="btn btn-primary" name="submit">Register</button>
</div>
</div>
</form>
I don't understand what I'm doing wrong. Any help would be appreciated, thanks.
Using form class only one time not again & again and if you want text like "email" then use <label class="control-label col-sm-4" for="email">Email</label> otherwise no use of it and use only 12 column as [col-sm-2] for label and for input [col-sm-10] or you can use as [col-sm-4] or [col-sm-8]
<form role="form" action="register.php" method="POST" class="form-horizontal novalidate">
<div class="form-group">
<div class="col-sm-12">
<input type="email" class="form-control" id="email" placeholder="Enter Email">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="text" class="form-control" id="username" placeholder="Enter username">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="password" class="form-control" id="password" placeholder="Enter password ">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary" name="submit">Register</button>
</div>
</div>
</form>
You have missplaced few css class,replace your form with following code, will solve your problem:
<form role="form" action="register.php" method="POST" class='form-horizontal novalidate' role="form">
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter Email">
</div>
</div>
<div class="form-group">
<label for="username" class="col-sm-2 control-label">UserName</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="username" placeholder="Enter User Name">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password" placeholder="Enter Password"> </div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary" name="submit">Register</button>
</div>
</div>
</form>
You have used wrong html code. Replace your form with following code, will solve your problem:
<form role="form" action="register.php" method="POST" form-horizontal novalidate>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter Email">
</div>
</div>
<div class="form-group">
<label for="username" class="col-sm-2 control-label">User Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="username" placeholder="Enter username">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password" placeholder="Enter password ">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-0 col-sm-10">
<button type="submit" class="btn btn-primary" name="submit">Register</button>
</div>
</div>
</form>
Here is my jsfiddle code : https://jsfiddle.net/0oeabj76/1/

Form will not submit in IE 11, successful in all others

I am a newb to programming, this is my first question here.
I have a bootstrap modal that opens up to a Contact Us form. In Firefox, the form submits postback as expected. In IE 11 clicking the send button just hangs, nothing. The close window buttons work as do the required attributes for text input fields.
I have seen other similar questions, but I am not missing name attributes on any field or button. I am also not duplicating the type="submit" attributes in the tag. I have experimented with using button type="submit" and every other way I can think of doing it. The modal and form elements all work except for the submission. The button behaves as though it is being clicked but nothing changes, nothing is submitted. Any help would be terrific!
Relevant Code:
<form class="form-horizontal" method="post" name="PortalContactUsForm" id="PortalContactUsForm">
<input type="submit" form="PortalContactUsForm" name="SendEmailButton" id="SendEmailButton" class="btn btn-primary" value="Send">
The complete Modal and form code:
<div id="myPortalModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myPortalModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" name="ModalCloseButton" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h3 id="myPortalModalLabel">Contact Us</h3>
</div>
<div class="modal-body">
<h4>Send <cfoutput>#sub_merchant.companyname#</cfoutput> an email by filling out the form below.</h4><br>
<form class="form-horizontal" method="post" name="PortalContactUsForm" id="PortalContactUsForm">
<div class="control-group">
<label class="control-label" for="Account" name="lblAccount" id="lblAccount" form="PortalContactUsForm">Account</label>
<div class="controls">
<input type="text" form="PortalContactUsForm" name="Account" id="Account" value="<cfoutput>#customer.account#</cfoutput>" readonly>
</div>
</div>
<div class="control-group">
<label class="control-label" for="FirstName" name="lblFirstName" id="lblFirstName" form="PortalContactUsForm">First Name</label>
<div class="controls">
<input type="text" form="PortalContactUsForm" name="FirstName" id="FirstName" value="<cfoutput>#customer.firstname#</cfoutput>" readonly>
</div>
</div>
<div class="control-group">
<label class="control-label" for="LastName" name="lblLastName" id="lblLastName" form="PortalContactUsForm">Last Name</label>
<div class="controls">
<input type="text" form="PortalContactUsForm" name="LastName" id="LastName" value="<cfoutput>#customer.lastname#</cfoutput>" readonly>
</div>
</div>
<div class="control-group">
<label class="control-label" for="Email" name="lblEmail" id="lblEmail" form="PortalContactUsForm">Your Email</label>
<div class="controls">
<input type="email" form="PortalContactUsForm" name="Email" id="Email" value="<cfoutput>#customer.email#</cfoutput>">
</div>
</div>
<div class="control-group">
<label class="control-label" for="ConfirmEmail" name="lblConfirmEmail" id="lblConfirmEmail" form="PortalContactUsForm">Confirm Email</label>
<div class="controls">
<input type="email" form="PortalContactUsForm" name="ConfirmEmail" id="ConfirmEmail" value="">
</div>
</div>
<div class="control-group">
<label class="control-label" for="PhoneNum" name="lblPhoneNum" id="lblPhoneNum" form="PortalContactUsForm">Your Phone</label>
<div class="controls">
<input type="tel" form="PortalContactUsForm" name="PhoneNum" id="PhoneNum" value="<cfoutput>#customer.phone#</cfoutput>">
</div>
</div>
<div class="control-group">
<label class="control-label" for="MsgBody" name="lblMsgBody" id="lblMsgBody" form="PortalContactUsForm">Questions/Comments</label>
<div class="controls">
<textarea rows="3" form="PortalContactUsForm" name="MsgBody" id="MsgBody" placeholder="No html here, just plain text please." required></textarea>
</div>
</div>
<div class="control-group pull-right">
<label class="checkbox">
<input type="checkbox" form="PortalContactUsForm" name="SendCCCheckbox" id="SendCCCheckbox">
Check this box to receive a copy of this email at the address above.
</label>
</div>
<cfoutput>
<input type="hidden" form="PortalContactUsForm" name="postback" id="postback" value="true">
<input type="hidden" form="PortalContactUsForm" name="mailsend" id="mailsend" value="true">
<input type="hidden" form="PortalContactUsForm" name="lname" id="lname" value="#trim(form.lname)#">
<input type="hidden" form="PortalContactUsForm" name="zip" id="zip" value="#(len(trim(form.zip)) > 5 ? left(trim(replace(form.zip, "-", "", "all")), 5) : trim(form.zip))#">
<input type="hidden" form="PortalContactUsForm" name="pin" id="pin" value="#trim(replacelist(pin, "-, ", ""))#">
</cfoutput>
</form>
</div>
<div class="modal-footer">
<button class="btn" name="CloseModalButton" data-dismiss="modal" aria-hidden="true">Close</button>
<input type="submit" form="PortalContactUsForm" name="SendEmailButton" id="SendEmailButton" class="btn btn-primary" value="Send">
</div>
</div>

Create bootstrap form having horizontal and vertical form field

Is there anyway I can create a form using bootstrap which can have fields aligned in same line as well as horizontal fields?
Something like this?
in this the cvv MM and YY are in the same line..How can i make it possible using bootstrap form?
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label><input type="email" class="form-control" id="exampleInputEmail1" />
</div>
<div class="form-group">
<label for="exampleInputEmail1">CVV</label><input type="email" class="form-control" id="cvv" />
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label><input type="password" class="form-control" id="exampleInputPassword1" />
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
I want the cvv to be aligned with the first form field
Wrap your input fields in a div and assign a col-sm-x class to it e.g:
<div class="form-group">
<label class="col-sm-3 control-label" for="cardNumber">Card # (required)</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="cardNumber" size="12" autocomplete='off'>
</div>
</div>
Also add a col-sm-x to your labels
For columns:
<div class="form-group">
<label class="col-sm-3 control-label">Expiry date(MM/YYYY) (required)</label>
<div class="col-sm-2">
<input type="text" class="form-control" placeholder="MM" size="2" autocomplete='off'>
</div>
<div class="col-sm-2">
<input type="text" class="form-control" placeholder="YYYY" size="4" autocomplete='off'>
</div>
</div>
Finally, class of form should be form-horizontal Play with the col width as you like
Wrap your input fields as above in one div but add to this div the 'form-inline' class. No need of the col-sm-x class.
<div class="form-group form-inline">
<label class="control-label">Expiry date(MM/YYYY) (required)</label>
<input type="text" class="form-control" placeholder="MM" size="2" autocomplete='off'>
<input type="text" class="form-control" placeholder="YYYY" size="4" autocomplete='off'>
</div>
</div>