当前位置:首页 >> 电脑基础知识 >>

HTML基础标签-表单练习

《前端开发基础》

专业:

学号:

实 验 实验二 Html 基本标签—表单 名称

实 验 掌握 html 表单的创建和设置方法 目的

属性



accept

mime_type

alt

text

checked checked

disabled disabled

maxlength number

name

field_name

readonly readonly

size

number_of_char

src

URL





type





Text button checkbox file hidden image password radio reset submit

value

value

Type

功能

例子

姓名:
描述 规定通过文件上传来提交的文件的类型。 定义图像输入的替代文本。 规定此 input 元素首次加载时应当被选中。 当 input 元素加载时禁用此元素。 规定输入字段中的字符的最大长度。 定义 input 元素的名称。 规定输入字段为只读。 定义输入字段的宽度。 定义以提交按钮形式显示的图像的 URL。
规定 input 元素的类型。
规定 input 元素的默认值。

text password radio
checkbox reset

单行文本输入 <input type="text" name="username" />

密码

<input type="password" name="password" />

单选

<input type="radio" name="sex" value="男" />男 <input type="radio" name="sex" value="女" />女

多选

<input type="checkbox" name="hobby" value="书" />书 <input type="checkbox" name="hobby" value="画" />画

重置表单数据 <input type="reset" value="重置" />

DQ 2017-03-01

-1-

《前端开发基础》

file submit image button
效果图:

文件上传

<input type="file" name="files" />

提交表单数据 <input type="submit" value="提交" />

图形提交按钮 <input type="image" src="images/button.gif" />

普通按钮

<input type="button" value="播放音乐" /> 项目 1:简单表单制作

实 项目 2:简单表单制作 验 效果图: 内 容

DQ 2017-03-01

-2-

《前端开发基础》
实验 总结 教师 评阅
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <head>
<title>简单表单制作</title> </head> <body> <p>效果图:</p>
<form action="表单.html"method="post"> 账号:<input type="text"id="in1"name="in1"/><br/> 密码:<input type="password"id="in2"name="in2"/><br/> 姓名:<input type="text"id="in3"name="in3"/><br/> 性别:<input type="radio"name="sex"value="male">男人<input type="radio"name="sex"value="female">女人<br/> 是否单身:<input type="checkbox" name="hobby" value="是" />
</form> 年龄: <select>
<option value="0-30">0-30</option> <option value="30-60">30-60</option> <option value="60-90">60-90</option> <option value="90-120">90-120</option> </select><br/> 上传照片:<input type="file" name="files" /><br/> <h2>确定上传</h2> <input type="submit" value="确定" /> <input type="submit" value="提交" /> <input type="reset" value="重置" /> </body> </html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <head>
<title>简单表单制作 2</title> </head> <body> <p>效果图:</p>
DQ 2017-03-01

-3-

《前端开发基础》
<form action="表单.html"method="post"> 贵美网站邮箱:<input type="text"id="in1"name="in1"/><br/> 输入密码:&nbsp&nbsp&nbsp&nbsp<input type="password"id="in2"name="in2"/><br/> 再次输入密码:<input type="text"id="in3"name="in3"/><br/>
</form> <select>
<option value="豪华版">豪华版</option> <option value="简洁版">简洁版</option> </select><br/> <input type="checkbox" name="hobby" value="0">自动登陆<input type="checkbox" name="hobby" value="1">安全登陆<br/> <input type="reset" value="重置" /> <input type="submit" value="登陆" /> </body> </html>

DQ 2017-03-01

-4-


相关文章:
对口升学HTML练习 表单和框架.pdf
对口升学HTML练习 表单和框架 - HTML 练习表单和框架 一、单选
hTML基本表单标签.doc
hTML基本表单标签 - 1、上次讲解内容 1)文字类的标签:<font size=”” color=”” face=””>,<br>,<p>,<h1>?<h6>,<hr> 2)图片标签:<im...
html练习题答案.doc
html练习题答案_从业资格考试_资格考试/认证_教育...是最基础的网页语言 D.标签的属性必须使用单引号或...A.表单元素只能放置在表单<form>标签中,才可以将...
熟练使用HTMl标签及表单.doc
熟练使用HTMl标签表单_计算机软件及应用_IT/计算机_专业资料 暂无评价|0人阅读|0次下载|举报文档 熟练使用HTMl标签表单_计算机软件及应用_IT/计算机_专业资料。...
html练习题.doc
html练习题 - HTML练习题,可以提升自己的HTML使用技能。... 基本语法 <!doctype html> <!--声明:html5 的...form> 10) div 标签 默认宽度占满整个窗口,默认...
HTML专项练习题.doc
HTML专项练习题 - 有关HTML的一些练习题,有一定的难度... HTML 部分综合练习试题(复习备用试题) HTML 常用标记...用来输入密码的表单域是 5.文件头标签包括关键字...
HTML及网页制作练习题-完整版.pdf
种特殊的HTML网页 30关于标签,以下说法不正确的是(BC) Ainput 标签用于设定...表单基本结构是: (1 分) C A<From> 加入一个按钮 </From> B<From>一...
HTML及网页制作练习题-完整版..doc
种特殊的HTML网页 30关于标签,以下说法不正确的是(BC) Ainput 标签用于设定...表单基本结构是: (1 分) C A<From> 加入一个按钮 </From> B<From>一...
HTML练习.pdf
用来输入密码的表单域是 文件头标签包括关键字、描述、 “高级”CSS 样式一般...html基本语法上机练习 4页 免费 HTML试题及答案 26页 5下载券 HTML期末复习...
HTML选择题练习(原创).doc
【选择一项】 a) <HEAD>HTML 练习</HEAD> b) ...TEXTAREA> 27) 下列()表单元素不是由 input 标签...11实验1 HTML基本标记的... 1页 3下载券 html...
HTML试题.doc
<T> HTML 练习</T> 7. HTML 文档中的元素分为...信息的主要手段,下列哪三项是表单标签< form>的属性...在网页中显示下面的列表 1. 超连接 2. 基本标记 ...
第1章 HTML基本标签和表单_图文.pdf
第1章 HTML基本标签表单_互联网_IT/计算机_专业资料 暂无评价|0人阅读|0次下载|举报文档第1章 HTML基本标签表单_互联网_IT/计算机_专业资料。网页设计与...
html表单基础知识.pdf
html表单基础知识 - html表单:HTML表单基础知识 疯狂代码 http://CrazyCoder.cn/ ?:http:/CrazyCoder.cn/HtmlJiaoCheng/Art...
Html5程序设计基础教程(练习题参考答案).doc
Html5程序设计基础教程(练习题参考答案) - 第1章 一、选择题 1.A HTML 5 概述 2.D 3.C 4.C 二、填空题 1.HyperText Markup Langua...
html语言入门篇.doc
四、练习题 4.1、基础练习 1)HTML 基础标签练习目的: 1.了解体会 html 的...7)HTML 表单与输入练习目的: 掌握 html 表单的创建与输入 练习内容: 编写页面...
第一章 HTML基本标签.ppt
第一章 HTML基本标签_计算机软件及应用_IT/计算机_...</table> </form> 常用于布局的块级标签div层...? 超链接标签的使用 上机练习1 ? 需求说明: ...
HTML基本标签_图文.ppt
</html> 练习基本标签需求说明: 注意HTML结构的语 义化,遵守 XHTML1.0...hTML基本表单标签 4页 1下载券 HTML的基本标签1.ppt 24页 5下载券 ...
html练习题.doc
html练习题_从业资格考试_资格考试/认证_教育专区。...扩住 23 题干 使用 HTML 编写网页代码的基本格式...A.表单元素只能放置在表单<form>标签中,才可以将...
HTML基础(赵剑宇).ppt
? 学习HTML注意多记、多练北京传智播客教育 www....C#基础 高级软件人才实作培训专家 HTML基本标签 ?...基础 高级软件人才实作培训专家 为什么要使用表单?...
Html5程序设计基础教程(练习题参考答案).doc
Html5程序设计基础教程(练习题参考答案)_其它_高等...? <time>标签用于定义公历的时间(24 小时制)或...答 规定在提交表单时不验证数据,例如: <form ...