FORM表单小结

最新推荐文章于 2021-06-30 19:16:32 发布

小王在划水

最新推荐文章于 2021-06-30 19:16:32 发布

阅读量116

点赞数

文章标签： html

本文链接：https://blog.csdn.net/wangwc124/article/details/117385670

版权

本文介绍了HTML的基础概念，详细解读了form表单中的input和textarea标签，并展示了如何使用它们创建一个用户注册表单，包括文本框、密码框、单选/多选按钮、下拉框和文本区域，以及提交和重置按钮的使用。

摘要由CSDN通过智能技术生成

一.HTML简介

HTML ：全称为 HyperText Mark-up Language，翻译为超文本标签语言，标签也称作标记或者元 素。 HTML 是目前网络上应用最为广泛的技术之一，也是构成网页文档的主要基石之一。HTML文本是由 HTML 标签组成的描述性文本，HTML 文本可以说明文字、图形、动画、声音、表格、链接等。

HTML 的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而 主体则包含所要说明的具体内容。需要说明的是 HTML 不是编程语言，而是一种描述性的语言，用于描述超文本中内容的显示方式。比如，文字以什么颜色、大小显示，图片以什么尺寸、位置来显示等。这些描述都是用 HTML 标签来描述的。

HTML的特点：简单、可扩展、平台无关性。

二.form表单中input，textarea标签

(1)input属性

name	元素名称
value	元素的值
id	元素的标识符
maxlength	元素接收字符上限
readonly	只读
type	规定input的类型
disabled	禁用input标签，不能使用不能点击
required	内容提示不能为空
autofocus	打开页面自动获取光标
checked	默认选中
mutiple	规定输入字段可选择多个值
size	以字符的个数设定元素的宽度

（2）input标签

text	文本框
password	密码框
submit	提交按钮
radio	单选按钮
checkbox	多选按钮
button	普通按钮
reset	复位按钮
image	图像按钮
hidden	隐藏域
file	文本域
color	字体颜色

（3)textarea标签

date	日期
datetime	日期加时间
time	时间
email	电子邮件
mouth	年份和月份
number	号码
cols	以字符个数设定的多行文本框的宽度
rows	以字符个数设定的多行文本框的高度

三.常用属性及特殊字符

（1）bgcolor 颜色的表示法：

第一种：英文单词 red black

第二种：#rrggbb 十六进制 #000000 #ffffff r ---- red g ---- green b ---- blue

background ------ 背景图片（不太建议使用图片做图片）

text ----- 文本的颜色

link ------ 链接文本的颜色

vlink------ 访问过的链接的文本颜色

Alink ------ 激活链接时的颜色

（2）特殊字符

&lt;&gt;&yen;&quot;&copy;&reg;&plusmn;&permil;&divide;

< > ¥ " © ® ± ‰ ÷

（3）弹幕

direction	表示方向 left right up down ,默认值left
behavior	表示的是滚动的方式连续滚动（ scroll ）只滑动一次 (slide) 来回的滚动（ alternate ）
scrollamount	表示运动的速度值正整数默认6
loop	表示循环的次数值正整数默认无限次循环
scrolldelay	表示停顿的时间，值正整数默认值是0 单位是毫秒
align	表示对齐方式取值可以是right left up bottom middle(默认值)
bgcolor	滚动区域的背景颜色
height\width	设置滚动的区域的大小
hspace \vspace	设置元素到边界的水平和垂直的距离
onMouseOut="this.start()"	用来设置鼠标移出该区域时继续滚动
onMouseOver="this.stop()"	用来设置鼠标移入该区域时停止滚动

四.练习

2. 实现如下效果：

要求：

1. 用户名为文本框，名称为 UserName

2. 密码为密码框，名称为 UserPassword

3. 性别为两个单选按钮，名称为 gender ，值分别为男和女，男默认选中

4. 爱好是三个多选按钮，名称为 like ，值分别为写作、听音乐、体育

5. 省份为下拉框，名称为 province ，顺序：北京、上海、陕西、四川、重庆、河北；陕西默认选

中

6. 自我介绍为多行文本框，名称为 intro ，宽 25 ，高 5 ，默认值为 “ 这个家伙什么也没留

下 ”

7. 提交按钮，名称为 “send” ，标签为 “ 提交 ”

8. 重置按钮，名称为 “reset” ，标签为 “ 重置 ”

9. 使用表格定位表单

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>

	
		<form >
		<table border="1" cellspacing="0" bgcolor="#d3c6a6" width="400">
		<tr>
		<td colspan="2" align="center" bgcolor="#c0c0c0">用户注册</td>
		</tr>
		<tr>
		<td align="right"  width="400">用户名:<name="UserName"></td>
			<td  width="400"> <input type="text" ></td>
			</tr>
	    <tr><td align="right">密码:</td>
			<td><input type="text" name="UserPassword"></td>
			</tr>
			<tr>
			<td align="right">性别:</td> 
			<td><input type="radio" value="男" name ="gender">男
		             <input type="radio" value="女" name="gender">女</td>
		             </tr>
            <tr>
            <td align="right">爱好:</td>
            	<td><input type="checkbox" name="写作">写作
            	<input type="checkbox" name="听音乐">听音乐
            	<input type="checkbox" name="体育">体育</td>
            	</tr>
            <tr>
               <td align="right">省份:</td>
               <td><select name="province">
                <option value="陕西" selected="selected">陕西</option>
            <option value="北京">北京</option>
            <option value="上海">上海</option>
           
            <option value="四川">四川</option>
            <option value="重庆">重庆</option>S
            <option value="河北">河北</option>
            </select></td></tr>
            <tr>
            <td align="right">
            自我介绍:</td>
            <td><textarea name="intro" cols="25" rows="5">这家伙什么也没留下</textarea></td>
            </tr>
            <tr >
            <td colspan="2" align="center" bgcolor="#c0c0c0">
            <input type="submit" name="send" value="提交">
            <input type="reset" name="reset" value="重置"></td>
            </tr>
		</table>
		</form> 
	
</body>
</html>

解答：