zoukankan      html  css  js  c++  java
  • HTML第二部分表单及使用Photoshop快速制作网页

    一、表单

    <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方式。

    练习:

    注册界面

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>邮件输入</title>
    </head>
    
    <body background="../PS处理/渐变3.png">
    <form>
    <br />
    <br />
    <table  width="700px"   border="0" cellpadding="0" cellspacing="0" align="center">
    <tr><!--第一行 -->
    <td  width="110" height="40">郵箱:</td>
    <td><input type="text" /></td>
    </tr>
    
    <tr><!--第二行 -->
    <td  width="110" height="40">&nbsp;</td>
    <td><font size="-1" color="#FF00FF">需要通過郵箱激活賬號,不支持Sohu、21cn、sogou郵箱</font></td>
    </tr>
    
    <tr><!--第三行 -->
    <td  width="110" height="40">登錄用戶名:</td>
    <td><input type="text" /></td>
    </tr>
    
    <tr><!--第四行 -->
    <td  width="110" height="40"></td>
    <td><font size="-1" color="#FF00FF">僅在登錄時使用,字符數不少於4個</font></td>
    </tr>
    
    <tr><!--第五行 -->
    <td  width="110" height="40">顯示名稱:</td>
    <td><input type="text" /></td>
    </tr>
    
    <tr><!--第六行 -->
    <td  width="110" height="40"></td>
    <td><font size="-1" color="#FF00FF">即昵稱,字符數不少於2個</font></td>
    </tr>
    
    <tr><!--第七行 -->
    <td  width="110" height="40">密碼:</td>
    <td><input type="password"/></td>
    </tr>
    
    <tr><!--第八行 -->
    <td  width="110" height="40">確認密碼:</td>
    <td><input type="password"/></td>
    </tr>
    
    <tr><!--第九行 -->
    <td  width="110" height="40"></td>
    <td><font size="-1" color="#FF00FF">至少8位,必須包含字母、數字、特殊字符</font></td>
    </tr>
    
    <tr><!--第十行 -->
    <td  width="110" height="40">性別:</td>
    <td><select name="sex" size="1">
    <option value="11">男</option>
    <option value="22">女</option>
    </select>
    </td>
    </tr>
    
    <tr><!--第十一行 -->
    <td  width="110" height="40">喜好:</td>
    <td><select name="like" size="1" >
    <option value="33">音樂</option>
    <option value="44">電影</option>
    <option value="55">繪畫</option>
    </select></td>
    </tr>
    
    <tr><!--第十二行 -->
    <td  width="110" height="40"></td>
    <td><input type="submit" value="註冊" /></td>
    </tr>
    
    </table>
    
    </form>
    </body>
    </html>

    效果图

    愿我有生之年,得见您君临天下。 吾辈必当勤勉,持书仗剑耀中华。
  • 相关阅读:
    Spring解决循环依赖的三种方式
    MySQL深度分页
    MySQL大数据量分页查询方法及其优化
    java进程 cpu100%问题排查
    Java线程池如何合理配置核心线程数
    Btree和B+tree的区别
    Python3 for Linux 安装
    redis sentinel 相关参数及命令
    postman 连接mysql
    oracle-数据库的各种-锁-详解
  • 原文地址:https://www.cnblogs.com/bloodPhoenix/p/5655945.html
Copyright © 2011-2022 走看看