• HTML 表单


    一、表单

    <form id="" name="" method="post/get" action="负责处理的服务端">id不可重复;name可以重复;get提交有长度限制,并且编码后的内容在地址栏可见,post提交无长度限制,且编码后内容不可见。

    </form> 

    1、文本输入

    文本框<input type="text" name="" id="" value=""/>

    密码框<input type="password" name="" id="" value=""/>

    文本框<textaarea name="" id="" cols=""(字符多少)  rows=""(几行高)></>textarea>

    隐藏域<input type="hidden" name="" id="" value=""/>

    2、按钮

    提交按钮<input type="submit" name="" id="" disable="disable" value=""/>点击后转到form内的提交服务器地址

    重置按钮<input type="reset" name="" id="" disable="disable" value=""/>

    普通按钮<input type="button" name="" id="" disable="disable" value=""/>

    图片按钮<input type="image" name="" id="" disable="disable" value="" src="图片地址"/>

    附:

    disable ,使按钮失效;enable,使可用

    3、选择输入

    单选按钮组<input type="radio" name="" id="" checked="checked" value=""/>name的值用来分组;value的值看不见,用来提交给程序;checked,设置默认选项

    复选框组<input type="checkbox" name="" id="" checked="checked" value=""/>

    文件上传<input type="file" name="" id="">

    <label for=""></label>

    <label>标签为input元素定义标注(标记)。

    label元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在label元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。

    <label>标签的for属性应当与相关元素的id属性相同

    下拉列表框

    <select name =""  id=""  size=""  multiple="multiple">   ------size=1时,为菜单;>1时,为列表;multiple为多选。

    <option value="值">内容1</option>

    <option value="值"  selected="selected">内容2</option>------seleted,设为默认

    <option value="值">内容3</option>

    </select>

    二、使用Photoshop来快速制作网页

    主要用于美工设计好网页构架后快速提交给用户预览时用的,用的是剪切和保存为HTML方式。

    练习:

    注册界面

     1 <body background="背景.jpg" topmargin="50">
     2 <div align="center">
     3 <img src="M图.png" />
     4 </div>
     5 <font face="微软雅黑" color="#660000" >
     6 
     7 
     8 <form>
     9 <table align="center" width="600" border="0" cellspacing="0" cellpadding="0">
    10   <tr>
    11     <td colspan="2" align="left">
    12     <font face="Arial Black, Gadget, sans-serif" size="+2">Mail.注册<hr color="#660000"  />
    13     </font>
    14     </td>
    15   </tr>
    16   <tr>
    17   <td colspan="2">
    18     <table border="0" cellpadding="0" cellspacing="0" width="600">
    19   <tr>
    20   <td width="200" align="right" valign="top">▼▼▼</td>
    21   </tr>
    22   </table>
    23   </td>
    24   </tr>
    25   <tr>
    26     <td width="150" height="50">邮箱:</td>
    27     <td><input type="text" /></td>
    28   </tr> 
    29   <tr>
    30     <td>&nbsp;</td>
    31     <td>需要通过邮箱激活账户,不支持sohu,21cn,sogou的邮箱</td>
    32   </tr>
    33   <tr>
    34     <td height="50">登录用户名:</td>
    35     <td><input type="text" /></td>
    36   </tr>
    37  
    38   <tr>
    39     <td>&nbsp;</td>
    40     <td>仅在登录时使用,字符数不少于4个</td>
    41   </tr>
    42   <tr>
    43     <td height="50">显示名称:</td>
    44     <td><input type="text" /></td>
    45   </tr>
    46   <tr>
    47     <td>&nbsp;</td>
    48     <td>即昵称,字符数不少于2个</td>
    49   </tr>
    50   <tr>
    51     <td height="50">密码:</td>
    52     <td><input type="password" /></td>
    53   </tr>
    54   <tr>
    55     <td height="50">确认密码:</td>
    56     <td><input type="password" /></td>
    57   </tr>
    58   <tr>
    59     <td>&nbsp;</td>
    60     <td>至少8位,必须包含字母、数字、特殊字符</td>
    61   </tr>
    62   <tr>
    63     <td height="50">性别:</td>
    64     <td><input type="radio" name="sex" />&nbsp;<input type="radio" name="sex" /></td>
    65   </tr>
    66   <tr>
    67     <td height="50">喜好:</td>
    68     <td><select size="1">
    69     <option value="1">听音乐</option>
    70     <option value="2">看电影</option>
    71     <option value="3">玩游戏</option>
    72     <option value="4">网购</option>
    73     </select>
    74     </td>
    75   </tr>
    76   <tr>
    77     <td height="50">&nbsp;</td>
    78     <td><input type="submit" value="注册"</td>
    79   </tr>
    80   <tr height="50">
    81   <td height="50" colspan="2">
    82   <table border="0" cellpadding="0" cellspacing="0" width="600">
    83   <tr>
    84   <td width="200" height="83" align="left" valign="bottom">▲▲▲</td>
    85   <td width="200" align="center" valign="bottom">▲▲▲</td>
    86   <td width="200" align="right" valign="bottom">▲▲▲</td>
    87   </tr>
    88   </table>
    89   </td>
    90   </tr>
    91   
    92 
    93 </table> 
    94 </form>
    95 </font>

  • 相关阅读:
    Uploadify v3.2.1 上传图片并预览
    mybatis批量操作
    500 拦截错误输出
    jsnop
    java目录
    设置360调用样式 IE调用样式
    Spring加载resource时classpath*:与classpath:的区别
    context:annotation-config 与context:component-scan
    Andriod调用http请求
    JDK环境变量
  • 原文地址:https://www.cnblogs.com/ShenG1/p/5669679.html
Copyright © 2020-2023  润新知