html之表单

yanruo06280

已于 2022-04-09 23:58:51 修改

阅读量284

点赞数

文章标签： html

于 2022-04-09 23:55:51 首次发布

原文链接：https://blog.csdn.net/pxhdky/article/details/82148377

版权

一、表单综述

1.1 表单的作用：实现网页上的数据交互，手机客户端输入的数据信息，提交到网站服务器端进行处理。

1.2 表单的常见应用场景：1. 注册/登录 2. 搜索 3. 留言/评论 4. 文件上传/文章编辑

1.3 表单的结构：表单区域+表单控件（表单元素）

二、表单创建

表单的创建使用<form>双标签来创建表单。现在将<form>标签的属性简单列举如下

属性名	属性值	备注
action	url路径	必须的属性！表单要提交的服务器的地址
name	自定义名称	表单名
method	get/post	必须属性发送方式

name属性和id属性的区别：

1. id在页面中具有唯一性，name可以重复

2. name主要对应服务器端，用于对提交到服务器后的表单数据进行标志。要实现数据交互功能，表单和表单控件都需要使用name属性。

3. name的另一个功能是对应脚本（javascript），来处理表单中的各种数据值。而id主要对应css样式的应用。

三、html的表单控件（如何添加表单项）

3.1 输入文本框

输入型的控件，支持用户输入用户信息，如用户输入用户名，输入查询条件等。

3.1.1 单行文本

单行文本框使用<input>标签来创建，<input>是一个单标签，一个<input>标签代表一个输入框

属性名	属性值	说明
type	text、password等	定义表单的类型，如文本框是text
name	自定义名称	无
value	定义默认值	文本默认的内容，使用value属性，默认值在填写完数据后依然存在 placeholder（常用）属性提供可描述输入字段预期值的提示信息（hint）。该提示会在输入字段为空时显示，并会在字段获得焦点时消失。

type属性：

类型	标签	type属性
文本框	<input>	<input type="text">
密码框	<input>	<input type="password">
隐藏域	<input>	<input type="text">

3.1.2 多行文本

多行文本使用<textarea>标签创建。<textarea>标签是一个双标签，使用它可以创建一个可输入多行文本内容的区域。<textarea>标签没有value属性，标签形成的区域中放置的内容就是value的值。

3.2 选择框

使用选择框能够让用户选择数据内容

3.2.1 单选按钮（○ ○）

单选框使用<input>标签来创建，其对应的type属性为"radio"。单选框具有互斥的特点，因此其必须成组出现。如果要实现单选的情况，name属性必须一致。除此之外，还要设置value值，用于传到服务器端。

属性名	属性值	备注
type	<input type="text">	代表是单选按钮
checked	无	代表默认已选中状态
value	自定义	作为用户填写的值传到服务器

3.2.2 多选框（复选框☑ ☑ ）

复选框同样使用<input>标签来创建，其对应的type属性为"checkbox"。与单选框不同，复选按钮可以单个使用，也可成组使用。其他属性与单选框相同，不再赘述。

3.2.3 下拉列表

下拉列表使用<select>标签来创建，<select>标签是一个双标签，需要与<option>标签结合使用，才能实现下拉列表现在的样式。<option>标签是一个双标签，<option value="all" selected>全部</option>。<option>标签中的selected属性可以将选择项设置为默认值。

类型	标签	说明
下拉列表	<select></select>	创建下拉列表
列表值	<option></option>	给下拉列表赋值

标签	属性	说明
<select></select>	multiple	选择多个选项，一个下拉框多个内容
<option></option>	selected	selected可以将选择项设置为默认值 <option value="all" selected>全部</option>
<select></select>	size	规定下拉列表中可见选项的数目
<optgroup></optgroup>	label	给列表中的选项进行分组，形成类似树形的分级选择控件。label用于选项组的文本描述

3.3 点击控件

常见的需要实现点击操作的场景有：登录/注册、搜索、重置等等。下面表格列举了点击操作对应使用的标签和属性设置：

操作	标签	属性	说明
普通按钮	<input>	<input type="button" >	无
提交按钮	<input>	<input type="submit" value="登录" >	提交内容到服务器
重置按钮	<input>	<input type="reset">	清空内容
上传按钮	<input>	<input type="file">	无
图像按钮	<input>	<input type="image" src="路径" alt="替代文本" >	无

登录界面实例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>用户登录实例</title>
<style>
	* { 
        margin:0; 
        padding:0;
    }
	body { 
        font-family:'微软雅黑'; 
        background:#eee;
    }
	#userlogin { width:300px; 
        background:white; 
        margin:30px; 
        padding:25px; 
        margin:0 auto; 
    }
		#userlogin h3 { 
            font-size:16px; 
            line-height:2em; 
            margin-bottom:25px;
        }

		#userlogin .input-text { 
            font-family:'微软雅黑'; 
            border:1px black solid; 
            padding-left:10px; 
            height:40px; 
            width:200px; 
            font-size:16px; 
            margin-bottom:20px;
            border-radius: 5px;
        }
		#userlogin .input-btn { 
            display:block; 
            width:300px; 
            height:40px; 
            border:none; 
            background:#9a0002; 
            color:white; 
            font-size:16px; 
            font-weight:bold; 
            letter-spacing:5px; 
            text-align:center; 
            border-radius:5px; 
            margin-bottom:15px;
		}
        
		#userlogin .input-btn:hover { 
            background:#d10003; 
            cursor:pointer; 
        }/*cursor属性：设置鼠标的显示形状。poi是指的手型nter*/

		#userlogin h6 { 
            text-align:right;}
			#userlogin h6 a { 
                color:#999; 
                text-decoration:none; 
                margin-right:12px; 
            }
			#userlogin h6 a:hover {
                color:#c81d1f; 
                }
</style>
</head>
 
<body>
	<form action="#" method="post" name="userlogin" id="userlogin">
    	<h3>密码登录</h3>
        <p><input class="input-text" type="text" placeholder="请输入用户名" autofocus required > 用户名</p>
        <p><input class="input-text" type="password" placeholder="请输入密码" autofocus required> 密码</p>
        <p><input class="input-btn" type="submit" value="登录"></p>
        <h6>
            <a href="#">忘记密码</a><a href="#">免费注册</a></h6>
    </form>
</body>
</html>

yanruo06280

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
html之表单

一、表单综述1.1 表单的作用：实现网页上的数据交互，手机客户端输入的数据信息，提交到网站服务器端进行处理。1.2 表单的常见应用场景：1. 注册/登录 2. 搜索 3. 留言/评论 4. 文件上传/文章编辑1.3 表单的结构：表单区域+表单控件（表单元素）二、表单创建表单的创建使用<form>双标签来创建表单。现在将<form>标签的属性简单列举如下属性名属性值备注 action url路径必须的属性！表单要提交的服务器的.
复制链接

扫一扫