The HTML5 datalist element provides an “autocomplete” feature on form elements. With it, you can provide a list of predefined options to the user as they input data.

Now, when a user is entering some text into a text field, a list can drop down with pre-filled values for them to choose from.

How to Make a datalist for a Form Field Input Element
The datalist tag was introduced in HTML 5.

Use the ID of the datalist tag to associate it with the appropriate input.
For example, if the datalist tag has an id=”myDataList”, then the list attribute of the input element will look like this: list=”myDataList”.

You can fill the datalist element by nesting option tags inside the datalist tag. Here is an example of the code for the HTML5 datalist element:

23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

<p>
<label>
  Enter your favorite Star Trek character:<br />
<input type="text" name="favCharacter" list="myDataList">
<datalist id="myDataList">
 <option value="Captain Kirk">
 <option value="Spock">
 <option value="Bones">
 <option value="Scotty">
 <option value="Sulu">
 <option value="Chekov">
 <option value="Uhura">
 <option value="Jean-Luc Picard">
 <option value="Data">
 <option value="Geordi La Forge">
 <option value="Worf">
</datalist>
</label>
</p>

Enter your favorite Star Trek character:

OK, so now you know. Go be nice to your users with the HTML5

Enter the box-shadow element! The box-shadow element is supported in IE9+, Firefox 4, Chrome, Opera, and Safari 5.1.1. The syntax of the box-shadow CSS3 element is as follows:

box-shadow: h-shadow v-shadow blur spread color inset;

The box-shadow element is a comma separated list of properties that effect the position and size and color and even the opacity of the shadow. Note the inset perimeter. That controls wether the shadow is inside of or outside of the object getting the shadow.

23
24
25
26
27
28

 
.image-framer img {
border-radius: 5px 5px 5px 5px;
/* box-shadow: h-shadow v-shadow blur spread color inset;*/
box-shadow: 3px  3px 5px 0 rgba(0, 0, 0, 0.5);
}

The first to parameters control the horizontal and vertical position of the shadow.

Next is the optional blur distance measure followed by the optional spread (or size) of the shadow.

The next paramiter is the color parameter. Here is where you can use the new CSS3 rgba(0, 0, 0, 0.5) element. With the rgba(0, 0, 0, 0.5) element you can control the opacity as well. Or you could use the color number here if you like without opacity.

OK, well, enough talk. Go try it out!

Just put the following code wherever in your script you need to know what function is calling the part you are working on.

45
46
47
48
49
50

<?php>
 
$backtrace = debug_backtrace();
print "The function that just called this code is <strong>" .$backtrace[1]['function'] . "<strong>.";
 
</php>

This will output something like this:

The function that just called this code is DrawWidget.

Where DrawWidget is the name of the function.

I hope this comes in handy for someone. Thanks for visiting!

Be sure to read the documentation for db_query() on how to use the database API securely.

When passing plain-text from the user to HTML markup, you need to pass it through the check_plain() function first. Drupal’s check_plain() converts quotes, ampersands and angle brackets into entities. This causes the string to be shown in a literal way on the browser screen.

There are a few themeable functions that automatically sanitize text by first passing it through check_plain(). They are: t() , menu items and breadcrumbs, Block descriptions (‘but not titles’), theme(‘ plain-text placeholder’), theme_username() and Drupal Form API #default_value element and #options element when the type is a select box.

Examples:

23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<?php>
        $form['safe_way'] = array(
          '#type' => 'textfield',
          '#default_value' => $user_supplied,
        );
 
        $form['not_safe_way'] = array(
          '#type' => 'select',
          '#default_value' => 0, //FORM API will pass this through 
                                 //check_plain(),
          '#options' => node_get_types('names'),  // DANGER: FORM 
                                 // API will NOT sanitize the  
                                 // '#options' attribute with 
                                 // check_plain().
        );
?>

As a Drupal module developer, it is important to commit to memory some common places where sanitizing plain text is important.

Setting the page title:
Examples:

23
24
25
26
27
28
29
30

<?php>
 
        drupal_set_title($node->title);//BAD, XSS vulnerability
        drupal_set_title(check_plain($node->title));// Correct way
        //NOTE: The same applies to block titles that are 
        //      passed through hook_block().
 
?>

Form elements #description and #title
Examples:

23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

<?php>
 
        $form['wrong_way'] = array(
        '#type' => 'textfield',
        '#default_value' => check_plain($user_supplied),  //←-escaped twice
        '#description' => t("Old data: !data", array('!data' => $user_supplied)), // XSS
        );
 
        $form['right_way'] = array(
        '#type' => 'textfield',
        '#default_value' => $user_supplied,
        '#description' => t("Old data: @data", array('@data' => $user_supplied)),
        );
 
?>

Form elements – #options when #type = checkboxes or #type = radios
Examples:

23
24
25
26
27
28
29
30
31
32
33
34
35

<?php>
 
        $form['wrong_way'] = array(
          '#type' => 'checkboxes',
          '#options' => array($user_supplied0, $u_supplied1),
        );
 
        $form['right_way'] = array(
          '#type' => 'checkboxes',
          '#options' => array(check_plain($user_supplied0), check_plain($user_supplied1)),
        );
 
?>

Form elements – #value of #type markup and item need to be safe.
Note that the default form element #type is markup!
Examples:

23
24
25
26
27
28
29
30

<?php>
 
        $form['wrong_way'] = array('#value' => $user->name); //XSS
        $form['right_way'] = array('#value' => check_plain($user->name));
         //       - or -
        $form['right_way'] = array('#value' => theme('username', $user));
 
?>

This information was gleaned from the Drupal documentation at “Handle text in a secure fashion”, which covers this topic more extensively than this post.

Start by declaring an array. One for the values of the multi select element and one for the text values. Well, if you even need the text values from the multi select, that is.

Now we can use the ‘ :selected’ jQuery selector. That we get all the items from the select element that the user has selected. We can use the jQuery ‘each()’ function to iterate over the select element and gather the values and texts into the arrays using jQuery’s standard ‘.val()’ and ‘.text()’ functions.

Next iterate through the selected items, using the standard val() to return the selected option’s value or text() to grab the actual display text that made up the list item.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

 
$document.ready({
 
var vals = [];
var textvals = [];
 
function getMultipleSelectVals( id ){
  $( '#' + id + ' :selected' ).each( function( i, selected ) {
      vals[i] = $( selected ).val();
      textvals[i] = $( selected ).text();
  });
}// end function
 
});//$document.ready

The form I was working on was up until now, being built in such a way that this was not a problem. However, when I started working on a select element that uses AJAX to call an undetermined number of subsequent select elements, I decided to put that logic inside of the callback function. That was a “bad move”. The callback function needs to call upon a $form array that has already been built. Logically, I figured that I could just add to the existing $form array before returning it via the AJAX callback function. After all since I ad not yet returned it, why not? Well the reason why not is buried somewhere in the Drupal Forms API I suppose.

So, be sure to build the form elements into the $forms array prior to the AJAX callback function getting called.

.deligate() is used to attach a handler to one or more events for all the elements that match the selectore. This happens for both the present and the future and is based on a set of root elements.

By using delegate() we can prepare jQuery to look for elements that have net been created yet. So, when your AJAX calls return their resulting elements now you can work with them using jQuery.