I have a signup form in which i have some input fields with placeholder text. I dont have any label for input field as i have placeholder. I want to shift placeholder text to up when user types writing.. What should i add to my css file to make it happen.
below image shows my signup form
my signup.php file:
<div class="loginForm">
<form action="signUp.php" method="POST">
<input type="text" name="firstName" placeholder="First name" autocomplete="off" required>
<input type="text" name="lastName" placeholder="Last name" autocomplete="off" required>
<input type="text" name="username" placeholder="Username" autocomplete="off" required>
<input type="email" name="email" placeholder="Email" autocomplete="off" required>
<input type="email" name="email2" placeholder="Confirm email" autocomplete="off" required>
<input type="password" name="password" placeholder="Password" autocomplete="off" required>
<input type="password" name="password2" placeholder="Confirm password" autocomplete="off" required>
<input type="submit" name="submitButton" value="SUBMIT">
</form>
</div>
my css file that i have tried:
.signInContainer .column form input[type="text"],
.signInContainer .column form input[type="email"],
.signInContainer .column form input[type="password"] {
font-size: 14px;
margin: 10px 0;
border: none;
border-bottom: 1px solid #dedede;
box-shadow: none;
transition: all .8s;
}
.signInContainer .column form input[type="text"]:focus,
.signInContainer .column form input[type="email"]:focus,
.signInContainer .column form input[type="password"]:focus {
outline: none;
transform: translateY(-3px);
border-bottom: 1px solid #464646;
}
CSS solution: You'll need a label for that and a little bit of markup and a webkit browser.
.container {
position: relative;
padding-top: 25px;
margin-top: 10px;
}
.input-text {
padding: 10px 5px;
}
/* the second part of the trick is that you place your label to
look like a placeholder */
label.move-out {
position: absolute;
top: 35px;
left: 15px;
color: lightgrey;
transition: top 0.4s, left 0.4s
}
/* :placeholder-shown now works with an "empty" placeholder and a
correctly positioned label, and also keeps the label at position,
when data is in the input field */
/* :-webkit-autofill is there if Chrome wants to fill your input
box automatically */
input:focus+label.move-out,
input:not( :placeholder-shown)+label.move-out,
input:-webkit-autofill+label.move-out {
top: 0px;
left: 0px;
transition: top 0.4s, left 0.4s;
color: black;
}
<div class="container">
<!-- the first part of the trick is that you create an "empty"
placeholder attr -->
<input id="i1" class="input-text" type="text" placeholder=" " />
<label class="move-out" for="i1">Label 1</label>
</div>
<div class="container">
<!-- the first part of the trick is that you create an "empty"
placeholder attr -->
<input id="i2" class="input-text" type="text" placeholder=" " />
<label class="move-out" for="i2">Label 2</label>
</div>
It's important to place the label AFTER the input field, as CSS has a selector to select element after an other element (element + element), but there's no selector to select an element before an other.
You could have an empty label (which wouldn't show in the rendered output since it's empty) and when you type anything in the input, change the value of the label to the placeholder of your input.
document.getElementById("input_text").addEventListener("keydown", function() {
document.getElementById("text").innerHTML = document.getElementById("input_text").placeholder;
});
<label id="text"></label>
<input type="text" id="input_text" placeholder="Type here" />
What is a good way to overcome the unfortunate fact that this code will not work as desired:
<div class="required">
<label>Name:</label>
<input type="text">
</div>
<style>
.required input:after { content:"*"; }
</style>
In a perfect world, all required inputs would get the little asterisk indicating that the field is required. This solution impossible since the CSS is inserted after the element content, not after the element itself, but something like it would be ideal. On a site with thousands of required fields, I can move the asterisk in front of the input with one change to one line (:after to :before) or I can move it to the end of the label (.required label:after) or in front of the label, or to a position on the containing box, etc...
This is important not just in case I change my mind about where to place the asterisk everywhere, but also for odd cases where the form layout doesn't allow the asterisk in the standard position. It also plays well with validation that checks the form or highlights improperly completed controls.
Lastly, it doesn't add additional markup.
Are there any good solutions that have all or most of the advantages of the impossible code?
Is that what you had in mind?
http://jsfiddle.net/erqrN/1/
<label class="required">Name:</label>
<input type="text">
<style>
.required:after {
content:" *";
color: red;
}
</style>
.required:after {
content:" *";
color: red;
}
<label class="required">Name:</label>
<input type="text">
See https://developer.mozilla.org/en-US/docs/Web/CSS/pseudo-elements
.required label {
font-weight: bold;
}
.required label:after {
color: #e32;
content: ' *';
display:inline;
}
Fiddle with your exact structure:
http://jsfiddle.net/bQ859/
To put it exactly INTO input as it is shown on the following image:
I found the following approach:
.asterisk_input::after {
content:" *";
color: #e32;
position: absolute;
margin: 0px 0px 0px -20px;
font-size: xx-large;
padding: 0 5px 0 0; }
<form>
<div>
<input type="text" size="15" />
<span class="asterisk_input"> </span>
</div>
</form>
Site on which I work is coded using fixed layout so it was ok for me.
I'm not sure that that it's good for liquid design.
input[required]{
background-image: radial-gradient(#F00 15%, transparent 16%), radial-gradient(#F00 15%, transparent 16%);
background-size: 1em 1em;
background-position: right top;
background-repeat: no-repeat;
}
write in CSS
.form-group.required .control-label:after {content:"*";color:red;}
and HTML
<div class="form-group required">
<label class="control-label">Name:</label>
<input type="text">
</div>
input[required], select[required] {
background-image: url('/img/star.png');
background-repeat: no-repeat;
background-position-x: right;
}
Image has some 20px space on the right not to overlap with select dropdown arrow
And it looks like this:
Here is a simple "CSS only" trick I created and am using to dynamically add a red asterisk on the labels of required form elements without losing browsers' default form validation.
The following code works perfectly on all the browsers and for all the main form elements.
.form-group {
display: flex;
flex-direction: column;
}
label {
order: 1;
text-transform: capitalize;
margin-bottom: 0.3em;
}
input,
select,
textarea {
padding: 0.5em;
order: 2;
}
input:required+label::after,
select:required+label::after,
textarea:required+label::after {
content: " *";
color: #e32;
}
<div class="form-group">
<input class="form-control" name="first_name" id="first_name" type="text" placeholder="First Name" required>
<label class="small mb-1" for="first_name">First Name</label>
</div>
<br>
<div class="form-group">
<input class="form-control" name="last_name" id="last_name" type="text" placeholder="Last Name">
<label class="small mb-1" for="last_name">Last Name</label>
</div>
Important:
You must preserve the order of elements that is the input element first and label element second. CSS is gonna handle it and transform it in the traditional way, that is the label first and input second.
It is 2019 and previous answers to this problem are not using
CSS grid
CSS variables
HTML5 form elements
SVG in CSS
CSS grid is the way to do forms in 2019 as you can have your labels preceding your inputs without having extra divs, spans, spans with asterisks in and other relics.
Here is where we are going with minimal CSS:
The HTML for the above:
<form action="https://www.example.com/register/" method="post" id="form-validate" enctype="multipart/form-data">
<p class="form-instructions">Please enter the following information to create your account.</p>
<label for="firstname">First name</label>
<input type="text" id="firstname" name="firstname" value="" title="First name" maxlength="255" required="">
<label for="lastname">Last name</label>
<input type="text" id="lastname" name="lastname" value="" title="Last name" maxlength="255" required="">
<label for="email_address">Email address</label>
<input type="email" autocapitalize="off" autocorrect="off" spellcheck="false" name="email" id="email_address" value="" title="Email address" size="30" required="">
<label for="password">Password</label>
<input type="password" name="password" id="password" title="Password" required="">
<label for="confirmation">Confirm password</label>
<input type="password" name="confirmation" title="Confirm password" id="confirmation" required="">
<input type="checkbox" name="is_subscribed" title="Subscribe to our newsletter" value="1" id="is_subscribed" class="checkbox">
<label for="is_subscribed">Subscribe to the newsletter</label>
<input type="checkbox" name="persistent_remember_me" id="remember_meGCJiRe0GbJ" checked="checked" title="Remember me">
<label for="remember_meGCJiRe0GbJ">Remember me</label>
<p class="required">* Required</p>
<button type="submit" title="Register">Register</button>
</form>
Placeholder text can be added too and is highly recommended. (I am just answering this mid-form).
Now for the CSS variables:
--icon-required: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="-10 -6 16 16"> \
<line id="line" y1="-3" y2="3" stroke="%23df0000" stroke-linecap="butt" transform="rotate(15)"></line> \
<line id="line" y1="-3" y2="3" stroke="%23df0000" stroke-linecap="butt" transform="rotate(75)"></line> \
<line id="line" y1="-3" y2="3" stroke="%23df0000" stroke-linecap="butt" transform="rotate(-45)"></line> \
</svg>');
--icon-tick: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="-2 -2 16 16"> \
<path fill="green" stroke-linejoin="round" d="M2 6L1 7l3 4 7-10h-1L4 8z"/> \
</svg>');
The CSS for the form elements:
input[type=text][required],
input[type=email][required],
input[type=password][required],
input[type=tel][required] {
background-image: var(--icon-required);
background-position-x: right;
background-repeat: no-repeat;
background-size: contain;
}
input:valid {
--icon-required: var(--icon-tick);
}
The form itself should be in CSS grid:
form {
align-items: center;
display: grid;
grid-gap: var(--form-grid-gap);
grid-template-columns: var(--form-grid-template-columns);
margin: auto;
}
The values for the columns can be set to 1fr auto or 1fr with anything such as <p> tags in the form set to span 1/-1. You change the variables in your media queries so that you have the input boxes going full width on mobile and as per above on desktop. You can also change your grid gap on mobile if you wish by using the CSS variables approach.
When the boxes are valid then you should get a green tick instead of the asterisk.
The SVG in CSS is a way of saving the browser from having to do a round trip to the server to get an image of the asterisk. In this way you can fine tune the asterisks, the examples here are at an unusual angle, you can edit this out as the SVG icon above is entirely readable. The viewbox can also be amended to place the asterisk above or below the centre.
Use jQuery and CSS
jQuery(document).ready(function() {
jQuery("[required]").after("<span class='required'>*</span>");
});
.required {
position: absolute;
margin-left: -10px;
color: #FB0000;
font-size: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="xxx" required>
I think this is the efficient way to do, why so much headache
<div class="full-row">
<label for="email-id">Email Address<span style="color:red">*</span></label>
<input type="email" id="email-id" name="email-id" ng-model="user.email" >
</div>
If you are using "floating labels" (like https://css-tricks.com/float-labels-css/ or https://dev.to/adrianbdesigns/let-s-create-a-floating-label-input-with-html-and-css-only-4mo8) then you can use this:
input[required]+label:after {
content: '*';
color: red;
}
Easy, no images, will not be lost in user's eyes. Theoretically, you can padd the :after as well, if you want some spacing between label and the asterisk. You can also use :before instead of :after if you like.
if you have a label with the field name inside some tag with the required attribute, a common scenario in angular forms that add this attribute automatically to required fields
[required] label::after {
content: '*';
font-size: 24px;
line-height: 0;
vertical-align: middle;
}
.asterisc {
display: block;
color: red;
margin: -19px 185px;
}
<input style="width:200px">
<span class="asterisc">*</span>
There can be a lot of possibilities. You can reverse flex-direction and use the attribute required of your input like follows:
fieldset {
border: none;
padding: 0;
display: flex;
flex-direction: column-reverse;
}
fieldset p {
margin-bottom: 4px;
}
fieldset input[required] ~ p:after {
content: '*';
color: red;
font-size: 12px;
margin-left: 4px;
}
<form>
<fieldset>
<input type="text" placeholder="Severus" name="first_name" required />
<p>First Name</p>
</fieldset>
<fieldset>
<input type="text" placeholder="Snape" name="last_name" />
<p>Last Name</p>
</fieldset>
</form>
This example puts an asterisk symbol in front of a label to denote that particular input as a required field. I set the CSS properties using % and em to makesure my webpage is responsive. You could use px or other absolute units if you want to.
#name {
display: inline-block;
margin-left: 40%;
font-size:25px;
}
.nameinput{
margin-left: 10px;
font-size:90%;
width: 17em;
}
.nameinput::placeholder {
font-size: 0.7em;
vertical-align: middle;
}
#name p{
margin:0;
border:0;
padding:0;
display:inline-block;
font-size: 40%;
vertical-align: super;
}
<label id="name" value="name">
<p>*</p>
Name: <input class="nameinput" type="text" placeholder="Enter your name" required>
</label>
What you need is :required selector - it will select all fields with 'required' attribute (so no need to add any additional classes). Then - style inputs according to your needs. You can use ':after' selector and add asterisk in the way suggested among other answers
You can achieve the desired result by encapsulating the HTML code in a div tag which contains the "required' class followed by the "form-group" class. *however this works only if you have Bootstrap.
<div class="form-group required">
<div class="required">
<label>Name:</label>
<input type="text">
</div>
<div>
For those who end up here, but have jQuery:
// javascript / jQuery
$("label.required").append('<span class="red-star"> *</span>')
// css
.red-star { color: red; }
Simple & Short
<label>Name:<span class="required">*</span></label>
.required {
color: red;
}
I am new to Wordpress.I stuck in a problem where i want to Submit a form and also want data insertion in the wpdb in the same page.
Now i have two different pages one is for submit the form and another is to insert the data in the mysql db respectively.
I want to do the above process of form submission and data insertion in the same page.
Below are the codes:
Below is the code for a form which will redirect to another page for data insertion.
<!DOCTYPE html>
<html>
<style>
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
div {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
</style>
<body>
<h3>Web Design On-line Requisition Form</h3>
<div>
<form action="example.com?page_id=345" method="post" name="webForm">
<label for="cname">Company/Institute Name</label>
<input type="text" id="cname" name="cname">
<label for="pname">Your Name</label>
<input type="text" id="pname" name="pname">
<label for="webtype">Type of Website</label>
<select id="webtype" name="webtype">
<option value="Personal(Static Pages)">Personal(Static Pages)</option>
<option value="Personal(Dynamic Page)">Personal(Dynamic Page)</option>
<option value="Commercial(Static Pages)">Commercial(Static Pages)</option>
<option value="Commercial(Dynamic Page)">Commercial(Dynamic Page)</option>
<option value="Online Shopping Site">Online Shopping Site</option>
<option value="Educational Site">Educational Site</option>
<option value="Other">Other</option>
</select>
<label for="contact">Contact No.</label>
<input type="text" id="contact" name="contact">
<label for="email">Email ID</label>
<input type="text" id="email" name="email">
<label for="address">Address</label>
<input type="text" id="address" name="address">
<label for="pappdate">Preferred Appointment Date</label>
<input type="date" name="pappdate">
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>
This is another page where i wrote the code for data insertion to the mysql using wpdb
[insert_php]
$cname=$_POST['cname'];
$pname=$_POST['pname'];
$webtype=$_POST['webtype'];
$contact=$_POST['contact'];
$email=$_POST['email'];
$address=$_POST['address'];
$pappdate=$_POST['pappdate'];
global $wpdb;
$wpdb->insert(
'sometable',
array(
'cname' => $cname,
'pname' => $pname,
'webtype' => $webtype,
'contact' => $contact,
'email' => $email,
'address' => $address,
'pappdate' => $pappdate
),
array(
'%s',
'%s',
'%s',
'%s',
'%s',
'%s',
'%s'
)
);
[/insert_php]
I am new to wordpress.I have a program in which form submission and data insertion are in the same page.
What i want is when data is inserted into the database a "thank you" post page will generate.
I have already used the header function for redirecting but it is not working.Please see the program below.
Do i placed the else statement wrongly?
Along with this i want to know where do i will set the form validation function in this program?
Please help me.
Here is the program
<!DOCTYPE html>
<html>
<style>
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
div {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
</style>
<body>
<h3>Form Name</h3>
[insert_php] if (!empty($_POST))
$cname=$_POST['cname'];
$pname=$_POST['pname'];
$webtype=$_POST['webtype'];
$contact=$_POST['contact'];
$email=$_POST['email'];
$address=$_POST['address'];
$pappdate=$_POST['pappdate'];
global $wpdb;
$wpdb->insert(
'tab_m_webdesign',
array(
'cname' => $cname,
'pname' => $pname,
'webtype' => $webtype,
'contact' => $contact,
'email' => $email,
'address' => $address,
'pappdate' => $pappdate
),
array(
'%s',
'%s',
'%s',
'%s',
'%s',
'%s',
'%s'
)
);
header("Location: http://example.com/myOtherpost");
[/insert_php]
<div>
[insert_php] else [/insert_php]
<form action="" method="post" name="webForm">
<label for="cname">Company/Institute Name</label>
<input type="text" id="cname" name="cname">
<label for="pname">Your Name</label>
<input type="text" id="pname" name="pname">
<label for="webtype">Type of Website</label>
<select id="webtype" name="webtype">
<option value="Personal(Static Pages)">Personal(Static Pages)</option>
<option value="Personal(Dynamic Page)">Personal(Dynamic Page)</option>
<option value="Commercial(Static Pages)">Commercial(Static Pages)</option>
<option value="Commercial(Dynamic Page)">Commercial(Dynamic Page)</option>
<option value="Online Shopping Site">Online Shopping Site</option>
<option value="Educational Site">Educational Site</option>
<option value="Other">Other</option>
</select>
<label for="contact">Contact No.</label>
<input type="text" id="contact" name="contact">
<label for="email">Email ID</label>
<input type="text" id="email" name="email">
<label for="address">Address</label>
<input type="text" id="address" name="address">
<label for="pappdate">Preferred Appointment Date</label>
<input type="date" name="pappdate">
<input type="submit" value="Submit">
</form>
[insert_php] endif; [/insert_php]
</div>
</body>
</html>
Header function must be called before any output on the page.
You should place you php insert code before html tag.
Another way is add ob_start() on top of page.
am making this form input in my HMVC project. i want to have
input type="date"
but it happens to be the output was just like a normal textbox. what other ways can i do this or what is the error?
add_view.php
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/bootstrap/css/inputfield.css">
<html>
<div>
<fieldset>
<?php
echo form_open('Clients/create');
?>
<p>
<label class="field" for=""><span>*</span>Name:</label>
<input type = "text" name="" class ="textbox-300">
</p>
<p>
<label class="field" for=""><span>*</span>Details:</label>
<textarea name=""></textarea>
</p>
</br></br></br>
<p>
<label class="field" for=""><span>*</span>Address:</label>
<textarea name=""></textarea>
</p>
<p>
<label class="field" for=""><span>*</span>Contact Number:</label>
<input type = "text" name="" class ="textbox-300">
</p>
<p>
<label class="field" for=""><span>*</span>Contact Email:</label>
<input type = "text" name="" class ="textbox-300">
</p>
<p>
<label class="field" for=""><span>*</span>Date Added:</label>
<input type="date" name="" min="1950-01-01">
</p>
<?php
echo form_submit('submit','Save');
echo validation_errors();
echo form_close();
?>
</fieldset>
</div>
</html>
inputfield.css
textarea {
width: 51%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px black;
border-radius: 4px;
resize: none;
float:right;
}
fieldset {
width: 500px;
}
label .field{
text-align:left;
width:100px;
float:left;
font-weight: bold;
}
input.textbox-300{
width:350;
float:right;
}
fieldset p {
clear:both;
padding:5px;
}
label span, .required{
color:red;
font-weight: bold;
}
.center {
margin: auto;
padding: 10px;
}
im sorry im not good in this date thing so please help me
You are getting empty textbox result because you are not using name attribute in your input fields just add name attribute in all input fields as:
Example:
<input type = "text" name="yourName" class ="textbox-300">
<textarea name="Details"></textarea>
<textarea name="Address"></textarea>
<input type = "text" name="ContactNo" class ="textbox-300">
<input type = "text" name="Email" class ="textbox-300">
<input type="date" name="YourDate" min="1950-01-01">
date picker appears to be blank because it is not supported by mozilla fire fox. if theres any that mozilla supports please let me know. thanks