HTML - Custom Text Fields And Form Elements
I have created a nice Newsletter Registration form, but I would really like to modify the form so that instead of displaying the browsers default images for text fields, checkboxes, etc, I want it to display my images that I have created. Is this possible without stepping into flash?
Thanks Guys! -NH Similar TutorialsI have a form but a text field and a hidden field don't come in form elements.I am alerting all form elements in a javascript function which is invoked on press of a button and these two form elements don't come. Any idea why that will happen. JS function which alerts the form elements is as follows :- function populateSubmitProfile() { var i =0; alert("Number of forms "+document.forms.length) ; for( i = 0 ; i < document.forms[0].elements.length ; i++) { alert("Name of the elements :"+document.forms[0].elements[i].name) ; } } Hi everyone, What I am asking is more complicated than the thread title says. Can someone please tell me how, or post some code to show how I can make input fields with these properties: 1. Make text appear in an input field whilst off focus but dissapear whilst on focus, re-appear again if put back on focus. 2. The user can type text in the field and edit it and when the input field is off focus the text he wrote remains there. 3. If the user completely erases the text he wrote and puts the input field off focus the default text (stated in 1.) re-appears. 4. Make a password input field without the default text (1.) being displayed as stars (hidden charaters) with same features as 1. , 2. , and 3. ofcourse. Can anyone please help me?... Evan Help! How to put text in input fields? -------------------------------------------------------------------------------- Hi everyone, What I am asking is more complicated than the thread title says. Can someone please tell me how, or post some code to show how I can make input fields with these properties: 1. Make text appear in an input field whilst off focus but dissapear whilst on focus, re-appear again if put back on focus. 2. The user can type text in the field and edit it and when the input field is off focus the text he wrote remains there. 3. If the user completely erases the text he wrote and puts the input field off focus the default text (stated in 1.) re-appears. 4. Make a password input field without the default text (1.) being displayed as stars (hidden charaters) with same features as 1. , 2. , and 3. ofcourse. Can anyone please help me?... Evan Hi all! i have an annoying problem with a simple form, which accures only in explorer... the text fields respond to a click only at their very left end, or, if I give them a value, where the text actually show. How do I make it so that they will be "chosen" in response to a click anywhere within them? You can see a proto of the form at www.teleionholon.com/TH/form.html. This works great in Firefox, only explorer gives me a hard time! thank you so much! Shir Hey all, I'm having a problem with html input text fields. I'm trying to display a name in it but it only shows the first part of that name. Here is the part of the code I'm using for one of those : Code: <label>Name <span class="small">Name sent</span> </label> <input type="text" name="name" id="name" value=<?php echo $_POST["name"]; ?> /> If, as example, the name I'm getting from $_POST is : Alexander Johnson, there will only be Alexander in the text field. Note that if I create a really small function like this : Code: $name = $_POST["name"]; echo $name; Then the output will be Alexander Johnson instead of simply Alexander. Anyone knows what I'm doing wrong? (I'm using the labels and span class with css, but I don't think this is the problem. Hello, I am trying to create a page where the user can select four of their best skills and put in their past experience (in years) in previously defined boxes and have that automatically update the "results." But, i need the results to be filterable to match the top three skills exactly. So i put in skils A,B,C,D and i get results of jobs that "match" A,B,C. I have created a javascript for show/hide but i dont know how to add this updatable/filterable content. Here is a demo of my page Quote: <html> <head> <script type="text/javascript"> <!-- function experience(element_id) { var results = document.getElementById(element_id + "_Results"); var element = document.getElementById(element_id); results.value = element.value; } </script> <script> function showhide(id){ if (document.getElementById){ obj = document.getElementById(id); if (obj.style.display == "none"){ obj.style.display = ""; } else { obj.style.display = "none"; } } } </script> <title></title> </head> <body> <form name="compass"> <table border="1" width="100%"> <tr> <td colspan="2">Top Competencies</td> </tr> <tr> <td><select name="competencies"><option value="Setting Direction">Setting Direction</option><option value="Leadership Courage">Leadership Courage</option><option value="Creating the Environment">Creating the Environment</option><option value="Building and Maintaing Relationships">Building and Maintaining Relationships</option><option value="Developing for the Future">Developing for the Future</option><option value="Organizational Savvy">Organizational Savvy</option><option value="Achieving Measurable Results">Achieving Measurable Results</option> <option value="Customer Focus">Customer Focus</option> <option value="Ethics and Integrity">Ethics and Integrity</option> <option value="Composure">Composure</option> <option value="Personal Learning">Personal Learning</option> <option value="Dealing with Ambiguity">Dealing with Ambiguity</option> <option value="Decision-Making">Decision-Making</option> <option value="Interpersonal Savvy">Interpersonal Savvy</option> <option value="Results Oriented">Results Oriented</option> </select></td> <td><select name="competencies"><option value="Setting Direction">Setting Direction</option><option value="Leadership Courage">Leadership Courage</option><option value="Creating the Environment">Creating the Environment</option><option value="Building and Maintaing Relationships">Building and Maintaining Relationships</option><option value="Developing for the Future">Developing for the Future</option><option value="Organizational Savvy">Organizational Savvy</option><option value="Achieving Measurable Results">Achieving Measurable Results</option> <option value="Customer Focus">Customer Focus</option> <option value="Ethics and Integrity">Ethics and Integrity</option> <option value="Composure">Composure</option> <option value="Personal Learning">Personal Learning</option> <option value="Dealing with Ambiguity">Dealing with Ambiguity</option> <option value="Decision-Making">Decision-Making</option> <option value="Interpersonal Savvy">Interpersonal Savvy</option> <option value="Results Oriented">Results Oriented</option> </select></td> </tr> <tr> <td><select name="competencies"><option value="Setting Direction">Setting Direction</option><option value="Leadership Courage">Leadership Courage</option><option value="Creating the Environment">Creating the Environment</option><option value="Building and Maintaing Relationships">Building and Maintaining Relationships</option><option value="Developing for the Future">Developing for the Future</option><option value="Organizational Savvy">Organizational Savvy</option><option value="Achieving Measurable Results">Achieving Measurable Results</option> <option value="Customer Focus">Customer Focus</option> <option value="Ethics and Integrity">Ethics and Integrity</option> <option value="Composure">Composure</option> <option value="Personal Learning">Personal Learning</option> <option value="Dealing with Ambiguity">Dealing with Ambiguity</option> <option value="Decision-Making">Decision-Making</option> <option value="Interpersonal Savvy">Interpersonal Savvy</option> <option value="Results Oriented">Results Oriented</option> </select></td> <td><select name="competencies"><option value="Setting Direction">Setting Direction</option><option value="Leadership Courage">Leadership Courage</option><option value="Creating the Environment">Creating the Environment</option><option value="Building and Maintaing Relationships">Building and Maintaining Relationships</option><option value="Developing for the Future">Developing for the Future</option><option value="Organizational Savvy">Organizational Savvy</option><option value="Achieving Measurable Results">Achieving Measurable Results</option> <option value="Customer Focus">Customer Focus</option> <option value="Ethics and Integrity">Ethics and Integrity</option> <option value="Composure">Composure</option> <option value="Personal Learning">Personal Learning</option> <option value="Dealing with Ambiguity">Dealing with Ambiguity</option> <option value="Decision-Making">Decision-Making</option> <option value="Interpersonal Savvy">Interpersonal Savvy</option> <option value="Results Oriented">Results Oriented</option> </select></td> </tr> <tr> <td colspan="1"><input type="text" name="1" size="100%" value="Consulting to senior leadership" disabled></td> <td colspan="1"><input type="text" id="Requirements1" name="Requirements" onChange="experience('Requirements1')" value="Enter Years"></td> </tr> <tr> <td colspan="1"><input type="text" name="2" size="100%" value="Equal Employment Opportunity (EEO) and related human resource practices" disabled></td> <td colspan="1"><input type="text" id="Requirements2" name="Requirements" onChange="experience('Requirements2')" value="Enter Years"></td> </tr> <tr> <td colspan="1"><input type="text" name="3" size="100%" value="Recruiting with a large company" disabled></td> <td colspan="1"><input type="text" id="Requirements3" name="Requirements" onChange="experience('Requirements3')" value="Enter Years"></td> </tr> <tr> <td colspan="1"><input type="text" name="4" size="100%" value="Leadership and management" disabled></td> <td colspan="1"><input type="text" id="Requirements4" name="Requirements" onChange="experience('Requirements4')" value="Enter Years"></td> </tr> <tr> <td colspan="1"><input type="text" name="5" size="100%" value="Recruiting for diverse functional areas" disabled></td> <td colspan="1"><input type="text" id="Requirements5" name="Requirements" onChange="experience('Requirements5')" value="Enter Years"></td> </tr> <tr> <td colspan="4">Results</td> </tr> <tr> <td colspan="1"><div style="display:;" id="script"><input type="text" name="1" size="100%" value="Consulting to senior seadership" disabled></td> <td colspan="1"><input type="text" id="Requirements1_Results" name="Requirements1_Results" disabled></td> </tr> <tr> <td colspan="1"><div style="display:;" id="script2"><input type="text" name="2" size="100%" value="Equal Employment Opportunity (EEO) and related human resource practices" disabled></td> <td colspan="1"><input type="text" id="Requirements2_Results" name="Requirements2_Results" disabled></td> </tr> <tr> <td colspan="1"><input type="text" name="3" size="100%" value="Recruiting with a large company" disabled></td> <td colspan="1"><input type="text" id="Requirements3_Results" name="Requirements3_Results" disabled></td> </tr> <tr> <td colspan="1"><input type="text" name="4" size="100%" value="Leadership and management" disabled></td> <td colspan="1"><input type="text" id="Requirements4_Results" name="Requirements4_Results" disabled></td> </tr> <tr> <td colspan="1"><input type="text" name="5" size="100%" value="Recruiting for diverse functional areass" disabled></td> <td colspan="1"><input type="text" id="Requirements5_Results" name="Requirements5_Results" disabled></td></div> </tr> <p><a href="#" onclick="showhide('script'); return(false);">hide again</a></p> </table> </form> </body> </html> That is the page, i know it looks long and codey but its just because it has many examples. I really would appreciate any help! Thanks so much for all your past help guys/gals Is there a way to put a custom graphic for the browse button in the file upload field, similar to how you can use a custom graphic for the submit button? Hi all, I have an exam form wherein a student fills up all the details of the exam ad clicks on submit. The data is stored in an access database. I need to send all the fields in the form to an address specified in the form field as well as a confirmation email to a specific address. Please let me know how do i resolve this Regards, Nimish. I have a problem with my mandatory fields in the fact that i know not on how to make them mandatory. normally on a web page mandatory fields are yellow or sometimes other colours, and the non-mandatory fields are normally white. well i do have 3 yellow boxes on my page and then the rest are white, but the yellow boxes are not mandatory! I would like them to be but they are not. any help on how to make fields mandatory? http://prokix.com/OnlineRegistration.htm is the webpage Hi All, I have 2 buttons that need to be placed side by side and link to Paypal. I have used the "display:inline" on both forms and with the fields I need to hide, the "type=hidden" When I view the page in Firefox all looks, but in IE, although the hidden fields are hidden, they are still taking up space. So the two buttons are not sitting next to each other, there is a big gap where the 'hidden' layers would be. Anyone have any ideas how I can get around this? Many thanks I'm stuck. I've got a form up, just about ready to go public, but I need to set it so that certain fields are required. In the past I've done this without any problem... Usually using just a hidden field, value="required" and listing the fields that are required. But, for some reason, it's not working on this form. Here's the form: http://www.weddingsbybelles.com/contact/survey.htm Quick fix? Is there another easy alternative? Any idea why my old standby stopped working? Forgive me if this seems like a stupid question but I need help... I'm trying to do a simple online form that emails me the results from a few fields. Here is the code: Code: <form action="http://cm1web1/WebSurveyComponents/script/processform.asp" method="post"> <!-- Mandatory "hidden" objects --> <p> <input type="hidden" name="strInputElements" readonly value="Suggestion"> <input type="hidden" name="strInputElements" value="Name"> <input type="hidden" name="strInputElements" value="Email"> <input type="hidden" name="strInputElements" value="Business Unit"> <input type="hidden" name="intSendMode" readonly value="0"> <input type="hidden" name="strSendParms" readonly value="mark@website.com,CSPS Intranet Suggestion Box"> Name: <input type=text name="Name"> <br>(optional, but required if you would like a response to your comments or suggestions)</p> <p>Email: <input type=text name="Email"> <br>(optional) </p> <p>Business unit: <input type=text name="Business Unit"> <br>(optional) </p> <p> <textarea name="Suggestion" rows="12" cols="40">Write your feedback or suggestion here</textarea> <br> <br> <input name="Send" type="submit" value="Send"> <input name="Clear" type="reset" value="Clear"> </p> <p>(Unless you fill in your name and/or email, this form is completely anonymous)</p> </form> And the email I receive looks like this... Field = Suggestion Response = Write your feedback or suggestion here Field = Name Response = Field = Email Response = Field = Business Unit Response = The "Suggestion" field works fine, but the Name, Email and Business Unit fields all come through with blank responses. Any ideas? Thanks! Mark Hi, I have a form that has a bunch of cascading drop downs - something like Country->State->City->. Each subsequent drop down is populated based on what is selected on the preceding one. What I am having trouble with is the positioning of the labels for these dropdowns. For ex., I want the word 'Country' written exactly above the Country dropdown, the word 'State' above the State dropdown and so on. Unfortunately, anything I try doesn't seem to work. I have used every CSS property I thought would help - margin, position, padding etc., but nothing works. The problem is when I resize the window the labels and the dropdowns are thrown out of whack and it becomes difficult to figure out just by looking which label belongs to which dropdown box. How do I fix this and align the form with their respective labels and make it independent of the size of the window? Thanks! I created a form with html. At the end of the form there are two buttons, the button "entry", and the button "reset". When clicking on "entry" button i want to print the form's elements. How can i do it? Hi there, I have created a basic HTML Form but wish to make some fields mandatory. What code do i use to make the fields mandatory Thanks In advance Richard Hello Does anyone knows since when (or which html version) it is allowed to define form input names as arrays such as: ex: <form ...> <input name="MyArray[email]" /> <input name="MyArray[phone]" /> </form> I am trying to amend an existing form so that some fields are mandatory. So far this is what I've have on the script right before </head> tag: Code: <script type="text/javascript"> function checkForm(frm){ msg = ""; if(!frm.name.value){ msg += "- Name is required\n"; } if(!frm.phone.value){ msg += "- Phone is required\n"; } if(!frm.email.value){ msg += "- Email is required\n"; } if(msg != ""){ alert(msg); return false; } } </script> and on at the begining of the form itself I have: Code: <form id="form1" name="form1" method="post" action="contact1.php" onsubmit="return checkForm(this)"> <input type="text" name="name" id="name"><br> <input type="text" name="email" id="email" style="margin-top:3px "><br> <input type="text" name="phone" id="phone" style="margin-top:3px "><br> But when I get the form back on my test email all the fields are empty! Here here my contact.php: PHP Code: <? $subject="Booking Table from ".$_GET['name'] ; $headers= "From: ".$_GET['email']."\n"; $headers.='Content-type: text/html; charset=iso-8859-1'; mail("contactatalexotero.co.uk", $subject, " <html> <head> <title>Book Table</title> </head> <body> <br>Phone Number ".$_GET['phone']." <br>Number of people ".$_GET['people']." <br>Where? ".$_GET['where']." <br>Time ".$_GET['time']." <br>Date ".$_GET['day']."/ ".$_GET['month']."/ ".$_GET['year']." <br>Message ".$_GET['message']." </body> </html>" , $headers); echo ("Your message was successfully sent! We will contact you shortly to confirm your table!"); ?> <script> window.close </script> What do I do wrong? Please help me Hi all, I need your help. I have created an HTML web form that's processed by a PHP script. It works absolutely fine but I now need to do add a couple of conditional fields on this in this HTML Form which I don't know how to. The first field in the form is Presenter's Name. Underneath this field, I want to have a checkbox stating "Click here if additional Presenters". As soon as this option is checked off, a new input text field should appear underneath it and at the bottom of the form, a text box should appear for additional presenter's bio. How do I do that? Thanks a trillion in advance for your help. Hello, On a form I'm working on, I've set up the address fields as required. However, if the user selects the "International Residence" option, I'd like the address fields to be not required. Could someone point me in the right direction? Thanks a bunch, Mike I've honest to god looked for 2 days for tutorials and pre set up scripts for this but cannot understand any of it. could someone please make all of my friends required, except for the radio buttons. i just need at least one of them selected. id really appreciate it. thank you. Quote: <form name="_xclick" action="https://www.paypal.com/us/cgi-bin/webscr" onSubmit="return emailCheck()" method="post"> <input type="hidden" name="cmd" value="_xclick"> <input type="hidden" name="business" value="boxer_347@yahoo.com"> <input type="hidden" name="currency_code" value="USD"> <input type="hidden" name="item_name" value="Personal Plan"> <center> <table> <tr> <td> <input type="hidden" name="on1" value="name"><font size="2"><b>First Name:</b></font></td> <td> <input type="text" name="os1" maxlength="200"><font size="2" color="#666666"><br>(Your first name)<br><br></font></td> </tr> <tr> <td> <input type="hidden" name="on1" value="account"><font size="2"><b>Account Name:</b></font></td> <td> <input type="text" name="os1" maxlength="200"><font size="2" color="#666666"><br>(Register a cPanel username)<br><br></font></td> </tr> <tr> <td> <input type="hidden" name="on1" value="password"><font size="2"><b>Password:</b></font></td> <td> <input type="password" name="os1" maxlength="200"><font size="2" color="#666666"><br>(Register a cPanel password)<br><br></font></td> </tr> <tr> <td> <input type="hidden" name="on1" value="email"><font size="2"><b>Email Address:</b></font></td> <td> <input type="text" name="os1" maxlength="200"><font size="2" color="#666666"><br>(Email address we can contact you at)<br><br></font></td> </tr> <tr> <td> <input type="hidden" name="on1" value="domain"><font size="2"><b>Domain:</b></font></td> <td> <input type="text" name="os1" maxlength="200"><font size="2"> (Optional)</font><br><font size="2" color="#666666">(Domain you wish to link to us)</font></td> </tr> </table> </center> <br> <center> <table> <tr> <td> <input type="radio" name="amount" value="1.00"><b>1 Month - $1.00</b> </td> </tr> <tr> <td> <input type="radio" name="amount" value="2.70"><b>3 Months $2.70 (Save 10%)</b> </td> </tr> <tr> <td> <input type="radio" name="amount" value="4.92"><b>6 Months - $4.92 (Save 18%)</b> </td> </tr> <tr> <td> <input type="radio" name="amount" value="9.00"><b>1 Year - $9.00 (Save 25%)</b> </td> </tr> </table> </center> <center> <br> <table> <tr> <td> <input type="checkbox" name="agree" value="tos"> I agree to the <a STYLE="text-decoration:none" href="tos.html"><font size="2" color="#3999FF">Terms of Service</font></a> </td> </tr> </table> <br> <table> <tr> <td> <input type="image" src="https://www.paypalobjects.com/WEBSCR-480-20070831-2/en_US/i/btn/btn_buynowCC_LG.gif" style="float:right;" border="0" name="submit"> </td></tr> </table> </center> </form> |