I'm new to all this, so any help is appreciated.
I have this form I'm trying to style, but can't seem to figure out what the problem is. I need the CTA button to be next to the input field, without changing the html. What am I missing in my css?
HTML:
<div id="newsletter" class="form-wrap">
<p class="form-field">
<label for="newsletter_email">Please enter your email</label>
<input type="text" name="newsletter_email" id="newsletter_email" value="" placeholder="Enter email address"/>
</p>
<p class="form-submit">
<input type="submit" name="newsletter_submit" id="newsletter_submit" value="Get Early Access"/>
</p>
</div>
Related
I have a checkbox button and a Paragraph side-by-side.
It's inline-block and everything is nice... Look:
When I turn my view into responsive, it just drops down a line. Like this:
How do I overcome this issue elegently in CSS without starting build divs around elements and bootstrap the whole deal here? Thanks!
re code; those are 2 columns and both button and paragraph reside in he left column.
EDITED FOR CODE ADDITION:
<div class="row no-pad">
<div class="col-xs-6 left-hand-input">
<!--FORM BEGIN-->
<form class="form-control-static" action="leadGen.php" method="post">
<p>PERSONAL DETAILS</p>
<hr>
<label for="firstName">FIRST NAME:</label><br>
<input name="firstName" id="firstName" type="text"><br>
<label for="email">EMAIL:</label><br>
<input name="email" id="email" type="email">
<p>SHIPMENT ADDRESS</p>
<hr>
<label for="address">ADDRESS:</label><br>
<input name="address" id="address" type="text"><br>
<label for="country">COUNTRY:</label><br>
<input name="country" id="country" type="text"><br>
<label for="zip">ZIP CODE:</label><br>
<input name="zip" id="zip" type="text"><br>
<input type="submit" id="submit" value="SEND">
<p style="display: inline-block; vertical-align: -10px;"> *Required fields</p><br>
<input checked type="checkbox" id="mailingList"/>
<p style="display: inline-block; font-size: 75%;">
Receive exclusive membership deals and offers.</p>
</form>
</div>
</div>
You need to use labels
<label><input type="checkbox" value=" id="mailingList">Receive exclusive membership deals and offers.</label>
Here is the jsfiddle demo: https://jsfiddle.net/o4qgu4gv/2/
You should also consider using col-sm-6 instead of col-xs-6 because it may look nice on an iPhone 4 screen
if it is for the checkbox or any input type tag in particular then a more suitable choice would be to use a label tag instead of a paragraph.
You could use label with its for attribute and it should work fine.
<div id="wrapper">
<input type="checkbox" id="btn"> check
<label for="btn">
this should not shift
</label>
</div>
I would like to make this form below
<form enctype="application/x-www-form-urlencoded" action="http://cpanel.gateway245.com/auth" method="post">
<p class="element">
<label for="email">Email address</label>
<br/>
<input type="text" name="email" id="email" value="" placeholder="E-mail">
</p>
<p class="element">
<label for="password">Password</label>
<br/>
<input type="password" name="password" id="password" value="" placeholder="Password">
</p>
<input type="submit" name="submit" id="submit" value="Login">
</form>
So that when a link is clicked the form shows I have seen some websites with login forms like this is it possible to be done in html under div menu ui?
Showing/hiding content can't be done in HTML alone - you'll need JavaScript to handle the click event.
This is a rudimentary example to get you on the right track. Many, many, many more examples are on SO already.
CSS
#ttt { display: none; }
HTML
Click to show form
<form id="ttt"> ... </form>
JavaScript
function show(target){
document.getElementById(target).style.display = 'block';
}
I'm trying to remove the message box and I want to move the e-mail box to the right of the name, so that it all fits into the top bar.
I have tried removing the message box through the html code, but when I do, I get errors and it doesn't function properly.
I assume I have to remove something in the PHP because it's obviously not able to find the missing html code, but as I don't understand PHP I don't know what to remove.
this is the html code for the subscribe button
<div class="subscribe">
<div class="containerContact">
<div id="contactFormContainer">
<div id="contactForm">
<div class="loader"></div>
<div class="bar"></div>
<form action="mail.php" class="contactForm" name="cform" method="post">
<div class="input_boxes">
<p><label for="name">Name</label><span class="name-missing">Please enter your name</span><br />
<input id="name" type="text" value="" name="name" />
</p>
<p>
<label for="e-mail">E-mail</label><span class="email-missing">Please enter a valid e-mail</span><br />
<input id="e-mail" type="text" value="" name="email" />
</p>
<p><label for="message">Message</label><span class="message-missing">Say something!</span><br />
<textarea id="message" rows="" cols="" name="message"></textarea>
</p>
</div>
<input class="submit" type="submit" name="submit" value="Submit Form" onfocus="this.blur()" />
</form>
</div>
<div class="contact"></div>
</div>
</div>
<!-- this is the overlay which hides the rest of the website when the Subscribe button is pressed. -->
<div id="backgroundPopup"></div>
</div>
I can't post more than one link, so here is a text dump to the PHP and CSS for the subscribe button
any help would be much appreciated!!
So I have a form with two fields, one of these fields needs to have information in to successfully display the next page. How would I disable the submit button until that field has some text in it?
Here's the HTML Code;
<div id="content">
<form action="avatarquery.php" method="POST" id="login-form">
<fieldset>
<p>
<label for="login-username">Server Name:</label>
<input type="text" id="login-username" name="name" class="round full-width-input" autofocus />
</p>
<p>
<label for="login-password">Server IP:</label>
<input type="text" id="login-password" name="ip" class="round full-width-input" />
</p>
<input class="button round blue image-right ic-right-arrow" type="submit" id="register" />
</fieldset>
<br/><div class="information-box round">Please Note: Some servers may not work due to their Configs not having Query Enabled.</div>
</form>
If that has to be done using HTML, then in HTML5, you can use
<input type="text" required />
Otherwise in JavaScript, you can try setting an attribute to the input button.
Until the value is "", you can set the attribute
<input type="submit" disabled />
I have two textbox and one button in a popupbox.
I want to make button exactly below the two textbox ,
wherein in my code it is not happening. Please help
HTML COde :::
<form method="post" action="index.html">
<p><input type="text" name="login" value="" placeholder="Username or Email"></p>
<p><input type="password" name="password" value="" placeholder="Password"></p>
<p class="remember_me">
<label>
<input type="checkbox" name="remember_me" id="remember_me">
Remember me on this computer
</label>
</p>
<p class="submit"><input type="submit" name="commit" value="Logine" class="marginleft5"></p>
<!-- <div class="login-help">
<p>Forgot your password? Click here to reset it.</p>
</div> -->
</form>
Use <div> tags for lines, or otherwise use <br/> to break line