zoukankan      html  css  js  c++  java
  • html(五) -- 表单标签

    表单标签: 表单标签的作用是用于提交数据给服务器的。

    表单标签的根标签是<form>标签

    常用的属性:
        action: 该属性是用于指定提交数据的地址。
        method: 指定表单的提交方式。
                get : 默认使用的提交方式。  提交的数据会显示在地址栏上。
                post :  提交的数据不会显示在地址栏上。
    注意: 表单项的数据如果需要提交到服务器上面,那么表单项必须要有name的属性值。

    代码示例:

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="UTF-8">
     5         <title>表单标签</title>
     6     </head>
     7     <body>
     8         
     9         <form action="http://www.baidu.com" method="get">
    10         <table border="1" width="400" height="300">
    11             <tr>
    12                 <td>用户名</td>
    13                 <!-- 文本输入框 单行-->
    14                 <td><input name="userName" type="text"/></td>
    15             </tr>
    16             <tr>
    17                 <td>密码</td>
    18                 <!-- 密码框 -->
    19                 <td><input name="password" type="password"/></td>
    20             </tr>
    21             <tr>
    22                 <td>性别</td>
    23                 <!-- 单选框 -->
    24                 <td><input checked="true" value="man"  name="sex" type="radio"/><input name="sex" value="woman" type="radio"/></td>
    25             </tr>
    26             <tr>
    27                 <td>兴趣爱好</td>
    28                 <!-- 复选框  同一组的复选框name的属性值要一致  -->
    29                 <td>java <input value="java" name="hobit"  checked="checked" type="checkbox" />javascript <input type="checkbox" value="javascript" name="hobit" />android <input value="android" name="hobit" type="checkbox" /></td>
    30             </tr>
    31             <tr>
    32                 <td>城市</td>
    33                 <!-- 下拉框  -->
    34                 <td><select name="city">    
    35                     <option value="BJ">北京</option>
    36                     <option value="SH">上海</option>
    37                     <option value="GZ">广州</option>
    38                     <option value="SZ">深圳</option>
    39                     </select>
    40                 </td>
    41             </tr>
    42             <tr>
    43                 <td>大头照</td>
    44                 <!-- 文件上传框  -->
    45                 <td><input name="image" type="file" /></td>
    46             </tr>
    47             <tr>
    48                 <td>个人简介</td>
    49                 <!-- 文本域   -->
    50                 <td><textarea  name="intro" rows="10" cols="30"></textarea></td>
    51             </tr>
    52             <tr>
    53                 
    54                 <td colspan="2" align="center">
    55                     <!-- 提交按钮  -->
    56                     <input type="submit" value="注册"/>
    57                     <!--  重置按钮 -->
    58                     <input type="reset" value="重置"/>
    59                 </td>
    60             </tr>
    61     </table>
    62     </form>
    63     
    64     </body>
    65 </html>
  • 相关阅读:
    Java通过Mybatis实现批量插入数据到Oracle中
    SpringMVC+Spring+Mybatis整合,使用druid连接池,声明式事务,maven配置
    图片懒加载原理
    js参考---sort函数
    css参考---纯css实现三角形
    css参考---实现元素水平垂直居中
    javascript疑难问题---13、函数防抖
    javascript疑难问题---12、函数节流
    闭包执行注意(函数节流为例)
    javascript疑难问题---11、回调函数
  • 原文地址:https://www.cnblogs.com/nicker/p/6284307.html
Copyright © 2011-2022 走看看