From 2fb1ebc7f1a04b45b4118ba4c3b6183d8e884603 Mon Sep 17 00:00:00 2001
From: Jakub Vrana <jakub@vrana.cz>
Date: Wed, 5 Dec 2012 13:11:36 -0800
Subject: [PATCH] HTML5 input fields

---
 adminer/create.inc.php            | 2 +-
 adminer/db.inc.php                | 2 +-
 adminer/event.inc.php             | 2 +-
 adminer/include/adminer.inc.php   | 8 ++++----
 adminer/include/design.inc.php    | 2 +-
 adminer/include/editing.inc.php   | 2 +-
 adminer/include/functions.inc.php | 3 ++-
 adminer/indexes.inc.php           | 2 +-
 adminer/static/default.css        | 1 +
 changes.txt                       | 1 +
 editor/include/adminer.inc.php    | 4 ++--
 11 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/adminer/create.inc.php b/adminer/create.inc.php
index 619ce2ab..b698a8ec 100644
--- a/adminer/create.inc.php
+++ b/adminer/create.inc.php
@@ -198,7 +198,7 @@ if (support("partitioning")) {
 <p>
 <?php echo html_select("partition_by", array(-1 => "") + $partition_by, $row["partition_by"], "partitionByChange(this);"); ?>
 (<input name="partition" value="<?php echo h($row["partition"]); ?>">)
-<?php echo lang('Partitions'); ?>: <input name="partitions" size="2" value="<?php echo h($row["partitions"]); ?>"<?php echo ($partition_table || !$row["partition_by"] ? " class='hidden'" : ""); ?>>
+<?php echo lang('Partitions'); ?>: <input type="number" name="partitions" class="size" value="<?php echo h($row["partitions"]); ?>"<?php echo ($partition_table || !$row["partition_by"] ? " class='hidden'" : ""); ?>>
 <table cellspacing="0" id="partition-table"<?php echo ($partition_table ? "" : " class='hidden'"); ?>>
 <thead><tr><th><?php echo lang('Partition name'); ?><th><?php echo lang('Values'); ?></thead>
 <?php
diff --git a/adminer/db.inc.php b/adminer/db.inc.php
index 29a2bab7..9ad10c61 100644
--- a/adminer/db.inc.php
+++ b/adminer/db.inc.php
@@ -50,7 +50,7 @@ if ($adminer->homepage()) {
 			echo "<p class='message'>" . lang('No tables.') . "\n";
 		} else {
 			echo "<form action='' method='post'>\n";
-			echo "<p>" . lang('Search data in tables') . ": <input name='query' value='" . h($_POST["query"]) . "'> <input type='submit' name='search' value='" . lang('Search') . "'>\n";
+			echo "<p>" . lang('Search data in tables') . ": <input type='search' name='query' value='" . h($_POST["query"]) . "'> <input type='submit' name='search' value='" . lang('Search') . "'>\n";
 			if ($_POST["search"] && $_POST["query"] != "") {
 				search_tables();
 			}
diff --git a/adminer/event.inc.php b/adminer/event.inc.php
index f7e87678..c1926a9b 100644
--- a/adminer/event.inc.php
+++ b/adminer/event.inc.php
@@ -38,7 +38,7 @@ if (!$row && $EVENT != "") {
 <tr><th><?php echo lang('Name'); ?><td><input name="EVENT_NAME" value="<?php echo h($row["EVENT_NAME"]); ?>" maxlength="64">
 <tr><th><?php echo lang('Start'); ?><td><input name="STARTS" value="<?php echo h("$row[EXECUTE_AT]$row[STARTS]"); ?>">
 <tr><th><?php echo lang('End'); ?><td><input name="ENDS" value="<?php echo h($row["ENDS"]); ?>">
-<tr><th><?php echo lang('Every'); ?><td><input name="INTERVAL_VALUE" value="<?php echo h($row["INTERVAL_VALUE"]); ?>" size="6"> <?php echo html_select("INTERVAL_FIELD", $intervals, $row["INTERVAL_FIELD"]); ?>
+<tr><th><?php echo lang('Every'); ?><td><input type="number" name="INTERVAL_VALUE" value="<?php echo h($row["INTERVAL_VALUE"]); ?>" class="size"> <?php echo html_select("INTERVAL_FIELD", $intervals, $row["INTERVAL_FIELD"]); ?>
 <tr><th><?php echo lang('Status'); ?><td><?php echo html_select("STATUS", $statuses, $row["STATUS"]); ?>
 <tr><th><?php echo lang('Comment'); ?><td><input name="EVENT_COMMENT" value="<?php echo h($row["EVENT_COMMENT"]); ?>" maxlength="64">
 <tr><th>&nbsp;<td><?php echo checkbox("ON_COMPLETION", "PRESERVE", $row["ON_COMPLETION"] == "PRESERVE", lang('On completion preserve')); ?>
diff --git a/adminer/include/adminer.inc.php b/adminer/include/adminer.inc.php
index 96d3301a..0445d8a5 100644
--- a/adminer/include/adminer.inc.php
+++ b/adminer/include/adminer.inc.php
@@ -240,7 +240,7 @@ username.form['auth[driver]'].onchange();
 		foreach ($indexes as $i => $index) {
 			if ($index["type"] == "FULLTEXT") {
 				echo "(<i>" . implode("</i>, <i>", array_map('h', $index["columns"])) . "</i>) AGAINST";
-				echo " <input name='fulltext[$i]' value='" . h($_GET["fulltext"][$i]) . "' onchange='selectFieldChange(this.form);'>";
+				echo " <input type='search' name='fulltext[$i]' value='" . h($_GET["fulltext"][$i]) . "' onchange='selectFieldChange(this.form);'>";
 				echo checkbox("boolean[$i]", 1, isset($_GET["boolean"][$i]), "BOOL");
 				echo "<br>\n";
 			}
@@ -253,7 +253,7 @@ username.form['auth[driver]'].onchange();
 			if (!$val || ("$val[col]$val[val]" != "" && in_array($val["op"], $this->operators))) {
 				echo "<div><select name='where[$i][col]' onchange='$change_next'><option value=''>(" . lang('anywhere') . ")" . optionlist($columns, $val["col"], true) . "</select>";
 				echo html_select("where[$i][op]", $this->operators, $val["op"], $change_next);
-				echo "<input name='where[$i][val]' value='" . h($val["val"]) . "' onchange='" . ($val ? "selectFieldChange(this.form)" : "selectAddRow(this)") . ";'></div>\n";
+				echo "<input type='search' name='where[$i][val]' value='" . h($val["val"]) . "' onchange='" . ($val ? "selectFieldChange(this.form)" : "selectAddRow(this)") . ";'></div>\n";
 			}
 		}
 		echo "</div></fieldset>\n";
@@ -286,7 +286,7 @@ username.form['auth[driver]'].onchange();
 	*/
 	function selectLimitPrint($limit) {
 		echo "<fieldset><legend>" . lang('Limit') . "</legend><div>"; // <div> for easy styling
-		echo "<input name='limit' size='3' value='" . h($limit) . "' onchange='selectFieldChange(this.form);'>";
+		echo "<input type='number' name='limit' class='size' value='" . h($limit) . "' onchange='selectFieldChange(this.form);'>";
 		echo "</div></fieldset>\n";
 	}
 	
@@ -297,7 +297,7 @@ username.form['auth[driver]'].onchange();
 	function selectLengthPrint($text_length) {
 		if ($text_length !== null) {
 			echo "<fieldset><legend>" . lang('Text length') . "</legend><div>";
-			echo '<input name="text_length" size="3" value="' . h($text_length) . '">';
+			echo "<input type='number' name='text_length' class='size' value='" . h($text_length) . "'>";
 			echo "</div></fieldset>\n";
 		}
 	}
diff --git a/adminer/include/design.inc.php b/adminer/include/design.inc.php
index fb13af2d..c2a331fd 100644
--- a/adminer/include/design.inc.php
+++ b/adminer/include/design.inc.php
@@ -16,7 +16,7 @@ function page_header($title, $error = "", $breadcrumb = array(), $title2 = "") {
 	$title_all = $title . ($title2 != "" ? ": " . h($title2) : "");
 	$title_page = strip_tags($title_all . (SERVER != "" && SERVER != "localhost" ? h(" - " . SERVER) : "") . " - " . $adminer->name());
 	?>
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
+<!DOCTYPE html>
 <html lang="<?php echo $LANG; ?>" dir="<?php echo lang('ltr'); ?>">
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <meta http-equiv="Content-Script-Type" content="text/javascript">
diff --git a/adminer/include/editing.inc.php b/adminer/include/editing.inc.php
index ca7ebd28..8a7da38d 100644
--- a/adminer/include/editing.inc.php
+++ b/adminer/include/editing.inc.php
@@ -147,7 +147,7 @@ function edit_type($key, $field, $collations, $foreign_keys = array()) {
 	global $structured_types, $types, $unsigned, $on_actions;
 	?>
 <td><select name="<?php echo $key; ?>[type]" class="type" onfocus="lastType = selectValue(this);" onchange="editingTypeChange(this);"><?php echo optionlist((!$field["type"] || isset($types[$field["type"]]) ? array() : array($field["type"])) + $structured_types + ($foreign_keys ? array(lang('Foreign keys') => $foreign_keys) : array()), $field["type"]); ?></select>
-<td><input name="<?php echo $key; ?>[length]" value="<?php echo h($field["length"]); ?>" size="3" onfocus="editingLengthFocus(this);"><td class="options"><?php
+<td><input name="<?php echo $key; ?>[length]" value="<?php echo h($field["length"]); ?>" size="3" onfocus="editingLengthFocus(this);"><td class="options"><?php //! type="number" with enabled JavaScript
 	echo "<select name='$key" . "[collation]'" . (ereg('(char|text|enum|set)$', $field["type"]) ? "" : " class='hidden'") . '><option value="">(' . lang('collation') . ')' . optionlist($collations, $field["collation"]) . '</select>';
 	echo ($unsigned ? "<select name='$key" . "[unsigned]'" . (!$field["type"] || ereg('(int|float|double|decimal)$', $field["type"]) ? "" : " class='hidden'") . '><option>' . optionlist($unsigned, $field["unsigned"]) . '</select>' : '');
 	echo ($foreign_keys ? "<select name='$key" . "[on_delete]'" . (ereg("`", $field["type"]) ? "" : " class='hidden'") . "><option value=''>(" . lang('ON DELETE') . ")" . optionlist(explode("|", $on_actions), $field["on_delete"]) . "</select> " : " "); // space for IE
diff --git a/adminer/include/functions.inc.php b/adminer/include/functions.inc.php
index b047726e..01b2fa43 100644
--- a/adminer/include/functions.inc.php
+++ b/adminer/include/functions.inc.php
@@ -740,7 +740,8 @@ function input($field, $value, $function) {
 		} else {
 			// int(3) is only a display hint
 			$maxlength = (!ereg('int', $field["type"]) && preg_match('~^(\\d+)(,(\\d+))?$~', $field["length"], $match) ? ((ereg("binary", $field["type"]) ? 2 : 1) * $match[1] + ($match[3] ? 1 : 0) + ($match[2] && !$field["unsigned"] ? 1 : 0)) : ($types[$field["type"]] ? $types[$field["type"]] + ($field["unsigned"] ? 0 : 1) : 0));
-			echo "<input value='" . h($value) . "'" . ($maxlength ? " maxlength='$maxlength'" : "") . (ereg('char|binary', $field["type"]) && $maxlength > 20 ? " size='40'" : "") . "$attrs>";
+			// type='date' and type='time' display localized value which may be confusing, type='datetime' uses 'T' as date and time separator
+			echo "<input" . (ereg('int|float|double|decimal', $field["type"]) ? " type='number'" : "") . " value='" . h($value) . "'" . ($maxlength ? " maxlength='$maxlength'" : "") . (ereg('char|binary', $field["type"]) && $maxlength > 20 ? " size='40'" : "") . "$attrs>";
 		}
 	}
 }
diff --git a/adminer/indexes.inc.php b/adminer/indexes.inc.php
index 7eb4874d..67787f60 100644
--- a/adminer/indexes.inc.php
+++ b/adminer/indexes.inc.php
@@ -89,7 +89,7 @@ foreach ($row["indexes"] as $index) {
 	$i = 1;
 	foreach ($index["columns"] as $key => $column) {
 		echo "<span>" . html_select("indexes[$j][columns][$i]", array(-1 => "") + $fields, $column, ($i == count($index["columns"]) ? "indexesAddColumn" : "indexesChangeColumn") . "(this, '" . js_escape($jush == "sql" ? "" : $_GET["indexes"] . "_") . "');");
-		echo "<input name='indexes[$j][lengths][$i]' size='2' value='" . h($index["lengths"][$key]) . "'> </span>"; //! hide for non-MySQL drivers, add ASC|DESC
+		echo "<input type='number' name='indexes[$j][lengths][$i]' class='size' value='" . h($index["lengths"][$key]) . "'> </span>"; //! hide for non-MySQL drivers, add ASC|DESC
 		$i++;
 	}
 	echo "<td><input name='indexes[$j][name]' value='" . h($index["name"]) . "'>\n";
diff --git a/adminer/static/default.css b/adminer/static/default.css
index 6a4bb98c..603bbe7e 100644
--- a/adminer/static/default.css
+++ b/adminer/static/default.css
@@ -45,6 +45,7 @@ input[type=image] { vertical-align: middle; }
 .active { font-weight: bold; }
 .sqlarea { width: 98%; }
 .icon { width: 18px; height: 18px; }
+.size { width: 6ex; }
 #menu { position: absolute; margin: 10px 0 0; padding: 0 0 30px 0; top: 2em; left: 0; width: 19em; }
 #menu p { padding: .8em 1em; margin: 0; border-bottom: 1px solid #ccc; }
 #dbs { overflow: hidden; }
diff --git a/changes.txt b/changes.txt
index 12807f5f..300095a7 100644
--- a/changes.txt
+++ b/changes.txt
@@ -4,6 +4,7 @@ Don't select row on double click
 Shorten printed values in varchar fields
 Display table default values on wide screens
 Display date in SQL history
+HTML5 input fields
 Fix switching language on first load
 Support enabled mbstring.func_overload
 MySQL: Prolong comment length since MySQL 5.5
diff --git a/editor/include/adminer.inc.php b/editor/include/adminer.inc.php
index ea7dc697..7c29e5e5 100644
--- a/editor/include/adminer.inc.php
+++ b/editor/include/adminer.inc.php
@@ -231,13 +231,13 @@ ORDER BY ORDINAL_POSITION", null, "") as $row) { //! requires MySQL 5
 			if (($val["col"] == "" || $columns[$val["col"]]) && "$val[col]$val[val]" != "") {
 				echo "<div><select name='where[$i][col]'><option value=''>(" . lang('anywhere') . ")" . optionlist($columns, $val["col"], true) . "</select>";
 				echo html_select("where[$i][op]", array(-1 => "") + $this->operators, $val["op"]);
-				echo "<input name='where[$i][val]' value='" . h($val["val"]) . "'></div>\n";
+				echo "<input type='search' name='where[$i][val]' value='" . h($val["val"]) . "'></div>\n";
 				$i++;
 			}
 		}
 		echo "<div><select name='where[$i][col]' onchange='this.nextSibling.nextSibling.onchange();'><option value=''>(" . lang('anywhere') . ")" . optionlist($columns, null, true) . "</select>";
 		echo html_select("where[$i][op]", array(-1 => "") + $this->operators);
-		echo "<input name='where[$i][val]' onchange='selectAddRow(this);'></div>\n";
+		echo "<input type='search' name='where[$i][val]' onchange='selectAddRow(this);'></div>\n";
 		echo "</div></fieldset>\n";
 	}