zoukankan      html  css  js  c++  java
  • 创建简单的表单Demo

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6 </head>
     7 <body>
     8 <form action="http://www..." method="get">
     9 <p>
    10 <label>姓名:</label><input type="text" name="username" />
    11 </p>
    12 <p>
    13 <label>密码:</label><input type="password" name="password" />
    14 </p>
    15 <p>
    16 <label>性别:</label>
    17 <input type="radio" name="gender" value="0" />18 <input type="radio" name="gender" value="1" />19 </p>
    20 <p>
    21 <label>爱好:</label>
    22 <input type="checkbox" name="like" value="sing" /> 唱歌
    23 <input type="checkbox" name="like" value="run" /> 跑步
    24 <input type="checkbox" name="like" value="swiming" /> 游泳
    25 </p>
    26 <p>
    27 <label>照片:</label>
    28 <input type="file" name="person_pic">
    29 </p>
    30 <p>
    31 <label>个人描述:</label>
    32 <textarea name="about"></textarea>
    33 </p>
    34 <p>
    35 <label>籍贯:</label>
    36 <select name="site">
    37     <option value="0">北京</option>
    38     <option value="1">上海</option>
    39     <option value="2">广州</option>
    40     <option value="3">深圳</option>
    41 </select>
    42 </p>
    43 <p>
    44 <input type="submit" name="" value="提交">
    45 <input type="reset" name="" value="重置">
    46 </p>
    47 </form>
    48 </body>
    49 </html>
    Demo Code

    页面效果如下:

    Title

    唱歌 跑步 游泳


    表单应用概解:

    表单用于搜集不同类型的用户输入,表单由不同类型的标签组成,相关标签及属性用法如下:

    1、<form>标签 定义整体的表单区域

    • action属性 定义表单数据提交地址
    • method属性 定义表单提交的方式,一般有“get”方式和“post”方式

    2、<label>标签 为表单元素定义文字标注

    3、<input>标签 定义通用的表单元素

    • type属性
      • type="text" 定义单行文本输入框
      • type="password" 定义密码输入框
      • type="radio" 定义单选框
      • type="checkbox" 定义复选框
      • type="file" 定义上传文件
      • type="submit" 定义提交按钮
      • type="reset" 定义重置按钮
      • type="button" 定义一个普通按钮
      • type="hidden" 定义一个隐藏的表单域,用来存储值
    • value属性 定义表单元素的值
    • name属性 定义表单元素的名称,此名称是提交数据时的键名

    4、<textarea>标签 定义多行文本输入框

    5、<select>标签 定义下拉表单元素

    6、<option>标签 与<select>标签配合,定义下拉表单元素中的选项

  • 相关阅读:
    垂死挣扎还是涅槃重生 -- Delphi XE5 公布会归来感想
    自考感悟,话谈备忘录模式
    [每日一题] OCP1z0-047 :2013-07-26 alter table set unused之后各种情况处理
    Java实现 蓝桥杯 算法提高 p1001
    Java实现 蓝桥杯 算法提高 拿糖果
    Java实现 蓝桥杯 算法提高 拿糖果
    Java实现 蓝桥杯 算法提高 求arccos值
    Java实现 蓝桥杯 算法提高 求arccos值
    Java实现 蓝桥杯 算法提高 因式分解
    Java实现 蓝桥杯 算法提高 因式分解
  • 原文地址:https://www.cnblogs.com/We612/p/9991457.html
Copyright © 2011-2022 走看看