2019-03-27

如何使用HTML的元素创建一个表单

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<form >
    <div class="username">
        <label for="username">姓名:</label>
        <input id="username"type="text" name="username" placeholder="用户名">
    </div>
    <div class = "password">
        <label for="password">密码:</label>
        <input id="password" type ="password" name="password" placeholder="请输入密码" >
    </div>
    <div class="sex">
        <label>性别:</label>
        <input type="radio" id="z" name="sex" value="男"><label for="z" >男 </label>
        <input type="radio" id="x" name="sex" value="女"><label for="x" >女 </label>
    </div>
    <div class="love">
            <label >取向:</label>
            <input type="radio" id="y" name="love" value="男"><label for="y" >男 </label>
            <input type="radio" id="s" name="love" value="女"><label for="s" >女 </label>
    </div>
    <div class="hobby">
        <label for="hobby">爱好:</label>
        <input type="checkbox" id="a" name="hobby" value="data"><label for="a" >data </label>
        <input type="checkbox" id="b" name="hobby" value="travel"><label for="b" >旅游 </label>
        <input type="checkbox" id="c" name="hobby" value="pet"><label for="c" >宠物 </label>
    </div>
    <div class="textarea">
        <label for="comment">评论:</label>
        <textarea name="comment" cols="30" rows="10">
        ddd

        </textarea>
        
    </div>
    <div class="select">
        <label for="mycar">我的car:</label>
        <select name="mycar">
        
         <option value="laosilaisi">劳斯莱斯</option>
         <option value="sabo" selected>萨博</option>
         <option value="benchi">奔驰</option>
    
        </select>
        <input type="submit"  value="提交">
    </div>
   

</form>
</body>
</html>

实际效果如下:


image.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,681评论 1 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,983评论 1 45
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 9,652评论 0 0
  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 13,104评论 0 3
  • Https协议原理 简单地来说,是基于ssl的http协议,依托ssl协议,https协议能够确保整个通信是加密的...
    HeartGo阅读 4,328评论 0 6