HTML 表单元素 - 蝴蝶教程

HTML表单元素

本章介绍了所有HTML表单元素。这其中input，select，textarea，button。以及HTML5新添加的datalist，output

<input>元素

最重要的表单元素是<input>元素。 <input>元素可以根据type属性显示不同的<input>类型。

<input name="firstname" type="text">

如果省略type属性，则input字段将获取默认类型：“text”。

所有不同的input类型将在下一章中介绍。

<select>元素

<select>元素定义了一个下拉列表：

<select name="lang">
                 <option value="Java">Java</option>
                 <option value="PHP">PHP</option>
                 <option value="Python">Python</option>
                 <option value="Ruby">Ruby</option>
               </select>

尝试一下

<option>元素定义了可以被选择的选项。默认情况下，选择下拉列表中的第一项。要定义预先选择的选项，请将selected属性添加到该选项：

<select name="lang">
                 <option value="Java">Java</option>
                 <option value="PHP">PHP</option>
                 <option selected value="Python">Python</option>
                 <option value="Ruby">Ruby</option>
               </select>

尝试一下

使用size属性指定可见值的数量：

<select name="lang" size="2">
                 <option value="Java">Java</option>
                 <option value="PHP">PHP</option>
                 <option value="Python">Python</option>
                 <option value="Ruby">Ruby</option>
               </select>

尝试一下

使用multiple属性允许用户选择多个值：

<!-- Windows系统按住Shift或者Ctrl键来选择，Mac系统按住Command键来选择。 -->
               <select name="lang" size="4" multiple>
                 <option value="Java">Java</option>
                 <option value="PHP">PHP</option>
                 <option value="Python">Python</option>
                 <option value="Ruby">Ruby</option>
               </select>

尝试一下

<textarea>元素

<textarea>元素定义了一个多行输入文本：

<textarea name="message" rows="12" cols="28">欢迎来到蝴蝶教程。</textarea>

尝试一下

rows属性指定文本区域中可见的行数。 cols属性指定文本区域的可见宽度。您还可以使用CSS定义文本区域的大小：

<textarea name="message" style="width:210px; height:400px">欢迎来到蝴蝶教程。
                   </textarea>

尝试一下

<button>元素

<button>元素定义了一个可点击的按钮：

<button type="button" onclick="alert('欢迎来到蝴蝶教程!')">点击我!</button>

尝试一下

注意：始终为button元素指定type属性。不同的浏览器可以对按钮元素使用不同的默认类型。

<datalist>元素

HTML5添加两个表单元素：<datalist>和<output>，本节介绍datalist，下一节介绍output

注意：浏览器不显示未知元素。旧版浏览器不支持的新元素但不会破坏您的网页。

<datalist>元素为<input>元素指定一个预先定义的选项的列表。用户在输入数据时会看到预定义选项的下拉列表。 <input>元素的list属性值，必须为<datalist>元素的id属性值。

<form action="/jc_script/urlencode.php">
                 <input list="lang" name="lang" type="text">
                 <datalist id="lang">
                   <option value="Java">
                   <option value="PHP">
                   <option value="Ruby">
                   <option value="Python">
                   <option value="C++">
                 </datalist> 
               </form>

尝试一下

<output>元素

<output>元素显示一个计算的结果（如一个由脚本执行）。

<form action="/action_page.php" oninput="x.value=parseInt(a.value)+parseInt(b.value)">
                 0
                 <input type="range"  id="a" name="a" value="50">
                 100 +
                 <input type="number" id="b" name="b" value="50">
                 =
                 <output name="x" for="a b"></output>
                 <br><br>
                 <input type="submit">
               </form>

尝试一下