zoukankan      html  css  js  c++  java
  • HTML_6 (表单应用)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <!-- form定义一个表单区域,action属性定义表单数据提交的地址,method属性定义提交的方式,get和post两种方式。-->
        <form action="http://www." method="get">
            <!-- label标签定义表单控件的文字标注,input类型为text定义了一个单行文本输入框 -->
            <p>
                <label>姓名:</label><input type="text" name="username">
            </p>
    
            <!-- input类型为password定义了一个密码输入框-->
            <p>
                <label>密码:</label><input type="password" name="password">
            </p>
    
            <!-- input类型为radio定义了单选框-->
            <p>
                <label>性别:</label>
                <input type="radio" name="gender" value="0"/>男   <!--提交时上传的是value值-->
                <input type="radio" name="gender" value="1">女
            </p>
    
            <!-- input类型为checkbox定义了复选框-->
            <p>
                <label>爱好:</label>
                <input type="checkbox" name="like" value="sing"/>唱歌
                <input type="checkbox" name="like" value="run">跑步
                <input type="checkbox" name="like" value="swimming">游泳
            </p>
    
            <!-- input类型为file定义上传照片或文件资源 -->
            <p>
                <label>照片:</label>
                <input type="file" name="person_lic">
            </p>
    
            <!-- textarea定义多行文本输入 -->
            <p>
                <label>个人描述:</label>
                <textarea name="about"></textarea>
            </p>
    
            <!-- select定义下拉列表选择 -->
            <p>
                <label>籍贯:</label>
                <select name="site">
                    <option value="0">北京</option>
                    <option value="1">上海</option>
                    <option value="2">深圳    <!--   </option>可以不写  -->
                </select>
            </p>
    
            <!-- input类型为submit定义提交按钮,还可以用图片控件代替submit按钮提交,一般会导致提交两次,不建议使用 -->
            <input type="image" src="http://p3.so.qhimgs1.com/bdr/_240_/t01c877b174caf0edb3.jpg">
    
            <p>
                <input type="submit" name="" value="提交">
            </p>
    
            <!-- input类型为reset定义重置按钮 -->
            <p>
                <input type="reset" name="" value="重置">
            </p>
    
        </form>
    </body>
    </html>
    

      结果:

  • 相关阅读:
    BZOJ
    Codeforces
    GYM
    UOJ
    Java集合之Queue
    【HIHOCODER 1478】 水陆距离(BFS)
    Java集合之Stack
    Java集合之Vector
    Java多线程入门Ⅱ
    【HIHOCODER 1604】股票价格II(堆)
  • 原文地址:https://www.cnblogs.com/tianqizhi/p/8514207.html
Copyright © 2011-2022 走看看