Tag Archive for form

Simple XHTML Form with CSS

-----------CSS-----------------

label {
  width: 4em;
  float: left;
  text-align: right;
  margin-right: 0.5em;
  display: block;
}

.submit input {
  margin-left: 4.5em;
}
#form input:hover, #form textarea:hover{
	background-color: lightyellow;
}
input:focus, textarea:focus{
background-color: lightyellow;
}

-----------Form----------------

<form action="#">
<p><label for="name">Name</label> <input type="text" id="name" /></p>
<p><label for="e-mail">E-mail</label> <input type="text" id="e-mail" /></p>
<p class="submit"><input type="submit" value="Submit" /></p>
</form>

source

MOOTOOLS JS – Clear input field onClick onFocus on click focus active

// 201004291250 - Mootools clear input on focus, return default value if no data entered
// FROM:  Clear text field with mootools on focus. - MooTools Users | Google Groups <a href="http://bit.ly/cHPev3" >http://bit.ly/cHPev3</a>

/* 
	I've got this snippet that will clear the value on focus and if the value of 
	the focus is '' it will put the default value again in the input. You will 
	need the default value to be on an attribute of the input, like alt or 
	anyother (if you don't bother about validation). 
	
	Fábio Miranda Costa 
	Engenheiro de Computação 
	<a href="http://meiocodigo.com" >http://meiocodigo.com</a> 

*/

// FUNCTION: 

Element.implement({ 
    clearFocusResetBlur: function(attr){ 
        var valueString = this.get(attr); 
        this.addEvents({ 
            'focus': function(){ 
                if( this.get('value') == valueString ) this.set('value',''); 
            }, 
            'blur': function(){ 
                if( this.get('value') == "" ) this.set('value',valueString); 
            } 
        }); 
    } 
}); 


// Usage
// HTML: 
// <input id="input_id" value="some value" alt="default value" /> 


// JS: 
$('.jform form .cleardefault').set('alt','value').clearFocusResetBlur('alt');

source

Implode Form Element Array

// implodeFormArray(form name : String, form element name : String, delimiter : String);
function implodeFormArray(f, e, del) {
	var form	= document.forms[f];
	if (typeof(form.elements[e].value) != "undefined") {
		if (form.elements[e].checked) return form.elements[e].value;
		else return '';
	} else {
		var output	= '';
		var len		= form.elements[e].length;
		for(var i=0;i<len;i++) {
			if (form.elements[e][i].checked) {
				output+= (output == '' ? '':del) + form.elements[e][i].value;
			}
		}
		return output;
	}
}

source

Form — country code generated from an array of countries + codes

<?php
$countries = array(
  "AU" => "Australia",
  "AF" => "Afghanistan",
  "AL" => "Albania",
  "DZ" => "Algeria",
  "AS" => "American Samoa",
  "AD" => "Andorra",
  "AO" => "Angola",
  "AI" => "Anguilla",
  "AQ" => "Antarctica",
  "AG" => "Antigua & Barbuda",
  "AR" => "Argentina",
  "AM" => "Armenia",
  "AW" => "Aruba",
  "AT" => "Austria",
  "AZ" => "Azerbaijan",
  "BS" => "Bahamas",
  "BH" => "Bahrain",
  "BD" => "Bangladesh",
  "BB" => "Barbados",
  "BY" => "Belarus",
  "BE" => "Belgium",
  "BZ" => "Belize",
  "BJ" => "Benin",
  "BM" => "Bermuda",
  "BT" => "Bhutan",
  "BO" => "Bolivia",
  "BA" => "Bosnia/Hercegovina",
  "BW" => "Botswana",
  "BV" => "Bouvet Island",
  "BR" => "Brazil",
  "IO" => "British Indian Ocean Territory",
  "BN" => "Brunei Darussalam",
  "BG" => "Bulgaria",
  "BF" => "Burkina Faso",
  "BI" => "Burundi",
  "KH" => "Cambodia",
  "CM" => "Cameroon",
  "CA" => "Canada",
  "CV" => "Cape Verde",
  "KY" => "Cayman Is",
  "CF" => "Central African Republic",
  "TD" => "Chad",
  "CL" => "Chile",
  "CN" => "China, People's Republic of",
  "CX" => "Christmas Island",
  "CC" => "Cocos Islands",
  "CO" => "Colombia",
  "KM" => "Comoros",
  "CG" => "Congo",
  "CD" => "Congo, Democratic Republic",
  "CK" => "Cook Islands",
  "CR" => "Costa Rica",
  "CI" => "Cote d'Ivoire",
  "HR" => "Croatia",
  "CU" => "Cuba",
  "CY" => "Cyprus",
  "CZ" => "Czech Republic",
  "DK" => "Denmark",
  "DJ" => "Djibouti",
  "DM" => "Dominica",
  "DO" => "Dominican Republic",
  "TP" => "East Timor",
  "EC" => "Ecuador",
  "EG" => "Egypt",
  "SV" => "El Salvador",
  "GQ" => "Equatorial Guinea",
  "ER" => "Eritrea",
  "EE" => "Estonia",
  "ET" => "Ethiopia",
  "FK" => "Falkland Islands",
  "FO" => "Faroe Islands",
  "FJ" => "Fiji",
  "FI" => "Finland",
  "FR" => "France",
  "FX" => "France, Metropolitan",
  "GF" => "French Guiana",
  "PF" => "French Polynesia",
  "TF" => "French South Territories",
  "GA" => "Gabon",
  "GM" => "Gambia",
  "GE" => "Georgia",
  "DE" => "Germany",
  "GH" => "Ghana",
  "GI" => "Gibraltar",
  "GR" => "Greece",
  "GL" => "Greenland",
  "GD" => "Grenada",
  "GP" => "Guadeloupe",
  "GU" => "Guam",
  "GT" => "Guatemala",
  "GN" => "Guinea",
  "GW" => "Guinea-Bissau",
  "GY" => "Guyana",
  "HT" => "Haiti",
  "HM" => "Heard Island And Mcdonald Island",
  "HN" => "Honduras",
  "HK" => "Hong Kong",
  "HU" => "Hungary",
  "IS" => "Iceland",
  "IN" => "India",
  "ID" => "Indonesia",
  "IR" => "Iran",
  "IQ" => "Iraq",
  "IE" => "Ireland",
  "IL" => "Israel",
  "IT" => "Italy",
  "JM" => "Jamaica",
  "JP" => "Japan",
  "JT" => "Johnston Island",
  "JO" => "Jordan",
  "KZ" => "Kazakhstan",
  "KE" => "Kenya",
  "KI" => "Kiribati",
  "KP" => "Korea, Democratic Peoples Republic",
  "KR" => "Korea, Republic of",
  "KW" => "Kuwait",
  "KG" => "Kyrgyzstan",
  "LA" => "Lao People's Democratic Republic",
  "LV" => "Latvia",
  "LB" => "Lebanon",
  "LS" => "Lesotho",
  "LR" => "Liberia",
  "LY" => "Libyan Arab Jamahiriya",
  "LI" => "Liechtenstein",
  "LT" => "Lithuania",
  "LU" => "Luxembourg",
  "MO" => "Macau",
  "MK" => "Macedonia",
  "MG" => "Madagascar",
  "MW" => "Malawi",
  "MY" => "Malaysia",
  "MV" => "Maldives",
  "ML" => "Mali",
  "MT" => "Malta",
  "MH" => "Marshall Islands",
  "MQ" => "Martinique",
  "MR" => "Mauritania",
  "MU" => "Mauritius",
  "YT" => "Mayotte",
  "MX" => "Mexico",
  "FM" => "Micronesia",
  "MD" => "Moldavia",
  "MC" => "Monaco",
  "MN" => "Mongolia",
  "MS" => "Montserrat",
  "MA" => "Morocco",
  "MZ" => "Mozambique",
  "MM" => "Union Of Myanmar",
  "NA" => "Namibia",
  "NR" => "Nauru Island",
  "NP" => "Nepal",
  "NL" => "Netherlands",
  "AN" => "Netherlands Antilles",
  "NC" => "New Caledonia",
  "NZ" => "New Zealand",
  "NI" => "Nicaragua",
  "NE" => "Niger",
  "NG" => "Nigeria",
  "NU" => "Niue",
  "NF" => "Norfolk Island",
  "MP" => "Mariana Islands, Northern",
  "NO" => "Norway",
  "OM" => "Oman",
  "PK" => "Pakistan",
  "PW" => "Palau Islands",
  "PS" => "Palestine",
  "PA" => "Panama",
  "PG" => "Papua New Guinea",
  "PY" => "Paraguay",
  "PE" => "Peru",
  "PH" => "Philippines",
  "PN" => "Pitcairn",
  "PL" => "Poland",
  "PT" => "Portugal",
  "PR" => "Puerto Rico",
  "QA" => "Qatar",
  "RE" => "Reunion Island",
  "RO" => "Romania",
  "RU" => "Russian Federation",
  "RW" => "Rwanda",
  "WS" => "Samoa",
  "SH" => "St Helena",
  "KN" => "St Kitts & Nevis",
  "LC" => "St Lucia",
  "PM" => "St Pierre & Miquelon",
  "VC" => "St Vincent",
  "SM" => "San Marino",
  "ST" => "Sao Tome & Principe",
  "SA" => "Saudi Arabia",
  "SN" => "Senegal",
  "SC" => "Seychelles",
  "SL" => "Sierra Leone",
  "SG" => "Singapore",
  "SK" => "Slovakia",
  "SI" => "Slovenia",
  "SB" => "Solomon Islands",
  "SO" => "Somalia",
  "ZA" => "South Africa",
  "GS" => "South Georgia and South Sandwich",
  "ES" => "Spain",
  "LK" => "Sri Lanka",
  "XX" => "Stateless Persons",
  "SD" => "Sudan",
  "SR" => "Suriname",
  "SJ" => "Svalbard and Jan Mayen",
  "SZ" => "Swaziland",
  "SE" => "Sweden",
  "CH" => "Switzerland",
  "SY" => "Syrian Arab Republic",
  "TW" => "Taiwan, Republic of China",
  "TJ" => "Tajikistan",
  "TZ" => "Tanzania",
  "TH" => "Thailand",
  "TL" => "Timor Leste",
  "TG" => "Togo",
  "TK" => "Tokelau",
  "TO" => "Tonga",
  "TT" => "Trinidad & Tobago",
  "TN" => "Tunisia",
  "TR" => "Turkey",
  "TM" => "Turkmenistan",
  "TC" => "Turks And Caicos Islands",
  "TV" => "Tuvalu",
  "UG" => "Uganda",
  "UA" => "Ukraine",
  "AE" => "United Arab Emirates",
  "GB" => "United Kingdom",
  "UM" => "US Minor Outlying Islands",
  "US" => "USA",
  "HV" => "Upper Volta",
  "UY" => "Uruguay",
  "UZ" => "Uzbekistan",
  "VU" => "Vanuatu",
  "VA" => "Vatican City State",
  "VE" => "Venezuela",
  "VN" => "Vietnam",
  "VG" => "Virgin Islands (British)",
  "VI" => "Virgin Islands (US)",
  "WF" => "Wallis And Futuna Islands",
  "EH" => "Western Sahara",
  "YE" => "Yemen Arab Rep.",
  "YD" => "Yemen Democratic",
  "YU" => "Yugoslavia",
  "ZR" => "Zaire",
  "ZM" => "Zambia",
  "ZW" => "Zimbabwe"
);

$selected = ' selected="selected"';
$_country = NULL;
if ( isset($_GET['country']) ) {
    $_country = isset($countries[$_GET['country']]) ? $_GET['country'] : NULL;
}

echo "<select name="country">";
echo "<option>--- Please select your country --- </option>
";
foreach ( $countries as $code => $country ) {
    echo "<option value="$code"";
    if ( $_country == $code ) {
    echo $selected;
    }
    echo ">$country</option>
";
}
echo "</select>";
?>

source

grouper des choix dans une liste déroulant (select, option et optgroup )

<select name="produits">
	  <optgroup label="Viandes">
	  <option selected="selected">Boeuf</option>
	  <option>Porc</option>
	  <option>Poulet</option>
	  </optgroup>
	  <optgroup label="Légumes">
	  <option>Salade</option>
	  <option>Carotte</option>
	  <option>Bétrave</option>
	  <option>Chou</option>
	  </optgroup>
	</select>

source

redirecting a sharepoint new form

<input type="button" value="Save" name="btnSave" onclick="javascript: {ddwrt:GenFireServerEvent('__commit;__redirect={}')}" />

source

KickApps – Change form validation to use JQuery. Fixes issues with IE

if(Ka.Info.PAGE == "login/registerUser.jsp"){
    if (Ka && Ka.formValidation) {        
        Ka.formValidation.rules['password-match-with'].test = function(val,propVal){return (val == $j('#' + propVal).val()); }
    }
}

source

Convert Shorthand Date to Long Form

list($day, $month, $year) = split('/', $date);
echo date('l, F jS ',  mktime(0, 0, 0, $month, $day, $year));

source

Drupal example on how to use form alter hook

function mysite_form_alter(&$form, &$form_state, $form_id) 
{
  switch ($form_id) 
  {
    case 'user_profile_form':
      $form['account']['name']['#size'] = 30;
      $form['account']['mail']['#size'] = 30;
      break;
  }
}

source

How to change dynamically input type password to show description inside field

/***********************************************************
* txReplaceFormPassword.js
*
* Written by Simone Lippolis - <a href="http://simonelippolis.com" >http://simonelippolis.com</a>
*
* This script is distributed under a Creative Commons - Commercial, Attribution licence
* <a href="http://creativecommons.org/licenses/by/2.5/it/" >http://creativecommons.org/licenses/by/2.5/it/</a>
*
* Feel free to copy, edit, redistribute this script. Please, don't remove credits.
*
* If you find some bug or error, please let me know.
*
* How to use:
*
* 1. Include jquery:
* &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;
*
* 2. Include this script:
* &lt;script type="text/javascript" src="txReplaceFormPassword.js"&gt;&lt;/script&gt;
*
* 3. On document ready, invoke the plugin
*
* $(document).ready(function () {
* &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;$('#pwd').txReplaceFormPassword({
*&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;show_text : 'Password'
*&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;});
* &nbsp;&nbsp; &nbsp;});
*
* consider '#pwd' as the object which needs to be replaced:
*
* &lt;form action="someaction" method="post" id="formid" name="formname"&gt;
*&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;input type="password" name="pwd" id="pwd" value="" /&gt;
*&nbsp;&nbsp; &nbsp;&lt;/form&gt;
*
* The 'show_text' parameters contains the text to be shown in password's
* text field.
*
***********************************************************/

jQuery.fn.txReplaceFormPassword = function(options) {
 var options = jQuery.extend( {
 show_text: 'Password'
 },options);

 function trim(txt) {
 return txt.replace(/^s+|s+$/g, '');
 }

 return this.each(function() {
 if (jQuery(this).val().length == 0) {

 var $pos = jQuery(this).position();
 var $style = jQuery(this).attr('style');
 var $class = jQuery(this).attr('class');
 var $size = jQuery(this).attr('size');
 var $id = jQuery(this).attr('id');
 var $name = jQuery(this).attr('name');

 jQuery(this).hide();
 jQuery(this).after('&lt;input type="text" id="txgrpl-' + $id + '" name="txgrpl-' + $name + '" size="' + $size + '" style="' + $style + '" value="' + options.show_text + '" rel="' + $id + '" title="' + options.show_text + '" /&gt;');

 $('#txgrpl-' + $id).focus(function() {
 $(this).hide();
 var $id = $(this).attr('rel');
 $('#' + $id).show().focus();
 });
 }

 jQuery(this).blur(function() {
 if (trim(jQuery(this).val()) == '' || jQuery(this).val() == undefined) {
 var $id = jQuery(this).attr('id');
 jQuery(this).hide();
 $('#txgrpl-' + $id).show();
 }
 });
 });
};

source