美文网首页
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表单的简单用法

    HTML表单的简单用法:HTML表单用于搜集不同类型的用户输入。 元素定义HTML表单。HTML表单包含表单元素。...

  • HTML表单的用法

    HTML表单的用法 表单表单作用:HTML表单用于搜集不同类型的用户输入。表单的工作机制访问一个含有表单的页面输入...

  • FORM 表单

    html表单的简单用法 form表单作用: form标签用于为用户输入创建HTML表单,用于向服务器传输数据 fo...

  • 表单的一些用法

    HTML表单的一些用法 1.表单的作用: HTML 表单用于接收不同类型的用户输入,用户提交表单时向服务器传输数据...

  • HTML表单的用法

    Html表单用于搜集不同类型的用户输入。 常用属性

    元素 元素定义 HTML 表单区间,而这个区间的...

  • html表单的用法

    form 是html中一个比较常用的标签,form的作用是用来收集用户输入的信息,即用户需要与服务器交互,需要提交...

  • HTML 表单的用法

    什么是form表单 表单在网页中主要负责数据采集功能,把用户填写的信息提交到网站的后台服务器。 form标签的常用...

  • HTML 表单的用法

    HTML 表单用于搜集不同类型的用户输入。用户提交表单时向服务器传输数据,从而实现用户与Web服务器的交互。HTM...

  • HTML 表单的用法

    一、基础概念知识 1.表单主要分为两部分: 一是HTML文档描述的表彰;二是提交后的表单处理(服务器端处理数据,这...

  • HTML 表单的用法

    一、表单的作用 表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分:表单标签:这里面包含了处理表单数据所...

网友评论

      本文标题:HTML表单的用法

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