一、<form>标签及其属性

<from></form>标签对用来创建一个表单,即定义表单的开始和结束位置,<form>标签具有下面等属性。
       1. action属性用来设置接收和处理浏览器递交的表单内容的服务器程序的URL。相对和绝对
       2. Method属性用来定义浏览器将表单中的信息提交给服务器端的处理程序的方式,取值可以为:GET或POST.
       3. Target属性用来指定服务器返回结果显示的目标窗口或目标帧。
       4. Title属性用来设置当网站访问者的素、鼠标在表单上的任一位置停留过几秒时,浏览器用黄色小浮标显示的文本(如表单的名称或描述)。
       5. Enctype属性指示浏览器使用哪种编码方法将表单数据传送给www服务器。该属性可以有两种取值:
                   1>. application/x-www-form-urlencoded(默认的设置)
                   2>. multipart/form-data

二、表单字段元素

  • <input type=“submit”>               -- 提交
  • <input type=“reset”>                 -- 重置
  • <input type=“text”>                   -- 文本框           属性:size(在文本框中显示的字的个数)、value、maxlength(最多可以输入的字数)、readonly(只读)、disabled
  • <input type=“checkbox”>           -- 复选框           属性:checked
  • <input type=“radio”>                 -- 单选框(name属性必须相同才为一个组,这样就只能选一个了)
  • <input type=“hidden”>               --  隐藏
  • <input type=“password”>           -- 密码框
  • <input type=“button”>               -- 普通按钮
  • <input type=“file”>                    -- 文件上传
  • <input type=“image”>                -- 图片
  • <select></select>    <option></option>     -- 下拉列表
                    <select>标签的属性:multiple、size、name        
                    <option>标签的属性:value、selected
<tr>
    <th><label for="gn" accesskey="s">下拉列表</label>(<u>s</u>)</th>
    <td>
<select id="gn" name="gn">
<option value="0">--请选择--</option>
<option value="1">111111</option>
<option value="2">2222222</option>
<option>333333</option>
<option>4444444</option>
<option selected>55555555</option>
<option>66666666</option> </select>
  </td> 
</tr>

1>.如上面代码当,如果选111111时,提交后gn=1;如果选3333333,则gn=3333333。也就是说有value值则为value值,没有就是属性值。

2>.的那个<select>设置了size="...."后,列表就成了带滚动条的了,显示的是size设置数字的个数。

  • <textarea></textarea>                -- 多行文本域
                   属性:cols、rows
  • <label>
                   属性:for、accesskey

如上代码中给<select>标签设置一个id,然后让<label>的for=id的值,accesskey为快捷键的字母

示例:

   代码:

        

 <html>
<head>
<title>表单的应用</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"> </head> <body>
<table border="1" width="500" align="center"> <form name="frm" action="http://localhost/cms/login1.php" method="get" target="_blank" title="这是表单" enctype="multipart/form-data">
<caption>表单的应用</caption> <tr>
<th><label for="user" accesskey="u">文本域</label>(<u>u</u>)</th>
<td>
<input id="user" type="text" name="username" size="30" maxlength="10" value="username">
</td>
</tr> <tr>
<th>密码域</th>
<td>
<input type="password" name="pass" size="25" value="hello">
</td>
</tr>
<tr>
<th>复选框</th>
<td>
玩游戏 <input type="checkbox" checked name="del[]">
看电影 <input type="checkbox" name="del[]">
旅游<input type="checkbox" name="del[]">
看书<input type="checkbox" checked name="del[]">
写字<input type="checkbox" name="del[]">
</td>
</tr> <tr>
<th>单选框1</th>
<td>
<input type="radio" name="sex" checked> 男
<input type="radio" name="sex"> 女
<input type="radio" name="sex">保密
</td>
</tr>
<tr>
<th>单选框2</th>
<td>
<input type="radio" name="sex1"> 男
<input type="radio" name="sex1" checked> 女
<input type="radio" name="sex1">保密
</td>
</tr> <tr>
<th>上传文件</th>
<td>
<input type="file" name="picture">
</td>
</tr> <tr>
<th><label for="gn" accesskey="s">下拉列表</label>(<u>s</u>)</th>
<td>
<select id="gn" name="gn">
<option value="0">--请选择--</option>
<option value="1">111111</option>
<option value="2">2222222</option>
<option>333333</option>
<option>4444444</option>
<option selected>55555555</option>
<option>66666666</option>
</select>
</td>
</tr> <tr>
<th>列表</th>
<td>
<select name="gn1" size=5>
<option value="1">111111</option>
<option value="2">2222222</option>
<option>333333</option>
<option>4444444</option>
<option>55555555</option>
<option>66666666</option>
</select>
</td>
</tr> <tr>
<th>多选列表</th>
<td>
<select name="gn1" size=5 multiple>
<option value="1">111111</option>
<option value="2">2222222</option>
<option>333333</option>
<option>4444444</option>
<option>55555555</option>
<option>66666666</option>
</select>
</td>
</tr> <tr>
<th>多行文本域</th>
<td>
<textarea cols="40" rows="6" name="message">在这里输入你的信息</textarea>
</td>
</tr>
<input type="hidden" name="id" value="100">
<tr>
<td colspan="2" align="center">
<input type="submit" name="sub" value="提交">
<input type="image" src="dl.gif">
<input type="reset">
<input type="button" value="清空" onclick="document.frm.username.value=''" >
</td>
</tr>
</form>
</table>
<a href="" title="this is a link">aaaaa</a><br>
<b title="this is b tag">bbbbb </b>
</body>
</html>

PHP入门 - - 07-->HTML的表单的更多相关文章

  1. Bootstrap入门(五)表单

    Bootstrap入门(五)表单   先引入本地的CSS文件  <link href="css/bootstrap.min.css" rel="stylesheet ...

  2. AngularJS快速入门指南13:表单

    一个AngularJS表单是一组输入型控件的集合. HTML控件 HTML输入型标签标包括: input标签 select标签 button标签 textarea标签 HTML表单 HTML表单将各种 ...

  3. Jquary入门(添加 修改 表单元素)+ JSON+弹框

    字符串拼接 计算机语言 都是 对  数据的处理(获取/修改数据)  添加元素  除了  固定的方法添加 以外 都是   字符串拼接(拼接成固定格式即可执行). 1.表单添加元素  append() 方 ...

  4. jeecg入门操作—树型表单开发

    树表类型表单 表单创建,基础配置如下: 1.设置表单类型为:单表; 2.是否树选择:是; 3.设置特殊字段:[树形表单父id][树开表单列] 结果测试

  5. JavaScript入门学习笔记(表单验证)

    表单验证: 在数据被送到服务器之前对HTML表单中的输入数据进行验证,避免服务器频繁验证信息造成用户体验差. (1)表单数据是否为空 (2)输入的信息格式是否正确 (3)输入数据的类型是否正确 必填( ...

  6. Flask从入门到精通之Flask表单渲染成HTML

    表单字段是可调用的,在模板中调用后会渲染成HTML.假设视图函数把一个NameForm 实例通过参数form 传入模板,在模板中可以生成一个简单的表单,如下所示: <form method=&q ...

  7. Flask从入门到精通之Flask表单

    Flask请求对象包含客户端发出的所有请求信息.其中,request.form 能获取POST 请求中提交的表单数据.尽管Flask 的请求对象提供的信息足够用于处理Web 表单,但有些任务很单调,而 ...

  8. WEB入门二 表格和表单

    学习内容 Ø        表格的作用和制作 Ø        表单的制作 能力目标 Ø        掌握表格的创建 Ø        掌握设置表格的常用属性: Ø        理解表单的作用 Ø ...

  9. 【WEB基础】HTML & CSS 基础入门(8)表单

    前面 前面我们已经熟悉了网页上一些常见的元素,如在网页上显示一段文字.一张图片.一个列表.一张表格等等.这些东西都是事先编辑好显示在页面上只提供给用户看的,实际上,我们可以把这样的页面称之为静态页面. ...

  10. AngularJs轻松入门(六)表单校验

    表单数据的校验对于提高WEB安全性意义不大,因为服务器接收到的请求不一定来自我们的前端页面,有可能来自别的站点,黑客可以自己做一个表单,把数据提交到我们的服务器(即跨站伪造请求),这样就绕过了前端页面 ...

随机推荐

  1. 如何让ListView的item不可点击

    原文链接:http://blog.csdn.net/zhangfei_jiayou/article/details/6972752 1. 如果是listView的id是使用系统默认的id,如下, 则可 ...

  2. Effective C++ -----条款03:尽可能使用const

    如果关键字const出现在星号左边,表示被指物是常量:如果出现在星号右边,表示指针自身是常量:如果出现在星号两边,表示被指物和指针两者都是常量. char greeting[] = " he ...

  3. codeforces 556C. Case of Matryoshkas 解题报告

    题目链接:http://codeforces.com/contest/556/problem/C 题目意思:有 n 个数(1,2,...,n)组成 k 条链.第 i 条链由 mi 个数组成.每一秒只可 ...

  4. SQL Server 子查询

    这些主要是老师上课讲的一些知识点,自己做了一些整理放在这里~~~ 子查询可以是标量的.多值的或是表值的. 在期待单个值的地方可以使用标量子查询.例如,以下查询返回具有最大员工编号的员工信息: SELE ...

  5. 在HTML中禁止文字的复制

    很简单,只需在<body>中添加如下代码: <body  oncontextmenu='return false' ondragstart='return false' onsele ...

  6. TCP/IP五层模型

    (2)TCP/IP五层模型的协议   应用层 传输层 网络层 数据链路层 物理层   物理层:中继器.集线器.还有我们通常说的双绞线也工作在物理层 数据链路层:网桥(现已很少使用).以太网交换机(二层 ...

  7. Smarty模板技术学习

    模板引擎技术:使得php代码和html代码分离的技术就称为"模板引擎技术" 自定义smarty模板技术实现 <?php //迷你smarty原理 class MiniSmar ...

  8. Mac系统下使用VirtualBox虚拟机安装win7--第五步 共享文件夹设置

    1.启动virtualbox--选中win7虚拟机--点击设置--点击共享文件夹--点击右侧按钮添加共享文件夹

  9. Python中format的用法

    自python2.6开始,新增了一种格式化字符串的函数str.format(),可谓威力十足.那么,他跟之前的%型格式化字符串相比,有什么优越的存在呢?让我们来揭开它羞答答的面纱.语法 它通过{}和: ...

  10. Delphi强制类型转化和类型约定

    强制类型转换时一种技术,通过它能够使编译器把一种类型的变量当做另一种类型. 由于Pascal有定义新类型的功能,因此编译器在调用一个函数时候对形参和实参类型匹配的检查是非常严格的.因此为了能够通过编译 ...