HTML——表单知识点总结

大脸胖柴

已于 2023-02-23 17:31:32 修改

阅读量1.9k

点赞数 5

分类专栏： web前端基础大前端 HTML 文章标签： html 前端

于 2022-02-25 21:59:54 首次发布

本文链接：https://blog.csdn.net/TKY666/article/details/123141831

版权

web前端基础同时被 3 个专栏收录

22 篇文章 1 订阅

订阅专栏

大前端

16 篇文章 0 订阅

订阅专栏

HTML

7 篇文章 0 订阅

订阅专栏

一、表单简介

一个表单有三个基本组成部分：

表单标签：这里面包含了处理表单数据所用程序的URL以及数据提交到服务器的方法。
表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
表单按钮：包括提交按钮、复位按钮和一般按钮

二、表单思维导图

三、表单语法

<body>
		<p><img src="../img/baidu.png" > &emsp;用户名密码登录</p>
		<br>
		<form action="" method="">
			
			<p><input type="text" style="width:300px;height:40px;"  name="bd" placeholder="手机/邮箱/用户名"/></p>
			<p><input type="password" style="width:300px;height:40px;"  name="mm" placeholder="密码"/></p>
			<p><input type="submit" style="width:300px;height:40px;background-color: cornflowerblue ; name="dl" value="登录"/></p>
		</form>
		<a href="#">忘记密码？</a>
		<br><br><br>
		<a href="#"><b>扫码登录</b></a>
		&emsp;<img src="../img/weibu.png">
		&emsp;&emsp;<a href="#"><b>立即注册</b></a>
	</body>

效果：

四、元素详解

<form>标签是用来表示采集数据的范围
<form action="" method=""></form>
属性：

action 采集的数据提交的路径
method 采集的数据提交的方式（get/post 不标注默认为get）

(1) get 保密信息不推荐使用，提交可以在上方地址栏看到相关信息。

(2) post 在实际网页开发中通常采用post方式提交表单数据。

五、表单元素

input输入表单元素
select下拉表单元素
textarea文本域元素

1. input属性元素

语法：

<input type="text" name="username" placeholder="请输入您的用户名" value=" " maxlength=" " >
属性说明
type 指定元素的类型
name 指定表单元素的名字(输上后会有文本自动补全功能，有历史记录提示。)
value 输入的元素初始值（input内部的初始值，可以选择不写）注：type类型为按钮时 value必须写上去例：value=“登录”
placeholder 占位符输入框的提醒文本
maxlength type为text 或 password 时，输入的最大字符数
checked
规定此input元素首次加载时应当被选中。常在radio和Checkbox中使用

如：
性别：
<input  tapy="radio" name="sex" value="男" checked="checked"/>男
<input  tapy="radio" name="sex" value="女" />女
效果：默认下选择性别男
multiple
使用multiple属性，则不限制单次上传文件个数

（也可在select中使用）

type类型

• type="text" 文本框，输出框，例如用户名、验证码的框
用户名：<input type="text" name="username"  placeholder="请输入您的用户名">
• type="password" 密码框
密码：<input type="password" name="pass" placeholder="请输入您的密码">
• type="submit" 提交按钮
<input type="submit" name="Button" value="提交"/>
• type="reset" 重置按钮
<input type="reset" name="Reset" value="重置"/> 
• type="button" 普通按钮，可以自己设定按钮功能
<input type="button" name="Reset" value="按钮"/> 
• type="image" 图片提交按钮和提交类似
<input type="image" src="图片路径" alt="加载失败，请重新尝试" />
• type="radio"单选按钮,同一组的单选按钮必须要有相同的name。
<input type="radio" name=""/>
• checkbox：复选框。

默认选项被选中可使用checked

如：
爱好：
<input type="checkbox" name="running" checked>跑步
<input type="checkbox" name="reading" checked>阅读
<input type="checkbox" name="shopping" checked>购物
效果：

• hidden：隐藏域，隐藏字段对于用户是不可见的。
<input type="hidden" name="" value=" " />
• file：文件域，用于文件上传。默认一次上传一个文件要加multiple=“multiple”才可多选
<input type="file" name="  "  value="  "/>

多选（多个同时上传）：<input type="file"  multiple="multiple">

textarea：文本域与文本框的区别在于可以添加多行文字，从而可以输人更多的文本。这类控件在一些留言板中最为常见。
<textarea name="文本域名称”value="文本域默认值"  rows="行”cols="列"> </textarea>
readonly：只读文本属性规定输入字段或文本区域为只读。

在只读的输入字段或文本区域中，无法对内容进行修改。
移动电话：
			<input type="text" name="yddh" value="13603430***" readonly="readonly" />
			<span style="color: red;">手机号不可修改</span>
效果：

required：必填选项，必须填写不能为空

举例：
真实姓名：<input type="text" name="neme" value="列如：王明" required="required" />（必须填写）
效果：

除去input选中状态的篮框框

使用outline: none;即可取消文本框被选中时的篮框框
<input type="text" name="" value="" style="outline: none;" />
disabled：按钮不可点击
<input type="button" value="按钮" disabled />

<label>标签（常与input结合使用）

案例一

案例二

<h1>请选择你喜欢的明星</h1>
		<label>
			<input type="checkbox" name="wy" id="" />王源
		</label>
		<input type="checkbox" name="cxk" id="hg" />
		<label for="hg">胡歌</label>
		<input type="checkbox" name="pyy" id="" checked="checked" />彭于晏
		<!-- type="checkbox"复选框 -->
		<!-- 复选框被默认选中  添加  checked="checked"或checked -->

效果：

下拉菜单

<select>标签定义下拉菜单

示例：

        <form>
            <select>
                <option value=" ">选项1</option>
                <option value=" ">选项2</option>
                <option value=" ">选项3</option>
                <option  value=" " selected="selected">选项4</option>

                ......
            </select>
        </form>

multiple也可在select（下拉选框）中使用：作用是可以多选

<body>
		<!-- 
        1.<select>中至少包含一对<option>。
		2.在<option>中定义selected="selected"时，当前项即为默认选中项。
        3.value=" "(初始值不能被省略）
         -->
        籍贯：
		<form>
			<select>
				<option value="shandong">山东</option>
				<option value="beijing">北京</option>
				<option value="tianjin">天津</option>
				<option  value="henan" selected="selected">河南</option>
			</select>
		</form>
	</body>

效果：

常用表单事件

onchange()更新事件、oninput输入事件、onfocus获焦事件、onblur失焦事件、onselect选择事件、onreset重置事件、onsubmit提交事件等。

详情：

表单事件（JavaScript）_~历桑的博客-CSDN博客常见的表单事件类型：1.input输入事件关注输入过程var textInput = document.getElementById("myInput")var radios = document.getElementsByName("sex")textInput.oninput = function(){ console.log("input", this.value) }2.change更新事件关注输入结果textInput.onchahttps://blog.csdn.net/weixin_50053454/article/details/123135990

大脸胖柴

关注

5
点赞
踩
25

收藏

觉得还不错? 一键收藏
0
评论
HTML——表单知识点总结

表单标签：这里面包含了处理表单数据所用程序的URL以及数据提交到服务器的方法。表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。表单按钮：包括提交按钮、复位按钮和一般按钮。
复制链接

扫一扫

专栏目录

属性	说明
type	指定元素的类型
name	指定表单元素的名字(输上后会有文本自动补全功能，有历史记录提示。)
value	输入的元素初始值（input内部的初始值，可以选择不写）注：type类型为按钮时 value必须写上去例：value=“登录”
placeholder	占位符输入框的提醒文本
maxlength	type为text 或 password 时，输入的最大字符数
checked	规定此input元素首次加载时应当被选中。常在radio和Checkbox中使用如： `性别： <input tapy="radio" name="sex" value="男" checked="checked"/>男 <input tapy="radio" name="sex" value="女" />女` 效果：默认下选择性别男
multiple	使用multiple属性，则不限制单次上传文件个数（也可在select中使用）

HTML——表单知识点总结

一、表单简介

二、表单思维导图

三、表单语法

四、元素详解

五、表单元素

除去input选中状态的篮框框

<label>标签（常与input结合使用）

常用表单事件

“相关推荐”对你有帮助么？