美文网首页
HTML表单的用法

HTML表单的用法

作者: 小松鼠hust | 来源:发表于2016-12-29 09:40 被阅读12次

    HTML表单用于用户向服务器端提交表单数据,用法为<form>提交的表单数据区域</form>。用form标签包裹着表单控件,如input, button, submit,select, label等标签。当用户输入完数据,按button或者submit提交按钮提交后,表单里的数据会发送给服务器端,具体地址是formaction属性值,提交的方式采用formmethod规定的方式,如get或者post。不同的表单控件用法请参考MDN.

    例子

    <!DOCTYPE html>
    <!DOCTYPE html>
    <html>
    <head>
        <title>form</title>
    </head>
    <body>
    <form id="user-register" action = "user-register.php" method="get">
    
        <div class="name">
            <label for="user-name">姓名:</label>
            <input type="text" id="user-name" name = "name" placeholder="用户名">
        </div>
    
        <div class="password">
            <label for="password">密码:</label>
            <input type="password" id="password" name = "password">
        </div>
    
        <div class="sex">
            <label for="sex">性别:</label>
            <input type="radio" id="sex" name = "sex" value="male" checked> 男
            <input type="radio" name = "sex" value="female"> 女
        </div>
    
        <div class="sex-prefer">
            <label for="sex-prefer">取向:</label>
            <input type="radio" id="sex-prefer" name = "sex-prefer" value="male"> 男
            <input type="radio" name = "sex-prefer" value="female"> 女
        </div>
    
        <div class="hobby">
            <label>爱好:</label>
            <input type="checkbox" id="hobby" name="hobby" value="dota"> dota
            <input type="checkbox" id="hobby" name="hobby" value="travel"> 旅游
            <input type="checkbox" id="hobby" name="hobby" value="pet"> 宠物  
        </div>
    
        <div class="comments">
            <label for="comments">评论:</label>
            <textarea name="comments" id="comments" cols="30" rows="6">输入评论:
            </textarea>
        </div>
    
        <div>
            <label id="mycars">我的cars:</label>
            <select name="cars" id="mycars">
                <option value="sabo">萨博</option>
                <option value="polo">大众polo</option>
                <option value="focus">福克斯</option>
            </select>
        </div>
    
        <button>提交</button>
        <!--<
        input type = "submit" value = "提交">
        -->
    
    </form>
    </body>
    </html>
    

    效果图:

    form-dome.JPG

    相关文章

      网友评论

          本文标题:HTML表单的用法

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