HTML高级标签(3)————表单的应用
在HTML开发中,标签的种类和数量非常多,不可能说每一种都研究透。非常多能够用CSS来控制的标签,我们基本没有必要在上面浪费时间。所以,我们仅仅要掌握在HTML开发中比較经常使用的标签就全然能够了。
首先,先写一个最简单的登录表单。
<html>
<head>
<title>表单的应用</title>
</head> <body>
<table border="1" width="500" align="center">
<form name="frm" action="login.php">
<caption>表单的应用</caption> <tr>
<th>文本域(<u>U</u>)</th>
<td>
<input type="text" name="username" value="username">
</td>
</tr>
<tr>
<th>密码域</th>
<td>
<input type="password" name="password" value="password">
</td>
</tr>
<span style="white-space:pre"> </span><tr>
<span style="white-space:pre"> </span><td colspan="2" align="center">
<span style="white-space:pre"> </span><input type="submit" name="sub">
<span style="white-space:pre"> </span><input type="reset">
<span style="white-space:pre"> </span><input type="image" src="ucai.png"><span style="white-space:pre"> </span><!--这是加入相对路径的一张照片-->
<span style="white-space:pre"> </span></td>
<span style="white-space:pre"> </span></tr>
<span style="white-space:pre"> </span></form>
<span style="white-space:pre"> </span></table>
<span style="white-space:pre"> </span></body>
</html>
这是程序执行后的结果:(图片仅仅是我任意截取的一个logo,绝不是打广告)
一个简单的表单就完毕了,注意<form>标签应该放在<table>里面,加入其它字段元素时,也应该遵循这个方式。
接下来,再加入一个单选框和复选框。
<tr>
<th>复选框</th>
<td>
game<input type="checkbox">
movie<input type="checkbox">
travel<input type="checkbox">
reading<input type="checkbox">
writing<input type="checkbox">
</td>
</tr>
<tr>
<th>单选框</th>
<td>
<input type="radio" name="sex" checked>boy
<input type="radio" name="sex">girl
<input type="radio" name="sex">secret
</td>
</tr>
复选框的type="checkbox",单选框的type="radio".
然而,复选框可一所有选择,也能够都不选择。单选框则必须有一个选择的,所以要加上一个默认项,也就在后面加入一个checked。还有,单选框中的选项都是以相互排斥的方式存在的,所有将他们相当于放在一个数组中一样,也就是命名都一样的话,就能够保证他们的相互排斥性。要不然,就一个都选不了。
这是执行后的结果:
表单中少不了的肯定有列表,以下再介绍几种经常使用的列表:普通列表,下拉列表,多选列表。
<th>下拉列表</th>
<td>
<select name="list">
<option>--请选择--</option>
<option>111111</option>
<option selected>222222</option><span style="white-space:pre"> </span><!--默认选项-->
<option>333333</option>
<option>444444</option>
<option>555555</option>
<option>666666</option>
<option>777777</option>
<option>888888</option>
</select>
</td>
</tr>
<tr>
<th>普通列表</th>
<td>
<select name="list1" size="4"><span style="white-space:pre"> </span><!--下拉长度为4-->
<option>--请选择--</option>
<option>111111</option>
<option>222222</option>
<option>333333</option>
<option>444444</option>
<option>555555</option>
<option>666666</option>
<option>777777</option>
<option>888888</option>
</select>
</td>
</tr>
<tr>
<th>多选列表</th>
<td>
<select name="list2" multiple><span style="white-space:pre"> </span><!--multiple表示为多选列表-->
<option>--请选择--</option>
<option>111111</option>
<option>222222</option>
<option>333333</option>
<option>444444</option>
<option>555555</option>
<option>666666</option>
<option>777777</option>
<option>888888</option>
</select>
</td>
</tr>
标签的内外关系不要搞混了。
执行结果:
最后,再写一个多行文本域。在非常多须要描写叙述的地方,多行文本域就派上用场了。
<tr>
<th>多行文本域</th>
<td>
<textarea cols="20" rows="10" name="message">typing your message here</textarea>
</td>
</tr>
就是非常easy,一个<testarea></textarea>搞定了。cols和rows属性就不多讲了。
看看执行后的样子:
字数超过文本框大小时,会自己主动加入滚动栏。
好了,经常使用的也就是这些了,大家共同学习进步。
HTML高级标签(3)————表单的应用的更多相关文章
- 制作Html标签以及表单、表格内容
制作Html一般用DW(......),Html全称为(Hyper Text Markup Language 超文本标记语言) 文本就是平常电脑上的文本文档,只能存储文字,而超文本文档可以存储音乐 ...
- HTML <fieldset> 标签将表单内的相关元素分组
<fieldset> 标签将表单内容的一部分打包,生成一组相关表单的字段. 当一组表单元素放到 <fieldset> 标签内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边 ...
- 第二天(就业班) html的引入、html常用标签、实体标签、超链接标签、图片标签、表格、框架标签、表单[申明:来源于网络]
第二天(就业班) html的引入.html常用标签.实体标签.超链接标签.图片标签.表格.框架标签.表单[申明:来源于网络] 第二天(就业班) html的引入.html常用标签.实体标签.超链接标签. ...
- <form> 标签 // HTML 表单 // from 表单转换成json 格式
<form> 标签 // HTML 表单 // from 表单转换成json 格式 form 表单,对开发人员来说是在熟悉不过的了,它是页面与web服务器交互时的重要信息来源 表 ...
- 前端1-----块级标签(独占一行),排版标签(样式排版),其他标签,form表单(input的多种类型)
前端1-----块级标签(独占一行),排版标签(样式排版),其他标签,form表单(input的多种类型) 一丶HTML块级标签 排版标签 p 标签: 段落标签,会自动在段落上下加上空白来分开 p标签 ...
- HTML的一些标签以及表单
HTML的一些标签以及表单 图片标签 属性 说明 src 图像的路径 alt 图像不能显示时的替换文字 title 鼠标悬停时显示的内容 border 设置图像边框的宽度 align 对齐方式 相对路 ...
- Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)
一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...
- [原创]java WEB学习笔记62:Struts2学习之路--表单标签:form,表单标签的属性,textfield, password, hidden,submit ,textarea ,checkbox ,list, listKey 和 listValue 属性,select ,optiongroup ,checkboxlist
本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...
- JavaScript高级程序设计之表单基础
A FORM <form id='form' action='http://a-response-url' method="post"> <!--maxlengt ...
- 从零开始学习前端开发 — 10、HTML5新标签及表单控件属性和属性值
一.html5新增标签 1.结构性标签 header 定义网页的头部 nav 定义网页的导航 footer 定义网页的底部 section 定义网页的某个区域 article 定义网页中的一篇文章 a ...
随机推荐
- Python之路:画空心矩形
1.if语句中当要判断多个语句成立才能执行语句时候,可以用or(或,只要其中一个成立就可以执行下一条语句)或者and(只要有其中一个不成立就不会执行下一条语句) 2.在Python中range函数会产 ...
- 最新华为数通HCNP-随堂培训视频课程 大牛讲解高清带实验
2017年最新华为数通HCNP-随堂培训视频课程 大牛讲解高清带实验 2017最新的华为中级HCNP培训,数通方向,讲解非常牛高清课程附带实验. 华为数通HCNP-2017年最新随堂培训视频(高清)\ ...
- Volitale
例1 volatile提醒编译器它后面所定义的变量随时都有可能改变.因此编译后的程序每次须要存储或读取这个变量的时候,都会直接从变量地址中读取数据. 假设没有volatile关键字.则编译器可能优化读 ...
- amaze ui各个模块简单说明
amaze ui各个模块简单说明 导航添加依据 http://amazeui.org/css/ 下面内容属学习笔记,如有理解偏差和错误请留言相告,感谢!* =(官网这块写的很详细) 一.基本样式 1 ...
- vue methods 方法中 方法 调用 另一个方法。
vue在同一个组件内: methods中的一个方法调用methods中的另外一个方法. 可以在调用的时候 this.$options.methods.test(); this.$options.met ...
- 41.内存函数实现(memcpy,memset,memmove,memicmp,memchr.memccpy)
memcpy #include <stdio.h> #include <stdlib.h> #include <memory.h> void * mymemcpy( ...
- 分享一个css3学习使用的选择器手册
http://www.haorooms.com/tools/css_selecter/
- VMwarep挂载镜像及配置本地Yum源
1.挂载镜像: *. 通过mount命令 linux mount挂载设备(u盘,光盘,iso等 )使用说明 *. 通过VMware的控制页面手工挂载 1.1 打开Vmware软 ...
- 细说 iOS 消息推送
APNS的推送机制 与Android上我们自己实现的推送服务不一样,Apple对设备的控制很严格.消息推送的流程必需要经过APNs: 这里 Provider 是指某个应用的Developer,当然假设 ...
- js39---组合模式,查找遍历树
/** *有这样一个需求 *有一个学校有2个班(一班,二班) *每个班级分2个小组(一班一组,一班二组,二班一组,二班二组) *学校计算机教室有限,每一个小组分着来上课. *考试的时候大家一起考 *请 ...