HTML 表单元素



kc

  • 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>
    
    尝试一下