美文网首页
HTML 表单元素

HTML 表单元素

作者: WILD_POINTER | 来源:发表于2017-04-21 15:50 被阅读0次
    1、<input> 元素
    2、<select> 元素

    <select> 元素定义下拉列表
    <option> 元素定义待选择的选项。列表通常会把首个选项显示为被选选项。可以通过 selected 属性来定义预定义选项。

    <html>
    
    <body>
        <form action="action_page.php">
            <select name="cars">
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="fiat" selected>Fiat</option>
                <option value="audi">Audi</option>
            </select><br />
            <input type="submit">
        </form>
    </body>
    
    </html>
    
    3、<textarea> 元素

    <textarea> 元素定义多行输入字段(文本域)

    <html>
    
    <body>
        <textarea name="message" rows="10" cols="30">
            lsdkfjalsdkfjalsdfjalksjdflaksdjfklajs
        </textarea>
    </body>
    
    </html>
    
    4、<button> 元素

    <button> 元素定义可点击的按钮。

    <html>
    
    <body>
        <button type="button" onclick="alert('Hello World!')">点我</button>
    </body>
    
    </html>
    
    5、HTML5 表单元素

    HTML5 增加了如下表单元素

    • <datalist>
    • <keygen>
    • <output>

    <datalist> 元素为 <input> 元素规定预定义选项列表。用户会在他们输入数据时看到预定义选项的下拉列表。<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。

    <html>
    
    <body>
        <form action="action_page.php">
            <input list="browsers" name="browser">
            <datalist id="browsers">
                <option value="Internet Explorer"></option>
                <option value="Firefox"></option>
                <option value="Chrome"></option>
                <option value="Opera"></option>
                <option value="Safari"></option>
            </datalist><br />
            <input type="submit">
        </form>
    </body>
    
    </html>
    

    相关文章

      网友评论

          本文标题:HTML 表单元素

          本文链接:https://www.haomeiwen.com/subject/mwpdzttx.html