一、<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. 留只脚印(DP)

    题目链接:http://codeforces.com/problemset/problem/698/A 很久很久没做咯~~~~ dp 是个很神奇的东西.... #include <iostrea ...

  2. jquery after append appendTo三个函数的区别

    jq文档的说明是 1.after函数 定义和用法: after() 方法在被选元素后插入指定的内容. 语法: $(selector).after(content) 实例: <html> & ...

  3. 使用a标签删除进行提示

    一句话搞定: <a href="Login.aspx" target="mainFrame" class="STYLE4" oncli ...

  4. [Android Pro] APK

    svn updatesvn status ls -alsvn log --limit 8 > RELEASE_NOTE.txt cat RELEASE_NOTE.txt chmod a+x gr ...

  5. 43个优秀的Swift开源项目

    作为一门集百家之长的新语言,Swift拥有着苹果先天的生态优势,而其在GitHub上各种优秀的开源项目也层出不穷.本文作者@SwiftLanguage从2014年6月苹果发布Swift语言以来,便通过 ...

  6. css设置网页文本选中样式

    网页的默认的文本选中颜色是蓝底白字(大多应该是吧),这个样子: 感觉并不是特别好看,可以通过CSS3的一个特性,一个CSS3的伪类选择器::selection来设置文本被选中时的状态,比如本博客的主题 ...

  7. VCC、VDD、VSS、 VEE 和VPP的区别

    在电子电路中,常可以看到VCC.VDD和VSS三种不同的符号,它们有什么区别呢? 一.解释 VCC:C=circuit 表示电路的意思, 即接入电路的电压: VDD:D=device 表示器件的意思, ...

  8. Git+VirtalBaox+Vagrant创建Linux虚拟机

    文章内容来自Udacity课程:Linux Command Line Basics--Getting Started with the Shell Your own Linux box To lear ...

  9. C#4.0图解教程 - 第24章 反射和特性 – 2.特性

    1.特性 定义 Attribute用来对类.属性.方法等标注额外的信息,贴一个标签(附着物) 通俗:给 类 或 类成员 贴一个标签,就像航空部为你的行李贴一个标签一样 注意,特性 是 类 和 类的成员 ...

  10. HTML学习之Web存储(五)

    本地数据库功能大大增强了Web应用对于本地存储数据的方式和功能.Web时代真正进入了:“客户端为重,服务端为轻的时代”. <!DOCTYPE html> <html xmlns=&q ...