【温故知新】HTML学习笔记（下）

表单标签

表单的目的是收集用户信息，在网页中，也需要跟用户进行交互，收集用户资料。

在HTML中，一个完整的表单通常由表单控件（也成为表单元素）、提示信息和表单域三个部分构成。

1、input控件

其中主要属性如下表所示：

**Input属性**
属性
type	text password radio checkbox button submit reset image file	单行文本输入框密码输入框单选按钮复选框普通按钮提交按钮重置按钮图形形式的提交按钮文件域
name	由用户自定义	控件的名称
value	由用户自定义	input控件中的默认文本值
size	正整数	input控件在页面中的显示宽度
checked	checked	定义选择控件默认被选中的项
maxlength	正整数	控件允许输入的最多字符数

其中type属性是类型，是最基本的属性，其取值有多种，说明了属于哪种表单。

radio如果是一组，必须给他们命名相同的名字，就是name属性，这样就可以完成单选功能了。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><table width="600" border="0" cellpadding="0" cellspacing="0" align="center"><caption><h3>青春无悔，恋爱赶紧</h3></caption><tr height="30"><td>所在地区</td><td><input type="text" value="北京" /></td></tr><tr height="30"><td>用户名</td><td><input type="text" value="xiuxianhai" /></td></tr>       <tr height="30"><td>密码</td><td><input type="password" maxlength="6" /></td></tr> <tr height="30"><td>性别</td><td>男<input type="radio" name="sex" />女<input type="radio" name="sex" checked="checked" />妖<input type="radio" name="sex" /></td></tr> <tr height="30"><td>喜欢的类型</td><td>妩媚<input type="checkbox" name="like" />气质<input type="checkbox" name="like" /> 骚俏<input type="checkbox" name="like" /> 狂野<input type="checkbox" name="like" /> 性感<input type="checkbox" name="like" /> </td></tr>  <tr height="30"><td></td><td><input type="button" value="注册" /><input type="submit" value="提交" /><input type="reset" value="重置" /></td></tr> <tr height="30"><td>上传个人照片</td><td><input type="file" /></td></tr>          </table>
</body>
</html>

2、label标签

label标签为input元素定义标注（标签），用于绑定一个表单元素，当点击label标签的时候，被绑定的表单元素就会获得输入的焦点。

for属性规定了label与那个表单元素绑定。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><label> 用户名：<input type="text"> </label><hr /><label for="pwd"> 用户名：<input type="text" /> 密码：<input type="password" id="pwd" /> </label>
</body>
</html>

3、textarea控件（文本域）

如果有需要输入大量的信息，需要用到textarea标签。

<tr height="30"><td>留言</td><td><textarea name="" id="" cols="50" rows="10">不支持富文本</textarea></td>
</tr>

4、下拉菜单

使用select控件定义下拉菜单。

<tr height="30"><td>年龄</td><td><select name="" id=""><option value="">请选择年份</option><option value="" selected="selected">1988</option><option value="">1989</option><option value="">1990</option><option value="">1991</option><option value="">1992</option></select><select name="" id=""><option value="">请选择月份</option><option value="">1月份</option><option value="">2月份</option><option value="">3月份</option><option value="">4月份</option><option value="">5月份</option></select></td>
</tr>

5、表单域

form标签用于定义表单域，即创建一个表单，以实现用户信息的收集和传递。

form中主要有如下几个属性：

action：URL地址，传输给服务器处理的URL地址；

method：提交方式，用于设置表单的提交方式，有get和post（匿名提交）；

name：表单名称；

具体资料查询可以参考如下网站：

https://www.w3school.com.cn/

https://developer.mozilla.org/zh-CN/

【温故知新】HTML学习笔记（下）相关推荐

Python课程学习笔记下
笔记目录 Python 学习笔记上面向对象和异常面向对象基本理论定义类根据类实例化对象属性相关方法相关类的补充属性补充方法相关补充描述器 python对象的生命周期内存管理机 ...
【操作系统-哈工大李治军】---学习笔记(下）---操作系统管理内存
# 操作系统-内存 ----------------操作系统如何管理CPU------>操作系统如何管理内存----------------------------------- 1 内存使用 ...
计算机网络基础学习笔记(下)
学习视频随看随记 ABCD类型地址的分类根据地址左起第-个十进制数的值,可以判断出网络类别(小于127的为A类, 128 ~ 191 的为B类,192 ~ 223的为C类) ; 根据网络类别,就可 ...
h5学习笔记下拉菜单
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 鼠标经过 ...
jQuery基础学习笔记(下)
8.jQuery的扩展与noConflict 1.jQuery扩展 <script src="../../jquery-2.1.3.min.js"></scrip ...
Oracle PL/SQL语句基础学习笔记(下)
游标游标: 游标(cursor)可以被看作指向结果集(a set of rows)中一行的指针(pointer).在oracle数据库中可以使用显示或隐式两种游标. 1.隐式游标在执行一个sql语 ...
Elasticsearch7学习笔记(中)
Elasticsearch是实时全文搜索和分析引擎,提供搜集.分析.存储数据三大功能:是一套开放REST和JAVA API等结构提供高效搜索功能,可扩展的分布式系统.它构建于Apache Lucene ...
【ember zigbee】序章:协议栈相关文档学习笔记
原文地址:https://blog.csdn.net/tainjau/article/details/90648114 文章目录写在前面一.材料出处二.文档解析 2.1.EZSP Protoco ...
Python课程学习笔记上
笔记目录学前准备 Python解释器安装包下载安装 Pycharm 下载常用的快捷键 Python程序执行机制语法基础注释和中文乱码变量数据类型运算符数值运算符复合运算符比较运 ...
2020年Yann Lecun深度学习笔记（下）
2020年Yann Lecun深度学习笔记(下)

【温故知新】HTML学习笔记（下）

【温故知新】HTML学习笔记（下）相关推荐

最新文章

热门文章