Corso di base di HTML5

API di HTML5

HTML5 Media

HTML5 Grafica

Proprietà di modulo HTML5 Tipi di input HTML5

Elementi di modulo HTML5

HTML5 ha diversi elementi e attributi relativi ai form.

Nuovi elementi di form di HTML5

HTML5 ha i seguenti nuovi elementi di form:

<datalist>
<keygen>
<output>

Attenzione:Non tutti i browser supportano gli elementi di form nuovi di HTML5, ma puoi usarli comunque, anche se il browser non supporta le proprietà del form, possono essere visualizzati come elementi di form normali.

Elemento <datalist> di HTML5

L'elemento <datalist> definisce l'elenco delle opzioni del campo di input.

L'attributo <datalist> stabilisce che il campo form o input dovrebbe avere la funzione di completamento automatico. Quando l'utente inizia a digitare nel campo di completamento automatico, il browser dovrebbe visualizzare le opzioni inserite:

Utilizza l'attributo lista dell'elemento <input> per abbinarsi all'elemento <datalist>.

在线示例

<input> elemento utilizza i valori predefiniti di <datalist>:

Esempio

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>基础教程(oldtoolbag.com)</title>　
</head>
<body>
　　　　
<form action="demo-form.php" method="get">
<input list="languages" name="language">
<datalist id="languages">
　　<option value="C++">
　　<option value="PHP">
　　<option value="Golang">
　　<option value="Python">
　　<option value="Ruby">
</datalist>
<input type="submit">
</form>
<p><strong>注意:</strong> Internet Explorer 9（更早 IE 版本），Safari 不支持 datalist 标签。</p>
</body>
</html>

Prova a vedere ‹/›

HTML5 <keygen> 元素

<keygen> 元素的作用是提供一种验证用户的可靠方法。

<keygen>标签规定用于表单的密钥对生成器字段。

当提交表单时，会生成两个键，一个是私钥，一个公钥。

私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。

在线示例

带有keygen字段的表单:

Esempio

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>基础教程(oldtoolbag.com)</title>　
</head>
<body>
<form action="demo_form.php" method="get">
　　用户名: <input type="text" name="username">
　　加密: <keygen name="security_keygen">
　　<input type="submit">
</form>
<p><strong>注意:</strong> Internet Explorer 不支持 keygen 标签。</p>
</body>
</html>

Prova a vedere ‹/›

HTML5 <output> 元素

<output> 　元素用于不同类型的输出，比如计算或脚本输出：

在线示例

将计算结果显示在 <output> 元素:

Esempio

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>基础教程(oldtoolbag.com)</title>　
</head>
<body>
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
<output name="x" for="a b"></output>
</form>
<p><strong>Attenzione:</strong> Internet Explorer non supporta il tag output.</p>
</body>
</html>

Prova a vedere ‹/›

Formulari intelligenti in Html5

Esempio

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Formulari intelligenti in Html5 oldtoolbag.com</title>
</head>
<body>
<form action="demo-form.php">
　　　　　　　　<fieldset>
　　　　　　　　　　　　<legend>Formulari intelligenti in Html5</legend>
　　　　　　　　　　　　<label for="email">
　　　　　　　　　　　　　　　　email：<input type="email" name="email" id="email"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label for="tel">
　　　　　　　　　　　　　　　　tel:<input type="tel" name="tel" id="tel"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label for="url">
　　　　　　　　　　　　　　　　url:<input type="url" name="" id="url"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label for="number">
　　　　　　　　　　　　　　　　numero:<input type="number" name="" id="number" step="3"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label for="search">
　　　　　　　　　　　　　　　　cerca:<input type="search" name="" id="search"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label for="range">
　　　　　　　　　　　　　　　　intervallo:<input type="range" name="" id="range" value="60" min="0" max="100"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label for="color">
　　　　　　　　　　　　　　　　colore:<input type="color" name="" id="color"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label for="time">
　　　　　　　　　　　　　　　　ora:<input type="time" name="" id="time"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label for="date">
　　　　　　　　　　　　　　　　data:<input type="date" name="" id="date"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label for="month">
　　　　　　　　　　　　　　　　month:<input type="month" name="" id="month"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label for="week">
　　　　　　　　　　　　　　　　week:<input type="week" name="" id="week"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<input type="submit" value="Invia"/>
　　　　　　　　</fieldset>
　　　　</form>
</body>
</html>

Prova a vedere ‹/›

Nuovi elementi di modulo HTML5

Tag	Descrizione
<datalist>	Il tag <input> definisce una lista di opzioni. Utilizzare questo elemento insieme all'elemento input per definire i valori possibili dell'input.
<keygen>	Il tag <keygen> definisce un campo generatore di coppia di chiavi per il modulo.
<output>	Il tag <output> definisce diversi tipi di output, come l'output dello script.

Proprietà di modulo HTML5 Tipi di input HTML5