HTML - Form Buttons

Hello All,
I'm creating a form which has got several parts, divided by tables, which are radio buttons, check boxes etc. All the radio button tables work well with the exception of one where it lets you choose all three options or two, as if they were checkboxes.

The code is:
PHP Code:
<div class="roundedcornrboxorange">
   <div class="roundedcornrtoporange"><div></div></div>
      <div class="roundedcornrcontentorange">
<table width="100%">
<tr>
<td colspan="3"><h3>Which level do you think you're currently are?</h3></td>
</tr>
<tr>
<td width="30%"><input type="radio" name="level[beginner]" id="beginner" value="1"/> Beginner</td>
<td width="30%"><input type="radio" name="level[intermediate]" id="intermediate" value="1"/> Intermediate</td>
<td width="30%"><input type="radio" name="level[advanced]" id="advanced" value="1"/> Advanced</td>
</tr>
</table>

      </div>
   <div class="roundedcornrbottomorange"><div></div></div>
</div> 


Does anyone have an idea what could be going wrong?

The css (in case it helps) is:

PHP Code:
.roundedcornrboxorange {
margin: 5px 0 0 0;
width: 800px;
clear: both;
   background: #ff7b06 url(../images/roundedcornr190406grad.gif) repeat-x top left;
}
.roundedcornrtoporange div {
   background: url(../images/roundedcornr190406tl.gif) no-repeat top left;
}
.roundedcornrtoporange {
   background: transparent url(../images/roundedcornr190406tr.gif) no-repeat top right;
}
.roundedcornrbottomorange div {
   background: url(../images/roundedcornr190406bl.gif) no-repeat bottom left;
}
.roundedcornrbottomorange {
   background: transparent url(../images/roundedcornr190406br.gif) no-repeat bottom right;
}

.roundedcornrtoporange div, .roundedcornrtoporange,
.roundedcornrbottomorange div, .roundedcornrbottomorange {
   width: 100%;
   height: 10px;
   font-size: 1px;
}
.roundedcornrcontentorange { margin: 0 10px; } 


Many thanks in advance

I know this is probably a strange request but I'm trying to figure out how to use an area tag to define a form submit button (or the equivalent of that). Does anyone know if this can be done?

Hi all,

sorry I am pretty new with this so I hope I can explain what it is I am trying to do here.

I've recently been tasked with creating a 'note taking' html template at work, to assist with note taking for operators in a call center. I was selected due to nobody else having any understanding of how computers work beyond using microsoft office, go figure : /

Anyway. Basically what I am trying to do is be able to create a basic htlm template which has a text box, and some 'radio' buttons and check boxes which assign text when selected.

Example, we take down notes when clients call up and speak with someone. We would have say 2 check boxes to cover things like "Full name of client confirmed, confirmed clients details". If the phone operator clicked these 2 buttons, it would copy that exact text into the text box. If they clicked one, it would only copy that.

There would also be a 'radio' button, "Transferred client directly to desired party, transferred client to extension without employee contact" would be the options for example. Basically only 1 option can be selected, and that option would populate the text box if selected.

I'm also looking at hwo to create a button with a 'reset' feature to basically wipe everything clean so it can be started over once the operator takes another call.

So far I am able to create a form with the text box and buttons, but I don't know what code I need to look at to assign text to those buttons.

It's an easy idea, just need to get my foot in the door as I haven't really touched html since I was finishing high school year ago. Anyone able to assist, i would imagine it's not as difficult as I am makign it out to be

In a form, how do I define a radiobutton so that when it is selected additional form fields ara loaded onto the same page holding the text in other fields?

I am using Frontpage 2003 to build my site.

Hope someone can help me. I've got a html page set up so that my clients can type in their name, choose several options via radio buttons, an option to clear the form, then submit the form.

What I'm having trouble with is how to obtain the information from the form. I think I would prefer this to be retrieved via email. Is there a way I can:

1. Have the subject of the email be the name of the client (whatever they type in)
2. The results of the form sent to my email (let's say it's myemail@university.edu)

Thanks in advance!

Here is the html code I have:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Bonus</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>

<form method = "post" action = "mailto:myemail@university.edu">

<p>
Type your name in the box below then select the advancing team and click <i>submit</i> when finished.
</p>

<p>
Name: <input type = "text" name = "name" maxlength = "30"/>
</p>

<table border = "5">
<tr>
<td colspan = "2" align = "center"><b>STANLEY CUP PLAYOFF HUNT BRACKET</b></td>
</tr>
<tr>
<td width="328" align = "center">Eastern Conference</td>
<td width="359" align = "center">Western Conference</td>
</tr>
<tr>
<td><input type = "radio" name = "group1" value = "BB"/>Boston Bruins (1) <input type = "radio" name = "group1" value = "MC"/>Montreal Canadiens (8)</td>
<td><input type = "radio" name = "group2" value = "SJS"/>San Jose Sharks(1) <i>vs.</i> <input type = "radio" name = "group2" value = "AD"/>Anaheim Ducks (8)</td>
</tr>
<tr>
<td><input type = "radio" name = "group3" value = "WC"/>Washington Capitals (2)<input type = "radio" name = "group3" value = "NYR"/>New York Rangers (7)</td>
<td><input type = "radio" name = "group4" value = "DRW"/>Detroit Red Wings (2) <i>vs.</i><input type = "radio" name = "group4" value = "CBJ"/>Columbus Blue Jackets (7)</td>
</tr>
<tr>
<td><input type = "radio" name = "group5" value = "NJD"/>New Jersey Devils (3) <input type = "radio" name = "group5" value = "CH"/>Carolina Hurricans (6)</td>
<td><input type = "radio" name = "group6" value = "VC"/>Vancouver Canucks(3) <i>vs.</i><input type = "radio" name = "group6" value = "SLB"/>St. Louis Blues(6)</td>
</tr>
<tr>
<td><input type = "radio" name = "group7" value = "PP"/>Pittsburgh Penguins (4) <input type = "radio" name = "group7" value = "PF"/>Philadelphia Flyers (5)</td>
<td><input type = "radio" name = "group8" value = "CB"/>Chicago Blackhawks (4) <i>vs.</i><input type = "radio" name = "group8" value = "CF"/>Calgary Flames (5)</td>
</tr>
</table>

<p></p>

<p><input type = "reset" value = "Reset"/> <input type = "submit" value = "Submit" /></p>

</form>

</body>
</html>

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 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

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>

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>

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

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

Hello,
I am using a loop to dynamically generate buttons using the <button> tag. The value for this button is populated using a variable. When I click on one of these buttons, I want the content of the button to be displayed on the text field. But, because it is in a loop and the because the value is a variable only the value of the 1st button comes in and then disappears from the text field. The javascript I am trying out to populate the text field is :
function passButtonValue() {
poitem= document.getElementById("poitem");
hiddenField = document.getElementById("hiddenField");
hiddenField.value = poitem.innerHTML;
}
I am using ABAP for getting the values and running the loop
How can I reprogram it to overcome this problem?

Thanks!

hi
im new to this site and was wondering if anyone could help me.

i need to built a html page that will be sent out to clients. it will have some writing on it and at the end will have three buttons or check boxes.

when a client click on button or check box an email will be sent back tell us what he chose.

any one any ideas how to do this

www.ipmbio.org

This is the website. Here the buttons are in the format as <a><buttons></a>
This works in all browsers expect IE
When they click on buttons in IE nothing happens.

PHP Code:
<a href="/index.php?option=com_content&amp;view=article&amp;id=67"> <input name="About Us" value="About Us" class="art-button" type="button" /> </a> 


This is an example code.
Some one please help me make it work in IE also...asap...i am in urgent...