I have this registration with HTML:
<form class="registerForm" id="registerForm" action="./index_public.php?page=pilot_insert" method="post" enctype="multipart/form-data">
<table>
<tr>
<td><span>Name</span>
</td>
<td><span id="sprytextfield1">
<label>
<input type="text" name="name" id="name" tabindex="1" />
</label>
<span class="textfieldRequiredMsg">*Required</span></span>
</td>
</tr>
<tr>
<td class="style1">E-mail</td>
<td><span id="sprytextfield6">
<label>
<input type="text" name="email" id="email" tabindex="8"/>
</label>
<span class="textfieldRequiredMsg">*Required</span><span class="textfieldInvalidFormatMsg">Formato no válido.</span></span>
</td>
</tr>
</table>
<input class="btn" value=Apply name=apply type="submit" />
</form>
I want put an image next to the registration form. I tryed but I only can put it below the registration form and no next to. HELP!!!
Apply a specific width to your form and float:left and use float:right for the image
Put form and image in div and use "float" css property.
<div style="float:right">
<img src="http://assetprotectionsecured.com/wp-content/uploads/2010/12/alert_png.png"> </div>
Here is the working demo : http://jsfiddle.net/7uUK8/1/
You can try applying "display:inline-block;" to both the form and the image.
For example:
<form style="display:inline-block;"></form>
<img src="someimage" style="display:inline-block;"/>
Here's a fiddle example with your form and an image side by side: http://jsfiddle.net/VE66w/
Use div or span to make two container in body of the html one is use for form and other is use image. After that apply css according.
Just delete : "Formato no válido."
<div style="float:right"><img src="http://assetprotectionsecured.com/wp-content/uploads/2010/12/alert_png.png"></div>
If you want, image next to registration field ...
Related
I know almost nothing about CSS.
This is my table:
<tbody>
<tr>
<td class="onefield acyfield_1 acyfield_text">
<label class="cell margin-top-1">
<div class="acym__users__creation__fields__title">Name</div>
<input name="user[name]" value="" data-authorized-content="{"0":"all","regex":"","message":"Incorrect value for the field Name"}" type="text" class="cell ">
</label>
<div class="acym__field__error__block" data-acym-field-id="1"></div>
</td>
<td class="onefield acyfield_2 acyfield_text">
<label class="cell margin-top-1">
<div class="acym__users__creation__fields__title">Email</div>
<input id="email_field_403" name="user[email]" value="" data-authorized-content="{"0":"all","regex":"","message":"Incorrect value for the field Email"}" required="" type="email" class="cell acym__user__edit__email ">
</label>
<div class="acym__field__error__block" data-acym-field-id="2"></div>
</td>
<td class="acysubbuttons">
<noscript>
<div class="onefield fieldacycaptcha">
Please enable the javascript to submit this form
</div>
</noscript>
<input type="button" class="btn btn-primary button subbutton" value="Subscribe" name="Submit" onclick="try{ return submitAcymForm('subscribe','formAcym73021', 'acymSubmitSubForm'); }catch(err){alert('The form could not be submitted '+err);return false;}">
</td>
</tr>
</tbody>
The button isn't aligned with the input fields:
I have tried like a million things, like:
vertical-align: bottom
As per documentation here.
And position: absolute margin 0;
Etc. etc.
It doesn't matter: the button is always on the middle.
Can anyone help?
Thanks!
In the code submitted, HTML table is not used properly.
If you want to create the form using a table, the labels for inputs should be declared as column headers, in the thead section of the table, not in tbody. This way, your table row will contain only the inputs and the submit button and they will have the same height by default.
th {
text-align:left;
}
<table>
<thead>
<th class="acym__users__creation__fields__title">Name</th>
<th class="acym__users__creation__fields__title">Email</th>
</thead>
<tbody>
<tr>
<td class="onefield acyfield_1 acyfield_text">
<input name="user[name]" value=""
data-authorized-content="{"0":"all","regex":"","message":"Incorrect value for the field Name"}"
type="text" class="cell ">
<div class="acym__field__error__block" data-acym-field-id="1"></div>
</td>
<td class="onefield acyfield_2 acyfield_text">
<input id="email_field_403" name="user[email]" value=""
data-authorized-content="{"0":"all","regex":"","message":"Incorrect value for the field Email"}"
required="" type="email" class="cell acym__user__edit__email ">
<div class="acym__field__error__block" data-acym-field-id="2"></div>
</td>
<td class="acysubbuttons">
<noscript>
<div class="onefield fieldacycaptcha">
Please enable the javascript to submit this form
</div>
</noscript>
<input type="button" class="btn btn-primary button subbutton" value="Subscribe" name="Submit"
onclick="try{ return submitAcymForm('subscribe','formAcym73021', 'acymSubmitSubForm'); }catch(err){alert('The form could not be submitted '+err);return false;}">
</td>
</tr>
</tbody>
</table>
Instead use
position: absolute;
bottom: 0px;
and also add bottom:0px;
Have you tried the margin-top attribute? It essentially puts a space on top of your subscribe button.
Basically in the css block of your button, add
margin-top: 10px;
Note that this value is fixed so it's probably not the best solution but it's a quick and easy one. Also play around with the value until its the right spot.
I tried using bootstrap for aligning my text and input box on the same row but it's not working:
<tr id="price_box">
<div class="row">
<th>Price:</th>
<td>
Rs
<input id="price" name="price" type="text" value="">
<span class="pricebox_end">.00</span>
</div>
<br>(Optional - do not include period, comma or cents)
<div id="err_price" style="display: none">
<span class="warning nohistory"></span>
</div>
</td>
</tr>
The above is just a fragment, but I could make a fiddle if it helps. Maybe you know what I should do to make the texts and the input box display on the same row?
Update
The following rendered them on the same row.
<tr id="price_box">
<th>Price:</th>
<td>
<div style="float:left">
Rs
</div>
<input id="price" name="price" type="text" value=""><span class="pricebox_end">.00</span>
<br>(Optional - do not include period, comma or cents)
With the CSS.
#price {
float:left;
}
.pricebox_end {
float:left;
}
I had to keep the table because of complex side effects if I removed the table.
You have malformed HTML with tables and Bootstrap thrown in. I would just use the grid system:
<div class="row">
<div class="col-md-3">
Price:
</div>
<div class="col-md-3">
<input id="price" name="price" type="text" value="" />
</div>
<div class="col-md-3">
Rs
</div>
<div class="col-md-3">
<span class="pricebox_end">.00</span>
</div>
</div>
The grid system is a nice replacement for HTML tables. Bootstrap lets you write less HTML and gives you responsiveness out of the box.
The div <div class="row"> HTML element in your code is not a valid direct child element for <tr> and adds unexpected behaviour.
Further, the <input id="price" .. > element wasn't closed, causing the issue of the elements not being rendered on the same row. You do not need to float your elements.
You can close an input element by doing <input id=price .. /> or <input id=price ../></input>
I've cleaned up your code below.
<tr id="price_box">
<th>Price:</th>
<td>
Rs <input id="price" name="price" type="text" value="" /><span class="pricebox_end">.00</span>
<br />
(Optional - do not include period, comma or cents)
</td>
</tr>
I am new to html, so please try to understand if i am making any silly mistake.
I am trying to create a login window like face book. i have created a login window which looks like following:
Here i have taken a table of 2 rows first row renders 2 text boxes and a login button. second consists of 'remember me' and 'forgor password' link.
Problem is that i want 2nd row of height 12px and text "remember me " to be shown in exact center of check box not as its looking a bit down in above image.
I have written some temporary inline cssto check out look:
following is my code for this section:
<table style="float:left;margin-top:1%">
<tbody>
<tr>
<td style="padding-right: 0px;background:blue;">
<div class="uiStickyPlaceholderInput uiStickyPlaceholderEmptyInput">
<input type="text" style=" width:110px;text-align:center;"class="inputtext _5aju" id="email" name="email" placeholder="E-mail" tabindex="1" value="" aria-label="Email or Phone">
</div>
</td>
<td style="padding-right: 0px;background:red">
<div class="uiStickyPlaceholderInput">
<input type="password" style=" width:105px;text-align:center;float:right;" class="inputtext _5aju" id="pass" name="pass" placeholder="Password" tabindex="2" value="" aria-label="Password">
</div>
</td>
<td >
<button value="1" class="_42ft _42fu _5ajv selected _42g- btn btn-primary btn-small" id="loginbutton" tabindex="4" type="submit">Log In</button>
</td>
</tr>
<tr height="12" style="background:pink;">
<td height="10">
<span class="_5ajw">
<div>
<label class="_5bb4">
<input id="persist_box" style="height:10px;background:yellow" type="checkbox" name="persistent" value="1" tabindex="3">
<span style="font-size:10px;margin-top:-5px;background:yellow">Remember me</span>
</label>
<input type="hidden" name="default_persistent" value="0">
</div>
</span>
</td>
<td style="margin-top:-1%;">
<a class="_5ajx" rel="nofollow" href="https://www.google.com"
style="font-size:10px;paddig-left:2px;margin-top:-1%;background:yellow;">Forgot your password?</a>
</td>
</tr>
</tbody>
</table>
So,please can any one tell me how to adjust css to achive above mentioned.
thanks in advance. . .
Try vertical-align:middle on the span containing the Remember me text.
On a side note, I would advice you to avoid tables for this kind of layout and achieve the same layout using divs.
Ideally, you shouldn't use a table for layout purposes.
In your example, I would try removing the margins around the checkbox, leaving only the right margin like so:
<input type="hidden" name="default_persistent" value="0" style="margin: 0 5px 0 0;>
That should do the trick.
In a table I have a situation like this:
<td>
<p>1</p>
<p class="obj_2 view"></p><input class="obj_2 modifica" type="text" value=""/>
The textfield appear when I press a button, but the problem is an other one. The textfield appear under the paragraph, but I want it in the same line. So, should I add some Css code or what?
<td>
<p style="float:left">1</p>
<p style="float:left" class="obj_2 view"></p>
<input style="margin-top:15px;" class="obj_2 modifica" type="text" value=""/>
</td>
You can use float:left property for align 2 p elements in a single line
<td>
<p style="float:left;">1<p>
<input type="text" value="" style="float:right;"/>
I have ommited the <p class="obj_2 view"></p>
<form method="post" action="confirm_login_credentials.php">
<table>
<tr>
<td>User ID:</td>
<td><input type="text" id="uid"></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="text" id="pass"></td>
</tr>
<tr>
<td colspan="2" align="right">
<img src="images/login.jpg">
</td>
</tr>
</table>
</form>
I am using an image in place of a submit button. How can I submit the login details when the user clicks on the login image as a submit button does?
You could use an image submit button:
<input type="image" src="images/login.jpg" alt="Submit Form" />
Late to the conversation...
But, why not use css? That way you can keep the button as a submit type.
html:
<input type="submit" value="go" />
css:
button, input[type="submit"] {
background:url(/images/submit.png) no-repeat;"
}
Works like a charm.
EDIT: If you want to remove the default button styles, you can use the following css:
button, input[type="submit"]{
color: inherit;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
outline: inherit;
}
from this SO question
You can also use a second image to give the effect of a button being pressed. Just add the "pressed" button image in the HTML before the input image:
<img src="http://integritycontractingofva.com/images/go2.jpg" id="pressed"/>
<input id="unpressed" type="submit" value=" " style="background:url(http://integritycontractingofva.com/images/go1.jpg) no-repeat;border:none;"/>
And use CSS to change the opacity of the "unpressed" image on hover:
#pressed, #unpressed{position:absolute; left:0px;}
#unpressed{opacity: 1; cursor: pointer;}
#unpressed:hover{opacity: 0;}
I use it for the blue "GO" button on this page
This might be helpful
<form action="myform.cgi">
<input type="file" name="fileupload" value="fileupload" id="fileupload">
<label for="fileupload"> Select a file to upload</label>
<br>
<input type="image" src="/wp-content/uploads/sendform.png" alt="Submit" width="100"> </form>
Read more: https://html.com/input-type-image/#ixzz5KD3sJxSp
<div class="container-fluid login-container">
<div class="row">
<form (ngSubmit)="login('da')">
<div class="col-md-4">
<div class="login-text">
Login
</div>
<div class="form-signin">
<input type="text" class="form-control" placeholder="Email" required>
<input type="password" class="form-control" placeholder="Password" required>
</div>
</div>
<div class="col-md-4">
<div class="login-go-div">
<input type="image" src="../../../assets/images/svg/login-go-initial.svg" class="login-go"
onmouseover="this.src='../../../assets/images/svg/login-go.svg'"
onmouseout="this.src='../../../assets/images/svg/login-go-initial.svg'"/>
</div>
</div>
</form>
</div>
</div>
This is the working code for it.
Make the submit button the main image you are using. So the form tags would come first then submit button which is your only image so the image is your clickable image form. Then just make sure to put whatever you are passing before the submit button code.