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>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

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

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

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

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

看效果不说话:

代码:

  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:[email protected]" 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="[email protected]" 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 

表单

时间: 2024-10-15 13:23:46

HTML初步学习9的相关文章

LinQ的初步学习与总结

嘿嘿,说起来ORM和LinQ,就感觉离我好遥远的,在学校是没有学习的,所以总感觉学习了LinQ就是大神,现在嘛,终于也体会一点,感觉LinQ只是初步学习,没有太难,当然以后使用在项目中就没有这样的简单啦,下面就全面的总结一下LinQ的其中一部分,LinQ有三部分:LinQ TO Object:LinQ TO SQL ;LinQ TO XML.而在这里我先来总结一下LinQ TO Object的学习吧 一.初步认识LinQ to Object static void Main(string[] a

Jquery Easy UI初步学习(二)datagrid的使用

第一篇学的是做一个管理的外框,接着就是数据datagrid绑定了,这里我用asp.net mvc3来做的,主要就是熟悉属性.方法. 打开easyui的demo 就可以看到如下一段代码: 和上篇一样class="easyui-datagrid", data-options="...",这是一样的,其他我在网上查了查,并做了整理 DataGrid 属性 参数名 类型 描述 默认值 title string Datagrid面板的标题 null iconCls strin

初步学习C++:C++的基本概念

开始学习C++,先从最基本的概念开始,让自己有一个系统的知识概念. 1.对象: 在面向对象程序设计中,对象是描述其属性的数据以及对这些数据施加的一组操作封装在一起构成的统一体.对象可以认为是:数据+操作(对象所能完成的操作表示它的动态行为,也成为方法). 2.类: 在面向对象程序设计中,类就是具有相同的数据和相同的操作的一组对象的集合,类是对具有相同数据结构和相同操作的一类对象的描述. 3.消息: 在面向对象程序设计中,一个对象向另一个对象发出的请求被称为"消息".当对象接收到发向它的

Java深度历险(三) Maven初步学习

这几天接触这个词,很多遍了,只是浅显的体会到它在GXPT中的好处,功能之强大,又通过网络查询了资料进一步的认识学习了,和大家分享. Maven是基于项目对象模型(POM),可以通过一小段描述信息来管理项目的构建,报告和文档的软件项目管理工具. 在gxpt中的体现 1. 父子关系 一个多模块项目通过一个父POM 引用一个或多个子模块来定义. a. 在父目录中分别创建子项目 b. 父项目,通过以下配置,将子项目关联: 如下: <span style="font-size:18px;"

初步学习nodejs,业余用node写个一个自动创建目录和文件的小脚本,希望对需要的人有所帮助

初步学习nodejs,业余用node写个一个自动创建目录和文件的小脚本,希望对需要的人有所帮助,如果有bug或者更好的优化方案,也请批评与指正,谢谢,代码如下: 1 var fs = require('fs'); 2 var tel = [ 3 "1/2/4/6/a.tpl.html", 4 "1/2/4/7/9/c.tpl.html", 5 "1/3/5/8/b.tpl.html"]; 6 var demo = function (mulu)

状态保持以及AJAX的初步学习

嘿嘿,今天学习的有点迷茫哦,主要学习把验证码使用在登录页面时间的一些逻辑,学习这个时间并没有那么的迷惑哦,可是自己写程序时间倒是有点反应迟钝,不过还好总是在最后搞清楚啦,另外就是一步一步的学习是接近项目期,今天下午学习了ajax,这个使用javascript写起来还是蛮麻烦的,嘿嘿,但是使用jquery实现是非常的简单的,不知道是不是由于我刚接触的原因,下面来总结一下今天学习的内容,感觉今天学习的还是很有必要详细总结的,因为在以后的项目中还是经常会使用的. 一.状态保持 1.cookie的添加与

Jquery Easy UI初步学习(三)数据增删改

第二篇只是学了加载用datagrid加载数据,数据的增删改还没有做,今天主要是解决这个问题了. 在做增删改前需要弹出对应窗口,这就需要了解一下EasyUi的弹窗控件. 摘自:http://philoo.cnblogs.com/ 我的理解,就是panel有的属性Window.dialog都有,同时保留自己的扩展属性方法 , 所以主要展示pannel的属性. Pannel 属性 名称 类型 说明 默认值 title string 显示在Panel头部的标题文字. null iconCls strin

实验1 ASP.NET MVC 4 初步学习

1.添加控制器 http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/adding-a-controller 2.添加视图 http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/adding-a-view 3.添加模型 http://www.asp.net/mvc/tutorials/mvc-4/getting-sta

Jquery Easy UI初步学习(一)

Easy UI 1.3.2 以前听说Easy UI很不错,当了一个dome,闲着没事就看了一下,也整理一下为了自己更好的记忆,也希望对象我这样小菜有帮助吧 先从后台管理的主页面开始,如要要做主页需要了解以下几项 data-options是jQuery Easyui 最近两个版本才加上的一个特殊属性.通过这个属性,我们可以对easyui组件的实例化可以完全写入到html中,例如: <div class="easyui-dialog" style="width:400px;

第二十篇 jQuery 初步学习2

jQuery 初步学习2 前言: 老师这里啰嗦一下,因为考虑到一些同学,不太了解WEB前端这门语言.老师就简单的说一下,写前端,需要什么:一台笔记本.一个文本编辑器.就没啦!当然,写这门语言,我们要遵守它的规则,文本的后缀得是html,里面的编写格式当然也要遵守它的规则. 如果有同学没有好的编辑器,写代码很打脑壳,记不住单词等等,老师推荐一个编辑工具:WebStorm .老师用的就是这个来写的前端,版本用的是8.0.3,还是挺好用的. 上节课我们初步学习了jQuery,那么这节课,我们再深入了解