close ad
Install the LAtest Updates to Work with CC 2017 and CC 2018
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

Spry And Css Form

Thread began 12/05/2012 7:36 am by Daniel | Last modified 12/07/2012 9:24 am by Jason Byrnes | 2898 views | 15 replies |

Daniel

Spry And Css Form

Hi

Just looking for some help, I would like to add rounded corners to my form text fileds im using spry and the site is at deejaydiamond.bugs3.com/

any help would be great.

I think if i right i just use something like this?

#sprytextfield1 {
border-radius:6px;
-moz-border-radius:6px;
-webkit-border-radius:6px;

and if so do I put it in my main css or the spry one?

Sign in to reply to this post

Jason ByrnesWebAssist

yes, that css looks correct. IT is specifically targeting only the one field with the ID sprytextfield1, you could use the input selector to broaden the rule and apply it to all input elements:
input {
border-radius:6px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
}

The css should go in your main css file, not the spry css file.

see the following page for more details on styling form elements:
roadmap_03.php

Sign in to reply to this post

Daniel

Thanks Jason

What are the other border-radius? i.e whats the opera one and any other i should use? also I have done that and its works so thanks again but its not working for the message filed?

border-radius:6px;
-moz-border-radius:6px;
-webkit-border-radius:6px
opera

Sign in to reply to this post

Jason ByrnesWebAssist

Opera doesn't have a specific border radius implementation, see this page for more details:
border-radius/


a textarea is not an input filed type. you need to include textarea in the selector of the css to target text boxes as well as text fields:

input, textarea {
border-radius:6px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
}

Sign in to reply to this post

Daniel

Thanks Jason, as alwasy you have a been great.

One last thing.

Im looking for a way to have text displayed in the text filed like

in the email box i would like it to say enter your email address and when the box is click or or selected the text gos away.

How is this done?

Sign in to reply to this post

Jason ByrnesWebAssist

use javascript onFocus and onBlur events:

<input name="emailAddress" type="text" id="emailAddress" value="enter your email address" onFocus="if(this.value=='enter your email address')this.value='';" onBlur="if(this.value=='')this.value='enter your email address';"/>
Sign in to reply to this post

Daniel

Sorry to be a pain can you please copy the code from my form and change it so i can copy and past and then ill see where to add the/change it.

Thanks

<div id="formContainer">
<form id="form1" name="form1" method="post" action="index.html">
<div class="formStyle" id="name"><span id="sprytextfield1">
<label for="name2"></label>
<input type="text" name="name" id="name2" />
<span class="textfieldRequiredMsg">Name required.</span></span></div>
<div class="formStyle" id="email"><span id="sprytextfield2">
<label for="email"></label>
<input type="text" name="email" id="email" />
<span class="textfieldRequiredMsg">Email required.</span><span class="textfieldInvalidFormatMsg">Invalid email.</span></span></div>
<div class="formStyle" id="phone"><span id="sprytextfield3">
<label for="phone"></label>
<input type="text" name="phone" id="phone" />
<span class="textfieldRequiredMsg">Phone required.</span></span></div>
<div class="formStyle" id="message"><span id="sprytextarea1">
<label for="message"></label>
<textarea name="message" id="message" cols="45" rows="5"></textarea>
<span class="textareaRequiredMsg">Message required.</span></span></div>
<br />
<div id="captcha"></div>
<img src="/HDWFormCaptcha/FormCaptcha.php?width=180&amp;height=60&amp;letter_count=5&amp;min_size=35&amp;max_size=45&amp;noise=100&amp;noiselength=3&amp;bcolor=ffffff&amp;border=000000" width="180" height="60" id="captchaimg" alt="security code" border="0" /><br />
Enter Security Code:<br />
<input type="text" size="20" name="hdcaptcha" id="hdcaptcha" value="" />
<br />
<?php if (isset($_GET["hdwmsg"]) && $_GET["hdwmsg"] == "invalid") echo chr(60)."font color=red".chr(62)."Please, enter the correct security code.".chr(60)."/font".chr(62); ?>
<script type="text/javascript">function HDW_getCookie(name){ var cname = name + "=";var dc = document.cookie; dc = dc.replace(/\+/g," "); if(dc.length > 0) {begin = dc.indexOf(cname); if (begin != -1) {begin += cname.length; end = dc.indexOf(";", begin); if(end == -1) end = dc.length; var rt = dc.substring(begin, end); return unescape(rt); } } return null;}try {var items = document.getElementsByTagName("input");for(i=0;i < items.length;i++)if (items[i].name != "hdcaptcha" && items[i].name != "hdwfail" )try{var ck = HDW_getCookie("hdw_"+items[i].name);if (ck != "" && ck != null){if (items[i].type == "checkbox")items[i].checked = true;else if (items[i].type == "radio" && items[i].value == ck)items[i].checked = true; else items[i].value = ck;}} catch (e) {}var items = document.getElementsByTagName("select");for(i=0;i < items.length;i++)try{var ck = HDW_getCookie("hdw_"+items[i].name);if (ck != "" && ck != null){for (j=0;j < items[i].length;j++)if (items[i].options[j].value == ck)items[i].selectedIndex = j; }} catch (e) {}var items = document.getElementsByTagName("textarea");for(i=0;i < items.length;i++)try{var ck = HDW_getCookie("hdw_"+items[i].name);if (ck != "" && ck != null)items[i].value = ck;} catch (e) {}} catch (e) {}</script>
<div class="formStyle" id="send">
<input type="submit" name="send" id="send2" value="Submit" />
<input type="reset" name="reset" id="reset" value="Reset" />
</div>
<input type="hidden" name="hdwfail" id="hdwfail" value="error.php" />
</form>
</div>

Sign in to reply to this post

Jason ByrnesWebAssist

ok, well, an example would be the name element:

php:
<input type="text" name="name" id="name2" />



edit it to have a default value:

php:
<input type="text" name="name" id="name2" value="Please Enter a Name" />



then add the onFocus and onBlur events:

php:
<input type="text" name="name" id="name2" value="Please Enter a Name" onFocus="if(this.value=='Please Enter a Name')this.value='';" onBlur="if(this.value=='')this.value='Please Enter a Name';" />



the onfocus event:

php:
onFocus="if(this.value=='Please Enter a Name')this.value='';"



checks to see if the value of the element is the default value, in this case "Please Enter a Name". if it is, then it clears the value and sets it to blank.

the onblur event:

php:
onBlur="if(this.value=='')this.value='Please Enter a Name';"



checks to see if the value is blank, if it is, it sets it to the default "Please Enter a Name" value.

Sign in to reply to this post

Daniel

so it should look like this then?

<input type="text" name="name" id="name2" value="Please Enter Your Name" onFocus="if(this.value=='Please Enter a Name')this.value='';" onBlur="if(this.value=='')this.value='Please Enter a Name';" />

Sign in to reply to this post

Jason ByrnesWebAssist

yes, that is correct.

Sign in to reply to this post
loading

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...