HTML - Buttons In Forms
I'm trying to use an image as a button. I.e. create my own buttons. I can't use input because it creates it's own button and using the <button> makes my button on top of that grey button. Burrito. I'm new to this stuff. Could I be using javascript. And if so, do I use some sort of identifyer in header or can I put it in the document?
Similar TutorialsI've got a quick question. I've got a page with about 6-8 forms on it. Several of the forms are nearly identical, as they accept an ID number, or a selection made from a pop-up option list. What I want to do is collapse the identical forms into a single data entry area and then have several different submit buttons which have different values, then use the value of the submit button to determine what action to perform for the form. My question is... is this a proper use of the type=submit input element, or am I better off keeping the forms separate. All the forms call the same PHP script (itself) to perform the action. I'll be trying it out, but I don't want to waste time redesigning the page if what I'm trying to do will not work. Thanks. Hello, I am trying to create a form so that member can submit a file to our Yahoo! Group. However, I cannot get it to work. Perhaps that this is not even possible? I have an html file that can click on and after they have filled out the form, they would click "submit" and it would post that file into out Yahoo! Group file section. If this isn't possible, is there a way to have it bring up a page with all the information on it after they submitted it so they can just copy and paste? Thanks, DarkEdward Hi I'm trying to add an update profile page on my site and am uploading the details from a database. I want to display the details in a form where there will have the option to click an update button the problem is: i have a radio button where I want it to automatically show the current sex of the member, but how to I determine which box to check and which one to leave? the sex is stored in the database in a enum, values 'male', 'female' the html I've got at the moment is: HTML Code: Male: <input type="radio" name="male" <?php if ($msex = "male") {echo "checked";}?>/> Female: <input type="radio" name="female" <?php if ($msex = "female") {echo "checked";}?>/> Hi Folks, Before I submit code, of which there is a great deal, I was wondering if someone could help me understand a little problem with buttons. My setup is this: 1) A drop-down menu triggers the creation of the form associated with the selection. 2) On that form are three radio buttons which open another form depending on the selection. Sounds simple enough but once the form is opened via radio button you can't click on them until you re-select the same option from the drop-down menu. My objects are set up as follows: Main document - Main form - DD menu - Text field - Sub-form - 3 radio buttons - Sub-form MK2 - Buttons, text fields and labels oh my My thought process is I have a main form object which has a child (Sub-form) and its child has a child (Sub-form MK2). What's even more confusing is when I print out the status of any of the radio buttons it says they are enabled... I just can't interact with them. If you need code I can provide but it is somewhat long. Thanks for your help! Hey All, Well, I'm having some difficulty with buttons on my page. I've decided to add Google search to my website. However, I can't get the submit button to look right. Rather than the button appearing as shown in the photo directly below, it comes up looking like the button in the second photo below. I know this is a minor detail, but it's really bugging me and I can't figure out what's going on. Even if I go directly to Googles website, copy the source code, and paste it directly into my HTML editor (Frontpage 2003) the button still comes up looking like the one in the second picture. Any help would be greatly appreciated. Thanks! Tim www.corvette-restoration.com Hi Guys/Ladies Im working through CSS learning it and so far its going well but i am stuck on this issue and a refuse to turn back to Html Tables etc i want to learn how to code without tables So i have a horizontal Menu bar and i would like to populate it with buttons linking to different sections on the site there is already two buttons but you can see from the image they are both touching one another i need to space them out, the buttons arent finished i want to get the layout sorted first then start adding detail. This is the CSS for the menu bar. I added the background image. HTML Code: div.hideSkiplink { background-image: url('/images/BottomMenu.gif'); width:100%; } div.menu { padding: 4px 0px 4px 8px; } div.menu ul { list-style: none; margin: 0px; padding: 0px; width: auto; } div.menu ul li a, div.menu ul li a:visited { background-color: #465c71; border: 1px #4e667d solid; color: #dde4ec; display: block; line-height: 1.35em; padding: 4px 20px; text-decoration: none; white-space: nowrap; } div.menu ul li a:hover { background-color: #bfcbd6; color: #465c71; text-decoration: none; } div.menu ul li a:active { background-color: #465c71; color: #cfdbe6; text-decoration: none; } This is the code on the site master where im calling the CSS HTML Code: <div class="clear hideSkiplink"> <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal"> <Items> <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/> <asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/> </Items> </asp:Menu> </div> iv attached the image so you can see what its doing.... Hope some one can help me I am making a simple calculator program for a school science fair project, and I used a CSS Button Maker program that I got fro ma google search, and when I try to change my buttons from the normal preset ones to the one I made, it disrupts the onClick, and makes he buttons not work. any idea on how to fix this? Here is before the change to the cool buttons: Code: <HTML> <HEAD> <TITLE>Gavin's Science Fair Project</TITLE> <script LANGUAGE="JavaScript"> function CalculateSum(Atext, Btext, form) { var A = parseFloat(Atext); var B = parseFloat(Btext); form.Answer.value = A + B; } function CalculateDif(Atext, Btext, form) { var A = parseFloat(Atext); var B = parseFloat(Btext); form.Answer.value = A - B; } function CalculatePro(Atext, Btext, form) { var A = parseFloat(Atext); var B = parseFloat(Btext); form.Answer.value = A * B; } function CalculateQuo(Atext, Btext, form) { var A = parseFloat(Atext); var B = parseFloat(Btext); form.Answer.value = A % B; } function ClearForm(form) { form.input_A.value = ""; form.input_B.value = ""; form.Answer.value = ""; } // end of JavaScript functions --> </SCRIPT> <style type="text/css"> input.groovybutton { font-size:15px; width: 250px; height: 25px; font-family:Comic Sans MS,sans-serif; font-weight:bold; color:#000000; background-color:#FF0066; border-style:outset; } </style> </HEAD> <DIV ALIGN=CENTER> <table border="10" bgcolor="#0C6AA1"> <tr> <td><P><FONT SIZE="+3">Simple Calculator</FONT></P> <FORM NAME="Calculator" METHOD="post"> <P>Enter a number: <INPUT TYPE=TEXT NAME="input_A" SIZE=15></P> <P>Enter a number: <INPUT TYPE=TEXT NAME="input_B" SIZE=14></P> <DIV ALIGN=CENTER><P><INPUT TYPE="button" VALUE="Add Numbers" name="AddButton" onClick="CalculateSum(this.form.input_A.value, this.form.input_B.value, this.form)"></P> <P><INPUT TYPE="button" VALUE="Subtract Numbers" name="SubButton" onClick="CalculateDif(this.form.input_A.value, this.form.input_B.value, this.form)"></P> <P><INPUT TYPE="button" VALUE="Multiply Numbers" name="MultButton" onClick="CalculatePro(this.form.input_A.value, this.form.input_B.value, this.form)"></P> <P><INPUT TYPE="button" VALUE="Divide Numbers" name="DivButton" onClick="CalculateQuo(this.form.input_A.value, this.form.input_B.value, this.form)"></P> <P><INPUT TYPE="button" VALUE="Clear Fields" name="ClearButton" onClick="ClearForm(this.form)"></P></DIV> <P>Answer = <INPUT TYPE=TEXT NAME="Answer" SIZE=18></P> </FORM></td> </DIV> </BODY> </HTML> And here is after: Code: <HTML> <HEAD> <TITLE>Gavin's Science Fair Project</TITLE> <script LANGUAGE="JavaScript"> function CalculateSum(Atext, Btext, form) { var A = parseFloat(Atext); var B = parseFloat(Btext); form.Answer.value = A + B; } function CalculateDif(Atext, Btext, form) { var A = parseFloat(Atext); var B = parseFloat(Btext); form.Answer.value = A - B; } function CalculatePro(Atext, Btext, form) { var A = parseFloat(Atext); var B = parseFloat(Btext); form.Answer.value = A * B; } function CalculateQuo(Atext, Btext, form) { var A = parseFloat(Atext); var B = parseFloat(Btext); form.Answer.value = A % B; } function ClearForm(form) { form.input_A.value = ""; form.input_B.value = ""; form.Answer.value = ""; } // end of JavaScript functions --> </SCRIPT> <style type="text/css"> input.groovybutton { font-size:15px; width: 250px; height: 25px; font-family:Comic Sans MS,sans-serif; font-weight:bold; color:#000000; background-color:#FF0066; border-style:outset; } </style> </HEAD> <DIV ALIGN=CENTER> <table border="10" bgcolor="#0C6AA1"> <tr> <td><P><FONT SIZE="+3">Simple Calculator</FONT></P> <FORM NAME="Calculator" METHOD="post"> <P>Enter a number: <INPUT TYPE=TEXT NAME="input_A" SIZE=15></P> <P>Enter a number: <INPUT TYPE=TEXT NAME="input_B" SIZE=15></P> <form name="groovyform"> <input type="button" name="AddButon" class="groovybutton" value="Add Numbers" onClick="CalculateSum(this.form.input_A.value, this.form.input_B.value, this.form)" title=""> </form> <form name="groovyform"> <input type="button" name="SubButton" class="groovybutton" value="Subtract Numbers" onClick="CalculateDif(this.form.input_A.value, this.form.input_B.value, this.form)" title=""> </form> <form name="groovyform"> <input type="button" name="DivButton" class="groovybutton" value="Divide Numbers" onClick="CalculateQuo(this.form.input_A.value, this.form.input_B.value, this.form)" title=""> </form> <form name="groovyform"> <input type="button" name="MultButton" class="groovybutton" value="Multiply Numbers" onClick="CalculatePro(this.form.input_A.value, this.form.input_B.value, this.form)" title=""> </form> <form name="groovyform"> <input type="button" name="ClearButton" class="groovybutton" value="Clear Fields" onClick="ClearForm(this.form)" title=""> </form> <P>Answer = <INPUT TYPE=TEXT NAME="Answer" SIZE=18></P> </FORM></td> </DIV> </BODY> </HTML> If anyone can help with this, It would be greatly appreciated. Ok, ive made the background i want to use on photoshop and im using freewebs for now just to host my website. I've set the background to centre and top, and i am now trying to edit the site on frontpage. I need to put a button in that links to the main page from the first entrance page, which is easier enough. But i need the button to stay centered just below the logo, which is what i need help with. If you dont understand what i mean take a look yourself... http://www.freewebs.com/endofsyrum I need a "Click to Enter" button inbetween the bottom of the page and the bottom of the logo, and i would like it to stay there no matter what screen res or size fo window... Many Thanks, Narc I've played around with this code but it seems as if I can't get the buttons to appear. Is this related to the script type? Anyone know how I can fix this? [the location is not set yet, my problem is just getting the buttons to show up] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <TITLE> Meats </TITLE> </HEAD> <BODY> <SCRIPT type="text/javascript"> <table> <table border="1" align="center" cellpadding="1" cellspacing="1" BGCOLOR=blue > <tr> <td> <INPUT type="button" value="Home" name="button1"onClick="window.location='http://www.htm'"> <td> <INPUT type="button" value="History" name="button2" onClick="window.location='http://steakslocation.htm'"> <td> <INPUT type="button" value="Residents" name="button3" onClick="window.location='http://porklocation.htm'"> <td> <INPUT type="button" value="Events" name="button4" onClick="window.location='http://poultrylocation.htm'"> <td> <INPUT type="button" value="Links" name="button5" onClick="window.location='http://venisonlocation.htm'"> </SCRIPT type="text/javascript"> <div id="PICTURE"> <img src="anthropormophic_bacon.jpg" height="90%" width="90%" alt="Buddy!" /> <center> Y Halo Thar </center> </div> </table> The content of the document...... </BODY> </HTML> I would like to use images as links in my nav bar and im looking for a tutorial or some help with how to make the buttons change when diffrent actions are taken.. eg link visited hover active but i dont know how to change the properties of the link, if anyone can point me in the direction on how to do this either in CSS or in each web page i would be verry grateful i have looked around and havent been able to find anything So I'm extremely new to HTML and I am trying to make a button open new tabs to two sites. Here is what I got so far: HTML Code: <a href='http://www.planetminecraft.com' title='Planet Minecraft : Supporting our Addiction!'><img src='http://www.planetminecraft.com/images/banners/planet_minecraft_mb.gif' border='0' alt='Planet Minecraft Banner'></a> please help i am new to html and i am trying to add an optin form to my site that is linked to my e-mail can anyone help also the email address that the info needs to be sent to is glenwalker@grabtwitter.co.uk Hi, I'm looking for some coding to start a small app that allows the filling of a form in order to submit my free 30 sms that i have montly from my operator. The manual procedure is 1) Login (by cookie or Session) 2) In the page, select SMS 3) Select a category (varies) 4) Write the message & Press Submit 5) Logout What i'm looking for is an app, JS/HTML/PHP/ASP/ETC that could bring the manual procedure described above in one simple form. Okay, I'm trying to make a form that sends the information entered to my email address. I don't know if it's the code or not but all it seems to be doing is opening up a blank email directed to the address. Here's the code: <form action="MAILTO:lifeisbetteroutsidethebox@hotmail.com" method="post" enctype="text/plain"> <p align="center"><strong>Your Full Name:</strong><br /><input name="name" type="text" class="style8" size="20"> </p> <p align="center"><strong>Your Email Address:</strong><br /> <input name="mail" type="text" class="style8" size="20" /> </p> <p align="center"><strong>Your City:</strong><br /> <input name="city" type="text" class="style8" size="20" /> <p align="center"> <input name="Send" type="submit" id="Send" value="Send"> <input name="Reset" type="reset" id="Reset" value="Reset"> </form> Okay, any help please? Can somebody suggest a site where a can download an easy script to make my form work so that I can get it to my email? Thanks Hi can anyone help me I set up a website for a friend and added a form so clients could fill it in and make appointments. For some reason it doesn't seem to work properly. It works from my partners laptop and the main pc but on my laptop nothing happens , after clicking submit the form does not send . I have tried sending it with outlook express open and it still does jot work from laptop The html code is spot on and correct Anyone got any ideas I need help with a form that allows the user to enter and submit the information, and then that information that they enter is automatically dislplayed below on the same page, after they hit the submit button. Here is the code I have. Here is the html code (comment.html) <html> <body> <form action="post.php" method="post"> First Name: <input type ="text" name="firstname"/>   Last Name: <input type ="text" name="lastname"/> <br/> <br/><dd/> Comments orSuggestions: <br/><dd/> <textarea name="comment" rows="10" cols="50"></textarea> </textarea> </form> </body> </html> Here is the php code (post.php) <?php $firstname=$_GET['firstname']; $lastname=$_GET['lastname']; $comment=$_GET['comment']; echo $firstname; echo "&4nbsp; $lastname"; echo ":"; echo " $comment"; ?> I do not want the the info when submitted to be displayed on the php page, I want it displayed on the html page where it was submitted, I was told I needed a php page to do that, but I cannot get it to work. I have a question about forms. What I want to do is make it so that when somebody types something into a text feild and presses 'sumbit', whatever they typed in will appear in a specific place on the page. What I mean is that if somebody typed in their name, it would go to a page that says Hello, (Whatever was just typed). I've been looking everywhere for a code for this but I've come up with nothing. Can somebody help? Hi Everyone. I'm looking for a way to make a form (only one input line) inwhich you write an URL, press submit and it'll send you to that url. not sure if it's only HTML stuff, but i just can't get how to do it. The form should act like the address bar. If you want to know why don't i just use the address bar, It's because I need to use Frames. Yes, I know it's kind of old, but i like it Thanks alot Chaim Hey I'm new to these forums and fairly new to html. I have a question about forms that everybody here probably be knows, but I'm new, so... here it goes. 1. How do I make a submit button that will submit the data entered in the forms before the submit button and send it to me? If I'm not clear enough just ask and I'll try to re-explain myself. |