HTML5 新表单元素和属性——datalist、keygen 和 output
在 HTML4 中，表单元素通常只有少数几个，比如文本框、密码框、单选框、复选框等等。而在 HTML5 中，增加了一些新的表单元素和属性，下面会为大家介绍其中三个：datalist、keygen 和 output。
datalist 元素
datalist 元素用于指定一个可选项列表，这些选项将被用于与输入框配合使用。下面是一个简单的例子：
<label for="fruit">选择你喜欢的水果：</label> <input list="fruits" id="fruit" name="fruit"> <datalist id="fruits"> <option value="苹果"> <option value="香蕉"> <option value="橙子"> <option value="西瓜"> </datalist>
在这个例子中，我们创建了一个输入框和一个选项列表。当用户在输入框中输入内容时，浏览器会自动显示与之匹配的选项。
keygen 元素
keygen 元素用于生成一个公私钥对，以便进行身份验证。下面是一个简单的例子：
<form> <label for="username">用户名：</label> <input type="text" id="username" name="username"><br> <label for="passphrase">口令短语：</label> <input type="password" id="passphrase" name="passphrase"><br> <keygen name="keypair"> </form>
在这个例子中，当用户提交表单时，浏览器会自动生成一个公私钥对，并将公钥作为表单数据的一部分发送到服务器。服务器可以使用这个公钥来验证用户的身份。
output 元素
output 元素用于显示计算结果或者其他表单数据。下面是一个简单的例子：
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)"> <label>输入两个数字：</label><br> <input type="number" id="a" name="a"> <input type="number" id="b" name="b"><br> <label>结果：</label> <output name="result" for="a b"></output> </form>
在这个例子中，我们创建了两个数字输入框和一个输出框。当用户输入数字时，浏览器会自动计算它们的和，并将结果显示在输出框中。
总结
HTML5 的新表单元素和属性使得表单更加方便、灵活，为用户和开发者提供更好的体验。datalist 元素用于指定一个可选项列表，keygen 元素用于生成一个公私钥对，以便进行身份验证，output 元素用于显示计算结果或者其他表单数据。
当然，除了这三个元素之外，HTML5 还引入了许多其他的新特性，例如 Web Storage、Web Workers、Web Sockets 等等。开发者可以根据自己的需求来选择使用哪些元素和属性。
