form表单的基础了解

最新推荐文章于 2024-04-24 09:27:42 发布

Miracle_ze

最新推荐文章于 2024-04-24 09:27:42 发布

阅读量1.1k

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/Miracle_ze/article/details/117289605

版权

form表单的基础了解

一、表单作用
二、from表单涉及到的基础表单元素
总结

一、表单作用

表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分：表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

二、from表单涉及到的基础表单元素

表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
<from>属性列表：

属性	描述
accept-charset	规定在被提交表单中使用的字符集（默认：页面字符集）。
action	规定向何处提交表单的地址（URL）（提交页面）。
autocomplete	规定浏览器应该自动完成表单（默认：开启）。
enctype	规定被提交数据的编码（默认：url-encoded）。
method	规定在提交表单时所用的 HTTP 方法（默认：GET）。
name	规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate	规定浏览器不验证表单。
target	规定 action 属性中地址的目标（默认：_self）。

form表单多用action属性进行网页跳转

在<form>属性也有运用 HTML 请求方法
最常用的两种方法是：GET 和 POST。
两种请求方式都是让后台获取到数据
区别：
Get请求不安全，将name属性的信息暴露在地址栏上地址栏默认大小64kb
post请求安全不会将信息暴露在地址栏上
详细内容请参考网站：HTML 请求方法

1.input标签

1.1html5之前的input标签的相关属性

input是表单中最基础也是最重要。input标签拥有许多不同的表示样式，而表现取决于type属性。

type属性类型：

类型	实现的功能
text	文本框（单行）
password	密码框
submit	提交按钮
radio	单选按钮
checkbox	多选按钮
button	普通按钮
reset	复位按钮
image	图像按钮（使一张图片成为按钮）
hidden	隐藏域
file	文本域（选择文件）

值得一提的是其中：submit、radio、checkbox、rest、iamge和file的运用较多也比较重要。

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表单</title>
</head>
<body  bgcolor="khaki">
<!-- bgcolor 背景色 ||  bgcolor与background 同时在，会默认选择background-->
    <div  align="center">
    <h2>书城</h2>
	<form action=".\demo02.html">
	<!-- form表单的action页面跳转   同一个当前文件可以直接demo03.html-->
	<!--相对路径的..\表示一个上级  ||  ..\..\表示两个上级-->
		<p>用户名：<input type="text" name="username"></p>
		<p>密码：<input type="password" name="pwd"></p>
		<p>
			请选择性别<input type="radio" value="男" name="gender"  checked="checked">男
			<input type="radio" value="女" name="gender">女
			<!--html5之后checked可以不用后面的=“checked“，他表示默认选择-->
		</p>
		<p>
		请选择你喜欢的类型：
			<input type="checkbox" value="言情" name="book">言情
			<input type="checkbox" value="奇幻" name="book">奇幻
			<input type="checkbox" value="修仙" name="book">修仙
			<input type="checkbox" value="校园" name="book">校园
		</p>
		
		<p>
		<input type="submit" value="提交">
		<input type="button" value="普通按钮">
		<input type="reset" value="重置">
		<!-- <input type="image" src="地址">     src来引用图片 -->
		<input type="file" >
		</p>
	</form>
	</div>
</body>
</html>

结果：
在这里插入图片描述

补充：input标签除了上述常见的还有一些标识符，还有一些也可以了解
name ------- 元素的名称
value ----- 元素的值
id -------- 元素的唯一标识符
size -------- 以字符的个数设定元素的宽度
maxlength --------- 元素接受字符个数的上限
checked -------- 元素是否被选中
label 标签是为Input标签定义的标签（不会给用户展示任何样式）
readonly ---------- 输入的字段是只读，不能做任何修改
disabled ------ 禁用input元素，被禁用的input是不可用，也不可以点击
required------- 提交信息的时候，如果你的Input是空的时候，会有相关的提示
autofocus -------- 当页面打开的时候，会自动获取光标

1.2补充html5对input中type属性的补充：

type=”email“

<input type="email" name="email" placeholder="请输入邮箱">

运行结果:
在这里插入图片描述
其中 placeholder="请输入邮箱 的placeholder输入的文字，当鼠标点击文本框就会消失。

type = “number”

<input type="number" max="10" min="1">

运行结果:
在这里插入图片描述
max与min进行范围限制其最大与最小

type="color

<input type="color" >

运行结果:
在这里插入图片描述
color是色板，默认为黑色

type = “date”
type = ”datetime-local“
type = “time”

<input type="date">
<input type="datetime-local">
<input type="time">

运行结果:
在这里插入图片描述
date是日期
datetime-local使日期里面多了准确时间（获取本地时间）
time使获取本地时间（不包含年月日）

2.select标签

select 元素可创建单选或多选菜单。

<select> 元素中的 <option> 标签用于定义列表中的可用选项。
代码如下（示例）：

<p>
			请选择城市:
			<select  multiple="multiple">
			 <!-- multiple使列表显示（全部显示了），默认选项则会呈现灰色 -->
				<option value="北京">北京</option>
				<option value="重庆" selected="selected">重庆</option>
				<!-- selected 默认选择项 -->
				<option value="长沙">长沙</option>
				<option value="成都">成都</option>
				<!-- option各类选项-->	
			</select>
		</p>

结果：

上述代码运用了selected属性和multiple属性。
selected属性使其为默认选项。
multiple属性使所有选项以列全显示，其颜色默认为灰色。
去除multiple代码结果如下：

其中默认选项会直接显示

3.textarea标签（初步了解）

textareab标签详细内容可以参考网站：HTML textareab 标签

<textarea> 标签定义多行的文本输入控件。即显示的是多行文本框，对文本框可进行手动调整大小。

文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。
可以通过 cols 和 rows 属性来规定 textarea 的尺寸。
cols --------- 以字符个数设定的多行文本框的宽度
rows -------- 以字符个数设定的多行文本框的高度

代码（示例）：

<p>
	<textarea name="name" cols="50" rows="5"> 这个家伙很懒什么都没有留下！</textarea>
	<!-- textarea文本域可以手动调节大小   ||  cols 多行文本框宽度  ||  rows多行文本框高度  ||  50与5是可以添加像素px || name属性可要可不要-->
</p>

结果：

在这里插入图片描述

总结

以上内容为HTMLfrom表单中input标签。select标签和textarea标签的基础了解与运用讲解。其中最重要也最基础的inpu标签一定要记住！

Miracle_ze

关注

1
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
form表单的基础了解

form表单的基础了解一、表单作用二、from表单涉及到的基础表单元素1.input元素1.1html5之前的input元素的相关属性1.2补充html5对input中type属性的补充：2.select标签3.textarea标签（初步了解）总结一、表单作用表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分：表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。表
复制链接

扫一扫