zoukankan      html  css  js  c++  java
  • HTML初步学习9

    今天学习表单

    首先,了解一下表单的一些属性

    name——表单命名,不是必需属性,但是为了防止表单信息在提交到后台处理程序时出现混乱,一般要设置一个与表单功能符合的名称。

    method——传送方法,post或者get

    enctype——编码方式,有 “text/plain(纯文本)”“application/x-www-form-urlencoded”(默认编码)“multipart/form-data“(MIMe编码,上传文件必须用)

    target——目标显示方式

    然后,了解一下控件

    输入类:input标签

    菜单列表类:select标签

    基本语法:

    <form>
      <input name="input_name" type="input_type"/>
    </form>

    input_name的选项有很多,基本使用的有:

    text password radio(单选) checkbox(复选框) button submit(提交按钮)

    reset(重置按钮) image(图像提交按钮) hidden(隐藏域) file(文件域)

    除了输入类型的控件,有一些控件,例如文字区域、菜单列表不用input标记,比如文字区域用textarea,菜单用select与option等等

    看效果不说话:

    image

    代码:

      1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      2 <html xmlns="http://www.w3.org/1999/xhtml">
      3 <head>
      4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      5 <title>表单</title>
      6 </head>
      7  <!--text password-->
      8  <h1>用户测试</h1>
      9  <form action="mailto:xxxx@xx" method="post" name="showitems" enctype="application/x-www-form-urlencoded">
     10   姓名:<input type="text" name="username" size="20" id="username"/>
     11   <br/><br/>
     12   密码:<input type="password" name="pwd" size="30" maxlength="15" id="pwd"/>
     13   <br><br>
     14   寄语:<input type="text" name="URL" size="40" maxlength="50" value="写下你要说的话"/>
     15   <hr size="3" color="#9900CC">
     16   <!--radio-->
     17   <p><font size="+2" color="#3333FF">你最喜欢的漫画是:</font></p>
     18   <input type="radio" value="ansA" name="test"/>火影忍者&nbsp;&nbsp;
     19   <input type="radio" value="ansB" name="test"/>犬夜叉&nbsp;&nbsp;
     20   <input type="radio" value="ansC" name="test"/>海贼王&nbsp;&nbsp;
     21   <input type="radio" value="ansD" name="test"/>其他<br/>
     22   <br>
     23   <hr size="3" color="#9900CC">
     24   <!--checkbox-->
     25   <p><font size="+2" color="#3333FF">你喜欢的场景:</font></p>
     26   <input type="checkbox" value="ansA2" name="test"/>春日微风&nbsp;&nbsp;
     27   <input type="checkbox" value="ansB2" name="test"/>夏日微凉夜晚&nbsp;&nbsp;
     28   <input type="checkbox" value="ansC2" name="test"/>秋日枫叶林&nbsp;&nbsp;
     29   <input type="checkbox" value="ansD2" name="test"/>冬日暖阳天&nbsp;&nbsp;
     30   <br><br><br>
     31   <!--提交 重置按钮,不用自己编写onclick,自动响应-->
     32   <input type="submit" name="sub" value="提交" />&nbsp;&nbsp;
     33   <input type="reset" name="rst" value="重置"/>
     34   <br><br><br>
     35   <!--普通按钮-->
     36   <input align="middle" alt="相当于空按钮" type="button" value="没啥用" name="btn1"/>
     37   <input align="left" type="button" value="关了你" name="closeyou" onclick="window.close()"/>
     38   <input align="left" type="button" value="没啥用" name="opennew" onclick="window.open()"/>
     39   <br><br>
     40   <!--图片按钮-->
     41   <input width="80" align="bottom" type="image" src="images/yes.jpg" name="image1" onclick="window.open()"/>
     42   <!--隐藏域-->
     43   <input type="hidden" name="from"/><br/><br>
     44   <!--文件域 file-->
     45   文件域,请选择文件:&nbsp;&nbsp;
     46   <input type="file" name="filee"/>
     47  </form>
     48   <!--列表/菜单标记-->
     49   <!--表单是使用id标记最多的一类元素-->
     50  <form action="xxxx@xx" method="post" name="invest" id="invset">
     51   选择性别:<br/><br/>
     52   <select name="sex" size="4" multiple="multiple">
     53    <option value="boy" selected="selected"></option>
     54    <option value="woman" selected="selected"></option>
     55    <option value="bw" selected="selected">男/女</option>
     56   </select>
     57   <br/><br/>
     58   <select name="city">
     59    <option value="beijing" selected="selected">北京
     60    <option value="shanghai">上海
     61    <option value="nanjing">南京
     62    <option value="changchun">长春
     63   </select>
     64   <br/><br/>
     65   留言:<textarea name="liuyan" rows="5" cols="40">留言区
     66   </textarea><br/><br/>
     67  </form>
     68 <body>
     69 </body>
     70 </html>
     71 
    表单
  • 相关阅读:
    XStream教程
    Log4j教程
    Java.io包
    Java输入/输出教程
    Java.math.BigDecimal.abs()方法
    数据类型转换
    JUnit教程
    java.lang
    标识符
    PHP面向对象笔记解析
  • 原文地址:https://www.cnblogs.com/puluotiya/p/4852897.html
Copyright © 2011-2022 走看看