HTML表单的用法

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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1、关于form表单的基础 form表单:是一个包含表单元素的区域;作用,用于包裹表单元素。 表单元素:是允许用户...
    tangmengyun阅读 3,975评论 1 1
  • 什么是form表单 表单在网页中主要负责数据采集功能,把用户填写的信息提交到网站的后台服务器。 form标签的常用...
    ezrealor阅读 2,166评论 0 0
  • HTML 表单用于搜集不同类型的用户输入。用户提交表单时向服务器传输数据,从而实现用户与Web服务器的交互。HTM...
    FLYSASA阅读 3,602评论 0 0
  • 在 HTML 中,表单是由 标记定界的区域,包含文本输入框、按钮、复选框和图形用户界面的其他功能部件。Web ...
    莱昂纳德刚阅读 3,388评论 0 0
  • 一、表单 1. 表单的作用 HTML 表单用于接收不同类型的用户输入,用户提交表单时向服务器传输数据,从而实现用户...
    zx9426阅读 3,273评论 0 1

友情链接更多精彩内容