Tag: list

Suggested Entries Using datalist Element: HTML5

Lets build a simple auto suggesting form field with the help of datalist form element of HTML5.

suggest-list-entries-datalist-form-element-html5

Here I’ve taken a text input field, and with the help of datalist element and list attribute, have built a auto suggesting form field.

HTML file
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

< !DOCTYPE HTML>
<html>
<head>
<title>Auto Suggestion using datalist Element: HTML5</title>
<meta charset="utf-8"/>
</head>
<body>
 
<form>
<input type="text" list="myCompanies"/>
<datalist id="myCompanies">
<option value="Google">
</option><option value="Apple">
</option><option value="Oracle">
</option><option value="Yahoo">
</option><option value="IBM">
</option><option value="Microsoft">
</option><option value="Technotip">
</option><option value="American Express">
</option></datalist>
 
</form>
 
</body>
</html>

Here I’ve added a list attribute to the input field and named it as myCompanies. Also have taken datalist form element with an id which matches the list attribute of the input field.

Auto Suggested Entries Using list attribute: HTML5


[youtube https://www.youtube.com/watch?v=3ExFs-lTbKY]

YouTube Link: https://www.youtube.com/watch?v=3ExFs-lTbKY [Watch the Video In Full Screen.]



Note: You can get the user entry by using key press event, and fetch the corresponding data from the database using PHP, jQuery and mySQL and auto suggest some form entries.
Make sure to fetch 5 to 10 entries only, as it may take more time and may overload the server if you don’t limit the no of entries you fetch from the database. And more over it looks confusing and cluttered, if you suggest too many things at once!

HTML5 and CSS3 Video Tutorial List

Here we list all the HTML5 and CSS3 video tutorials ..all these video tutorials are 3 or 5 or 10 minutes in length and you can go through them very quickly. Learning along with me while I teach is the best way to learn. You can ask your questions/doubts in the comment section of respective tutorial page/post.

HTML5-css3-sticker-technotip

If you’re thinking of HTML7, then my advice would be to first learn HTML5 – this would surly be a basement for upcoming improvements. By learning HTML5, you’ll be ahead of your competition.

Please bookmark this page, share on social sites, let your friends know about our video tutorials – this way you’ll be helping us in our good cause of helping people!

This page will be updated with up coming HTML5 and CSS3 lessons ..stay subscribed

Enter your email address:

    Geolocation API

  1. Geolocation API – Success Handler: HTML5
  2. Geolocation API – Error Handle: HTML5
  3. Google Maps Integration: HTML5
  4. Adding Pin/Marker To Google Map: HTML5
  5. Add Popup message To Google Map Pin: HTML5
  6. Realtime Location Tracking – Google Maps: HTML5

    Canvas

  1. Canvas Basics: HTML5
  2. Draw Rectangle: HTML5 Canvas
  3. Canvas State: HTML5
  4. Canvas clearRect: HTML5
  5. Canvas Lines and Paths: HTML5
  6. Line Ending In Canvas: HTML5
  7. Line Joining In Canvas: HTML5
  8. Draw Arcs/Circle with Canvas: HTML5
  9. Bezier Curve In Canvas: HTML5
  10. Quadratic Curve In Canvas: HTML5
  11. Draw Text on Canvas: HTML5
  12. Shadow Effect on Canvas: HTML5
  13. Canvas Image Patterns: HTML5
  14. Canvas Element Pattern: HTML5
  15. Linear Gradients in Canvas: HTML5
  16. Radial Gradients in Canvas: HTML5
  17. Clipping Paths in Canvas: HTML5
  18. drawImage() in Canvas: HTML5
  19. Translate Transformation in Canvas: HTML5
  20. Scale Transformation in Canvas: HTML5
  21. Rotate Transformation in Canvas: HTML5
  22. Custom Transformation in Canvas: HTML5
  23. globalAlpha and RGBa in Canvas: HTML5
  24. Compositing Methods in Canvas: HTML5
  25. Accessing Raw Pixel Data in Canvas: HTML5
  26. Image Gallery using Canvas: HTML5
  27. Simple Animation using Canvas: HTML5

    HTML5 Web Forms

  1. Pseudo-classes for Form Element
  2. autofocus Attribute of Form Field: HTML5
  3. autocomplete Attribute of Form Field: HTML5
  4. Suggested Entries Using datalist Element: HTML5
  5. Dynamic Suggested List: HTML5 + jQuery + PHP + MySQL
  6. placeholder Attribute of Form Field: HTML5
  7. pattern and title Attribute of Form Field: HTML5
  8. require attribute: HTML5
  9. Form novalidate attribute: HTML5
  10. Text Selection API: HTML5
  11. Form Input Type – search: HTML5
  12. Email Input Type: HTML5
  13. URL Input Type: HTML5
  14. Tel Input Type: HTML5
  15. number Input Type: HTML5
  16. range Input Type: HTML5
  17. date time Input Type: HTML5
  18. color Input Type: HTML5
  19. progress Element: HTML5
  20. Download Attribute: HTML5

..more videos will be added soon, stay subscribed

Enter your email address:

jQuery Tutorial List

Follow the order in this post and make sure to practice all the tutorials and also share your knowledge with our awesome community on our official forum.

If you got to learn anything from our website, then please do not forget to share this page with your friends on Facebook, Google Plus, LinkedIn, Twitter etc..

1. jQuery Basics: Replace Text/String Inside HTML Document

2. jQuery: Selectors, Methods, Effects

3. callback methods / anonymous functions: jQuery

4. jQuery: Basic Image Effects

5. Animation of Text and Image: jQuery

6. Optimize / Improve Performance of jQuery Applications

7. Descendant Selectors: jQuery

8. Append/Add and Remove HTML/XML Elements: jQuery

9. Variables and Javascript Methods In jQuery

10. Animate Image with ‘this’ Selector: jQuery

11. jQuery Event Handling: Binding and Unbinding

12. Working With Images: Small jQuery Application

13. jQuery Methods and CSS: Restaurant Application

14. DOM Tree Traversal: jQuery

15. jQuery Filter Methods To Narrow Selection

16. Dynamically Load Images: jQuery Looping

17. Conditional Logic For Decision Making: jQuery

18. Detach and Attach DOM Elements: jQuery Array

19. Custom Functions: jQuery

20. Reading XML File Using jQuery AJAX Method

21. Insert Data Into MySQL: jQuery + AJAX + PHP

22. Objects, Arrays: JSON Using jQuery

23. Fetch JSON Data Using jQuery AJAX Method: getJSON

24. Fetch JSON Array Elements Using jQuery AJAX Method: getJSON

25. Fetch/Extract Data From Database Without Refreshing Webpage: jQuery

26. Registration Form Using jQuery + PHP + AJAX (PART 1)

27. Registration Form Validation: PHP + jQuery + AJAX (PART 2)

28. Login Form: jQuery + PHP + AJAX

29. Dynamic Image Slider / Gallery: jQuery

30. Auto-Refresh DIV using jQuery

31. Dynamic Suggested List: jQuery .get() method

SELECT / LIST Records From Database Table: PHP & MySQL

Video tutorial demonstrates selecting / listing / fetching of data / records from the database table and displaying it on the browser.

First look at these short videos:
Connect to the database
Simple / basic insertion operation
Insertion of Records into Database using Forms: PHP & MySQL (important)

SELECTING and Displaying Data
index.php

1
2
3
4
5
6
7
8
9

< ?php
  include_once('db.php');
 
 $res = mysql_query("SELECT * FROM apple");
 
  while( $row = mysql_fetch_array($res) )
  echo "$row[id]. $row[name] <br />";
 
?>

Video Tutorial: SELECT / LIST Records From Database Table: PHP & MySQL


[youtube https://www.youtube.com/watch?v=OAT0iTXlqCk]

YouTube Link: https://www.youtube.com/watch?v=OAT0iTXlqCk [Watch the Video In Full Screen.]



Full code
index.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

< ?php
include_once('db.php');
 
if(isset($_POST['name']))
{
  $name = $_POST['name'];
 
  if(mysql_query("INSERT INTO apple VALUES('','$name')"))
echo "Successful Insertion!";
  else
echo "Please try again";
}
 
 
$res = mysql_query("SELECT * FROM apple");
 
 
?>
 
<form action="." method="POST">
Name: <input type="text" name="name"/><br />
<input type="submit" value=" Enter "/>
</form>
 
<h1>List of companies ..</h1>
< ?php
while( $row = mysql_fetch_array($res) )
  echo "$row[id]. $row[name] <br />";
?>

while loop executes until there is data inside the table, once there is no more data to fetch, loop terminates.

MySQL Query

1

mysql> SELECT * FROM apple;

This mysql statement fetches data from all the fields of the table.
We could specify fields and get only list of those values.

Ex:

1

mysql> SELECT id FROM apple;

Using this we can get list of id’s only.

After fetching data from table apple

List of companies ..

1. Google
2. Apple
3. Microsoft
4. Oracle
5. Technotip