Permanent character in html form test inout - php

I am making a form that will save to an xml file using php. I have gotten everything to work great, but I want to automatically add a $ to the input field so the user does not have to. How can I start out with a $ as the first character? (Only dealing with whole dollars so I don't need to worry about decimals). This is the simple text input I have made.
<label>Price:</label><br />
<input type="text" name="txtPrice" />

Use ::before in CSS
label::before {
content:"$";
color: blue;
}
<label><input type="text" name="txtPrice" id='input' /></labl>.
Working Demo

Try this:
<label>Price:</label><br />
<input type="text" name="txtPrice" value="$" />
Or this:
<label>Price:</label><br />
$<input type="text" name="txtPrice" value="$" />

I was just having fun with this one, but it puts the $ in the box.
http://jsfiddle.net/NGH7d/3/
Not sure if this will work in IE6-8, also you probably need to adjust the numbers around.
<label class="money">$</label><input type="text" id="txtprice" name="txtPrice" id='input' />
label.money{
color: blue;
float:left;
position:relative;
left:12px;
top:3px;
}
#txtprice {
padding-left:12px;
}

Related

PHP CSS how to add some style to existing style

I have this scenario in a PHP file:
<input type="text" id="myinput" minlength="6" maxlength="6" value="..." onkeyup="..." onfocusout="..." style="width: 20%; display: inline;" />
where I'd like to add some css if I got an error... I tried first with :
<input type="text" id="myinput" minlength="6" maxlength="6" value="..." onkeyup="..." onfocusout="..." style="width: 20%; display: inline;" <?php if($this->error == "2"){ echo 'style="border:2px solid red;"'; } ?> />
but it didn't applied because there is already a CSS... then I tried calling
?><script>$("#myinput").addClass('k3_border_ko');</script><?php
in the place of code where I encounter an error on that input but it didn't applied...
How I can apply adding that border color red if I have already a style in this way?
Thanks in advance!
Cheers! :-)
a simple approach would be
$style_noerr = '...';
$style_err = '...';
<input ... <?php if($this->error == "2"){ echo $style_err; } else {echo $style_noerr ;} ?> />
irrelevant note: your input has no name field but you'll need.

how to change the default placeholder of input type date HTML5

is there an opportunity to change the default placeholder?
I already tried to change the <value="<input something>"/> and i also tried the placeholder tag but none of them worked
maybe someone can help
You can do this with CSS like below:
input[type="date"]:before {
content: attr(placeholder) !important;
color: #aaa;
margin-right: 0.5em;
}
input[type="date"]:focus:before,
input[type="date"]:valid:before {
content: "";
}
Then in the HTML page, do like below:
<input type="date" placeholder="Choose a Date" />
The solution is taken from this StackOverflow answer: How do I simulate placeholder functionality on input date field?
A html input tag is written like this
<input type="text" name="name" placeholder="placeholder text" value="input text">
The placeholder text is only displayed when the value is empty.

Can't use NAME in form can I use ID instead?

I am working on a project that is developed using Kohana and due to some conditions I have no access to use NAME in the forms instead I have an option to use ID but I tried using the following method which didn't work.
<form action="sendmail.php" method="post">
<p><input type="text" size="30" style="border-radius:15px; border:2px solid #000; padding:5px;" placeholder="Name" id="contname" /><br />
<br />
<input type="text" size="30" style="border-radius:15px; border:2px solid #000; padding:5px;" placeholder="Email" id="contemail" /><br />
<br />
<input type="text" size="30" style="border-radius:15px; border:2px solid #000; padding:5px;" placeholder="Subject" id="contsubject" /><br />
<br />
<textarea style="border-radius:5px; border:2px solid #000; padding:5px; width:320px; height:120px;" id="contmessage" placeholder="Message"></textarea><br />
<br />
<input type="submit" value="SUBMIT" style="background-color:#9377dd; border-radius:10px; padding-top:3px; padding-bottom:3px; padding-left:16px; padding-right:16px;" /></p>
</form>
sendmail.php
<?php
$from = $_POST["contemail"];
$message = $_POST["contname"] . "<br/>". $_POST["contsubject"] . "<br/>" . $_POST["contmessage"];
mail("me#mail.com","From contact form",$message,"From: $from\n");
mail("me#mail.com","From contact form",$message,"From: $from\n");
header('Location: faq');
?>
Any alternate method please???
When you post the form then in server side you can access that field by their name. Now you are not using the name and instead of you are using the id then I will suggest you to use javascript ajax method to post the form. This is the only alternative method is available.
When you post a form, the form is converted into key/value pairs and sent to the server. For example...
<input name="MyName" value="MyValue">
Is sent to the server as
MyName=MyValue
Unless the browser can form a key/value pair it won't send the data - this is true whether you are missing the key (from the name attribute) or a value (for example a checkbox that is not checked).
You could iterate over the form using JavaScript and create a form post using a different attribute (such as your ID), but if you have access to add JavaScript to this form, it would be easier to just add names.

HTML forms, add area on click

I'm not sure how to ask what I'm looking for to search how-tos. I am building a form and one of the entries requires users to list an appliance, its voltage, watts, amps, phase, etc.
I'd like a simple row with "X" columns providing the text areas for one appliance and then the ability to click a link to 'add another appliance' using jquery/html.
I like using placeholder text to save space on the page. I can get all this set up just fine for a single entry like 'name' however I don't know how to implement an 'add entry' row. All of the data is stored via PHP in MySQL.
So A: What is the name of this type of form section. B: What is it called when we want to let the user add a row to this section?
I love making things harder than they really are. It's my specialty. I guess :)
EDIT: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_form_submit
Using this format with 5 columns per entry (though it will all be on one line/row) I'd like to have an "add entry" link which generates a new blank entry option.
#elecNeeds input[type=text], textarea {
font-size: 12px;
font-style: italic;
width: 15%;
height: 20px;
padding: 10px;
color: #212323;
background: #E3E3E3;
background: rgba(255, 255, 255, 0.5);
border: 2px #000 solid;
margin-bottom: 10px;
position: relative;
behavior: url(/js/PIE.htc);
}
<div id="elecNeeds">
<input type="text" name="appliance" placeholder="Type of Equipment">
<input type="text" name="voltage" placeholder="Voltage">
<input type="text" name="watts" placeholder="Watts">
<input type="text" name="amps" placeholder="Phase">
<input type="text" name="notes" placeholder="Notes">
<br /> Add an appliance
</div>
I don't know what's it called, but you probably want this - http://jsfiddle.net/uPWkf/1/
<form method="post" action="#" id="myForm">
<div id="nameFields">
<label>Watt <input type="text" name="watt0" /></label>
<label>Volt <input type="text" name="volt0" /></label>
<label>Amp <input type="text" name="amp0" /></label><br/><br />
</div>
<input type="submit" value="submit" id="submit" />
</form>
Add New Row
and the JS
var i = 1;
$("#addRow").click(function() {
$("#nameFields").append('<label>Watt <input type="text" name="watt' + i + '" /></label><label>Volt <input type="text" name="volt' + i + '" /></label><label>Amp <input type="text" name="amp' + i + '" /></label><br/><br />');
i++;
});
$('#myForm').submit(function() {
var values = $('#myForm').serialize();
alert(values);
});
I think You need to use $(selector).append('<code>'); function. For example:
Add
<table class="my_fuits">
<tr>
<td>Fruit</td>
<td><input type="text" name="fuits[]" /></td>
</tr>
</table>
and js(jQuery) code:
$(document).ready(function(){
// add one more row
$(".add").live('click',function(){
$(".my_fuits").append('<tr><td>Fruit '+$(".my_fruits input").length+'</td><td><input type="text" name="fuits[]" />[X]</td></tr>');
return false;
});
// remove row
$(".remove").live('click',function(){
$(this).parent().parent().remove();
return false;
});
});

Is this a good way to catch bots?

Is this method sufficient?
<?php
// User pressed "Register"
if (!empty($_POST['name']) && $_POST['email']) {
if (!empty($_POST['antispam']))
exit("bye");
}
?>
<form>
<input type="hidden" name="antispam" value="" />
Accname: <input type="text" name="name" value="" />
Email: <input type="text" name="email" value="" />
......
</form>
In all basic sense of the idea, sure. Only thing I would recommend for your simple implementation is that most spam scanners that you're trying to block out look for fields titled "username", "name", "user", etc ..
So, isntead of naming your honeypot "antispam" I would name it "username" or something similar that does not conflict with your existing form.
probably the best name for a form-field designed to trigger a spam bot would be url
The chances of a bot parsing the html for type=text attributes or textarea tag a and ignoring all others are quite reasonable.
Your chances of trapping a spambot can be improved with a few extra lines of code:
styles.css:
#commentUrl {
display: none;
}
script.js:
function setFlag() {
document.getElementById('commentUrl').value = 'Javascript check ok';
}
form.html:
<form onsubmit="setFlag();" method="post" action="comment.php">
<label for="commentName">Accname:</label>
<input type="text" id="commentName" name="comment_name" value="" />
<label for="commentEmail">Email:</label>
<input type="text" id="commentEmail" name="comment_email" value="" />
<label for="commentUrl">Url:</label>
<input type="text" id="commentUrl" name="comment_url" value="http://" />
</form>
comment.php:
<?php
if ($_POST['comment_url'] <> 'Javascript check ok' && $_POST['comment_url'] <> 'http://') {
// Let's increase their server load.
header('Location: http://' . $_SERVER['REMOTE_ADDR'] . '/', 307);
}
?>
Because you use three different languages you improve the chances of catching the spammer considerably.
You could improve the javascript by dynamically appending the <link rel="stylesheet" dynamically to the DOM for example.
I wouldn't recommend making the input type hidden or let it have something with "spam" in it. The best way would be to give it a neutral name ("message" maybe) and hide it from the page via css. Additionally I would measure how long it took to fill out the form (as this will be very fast or very slow by robots) by adding a timestamp field (and again give it a neutral name and maybe encode it).
I would not use a hidden field as bots might be looking for only elements of type="text". The naming should be something common but something you have no use for, examples being:
firstname
lastname
email
username
password
bio
description
You should change your input from
<input type="hidden" name="antispam" value="" />
to something more along the lines of
<input type="text" name="username" value="" style="display:none; height: 0; width: 0; border: none; background: transparent; margin: 0; padding: 0;" />

Categories