表单经常会用到，也是很重要的一个知识点，下边我将梳理html中form表单的应用

form是一个块标签，写在最开始，对其属性input进行包裹，有两个属性值，分别是action以及method

action：指向的是表单提交的地址，提交后会跳到指定地址

地址url的构成：协议：//域名（或IP:端口号）路径？参数信息

method：指数据的提交方式，有post和get

post方式：信息以打包方式发送，信息传递很安全。是推荐的方式。

get方式：信息以明文方式发送，并且会暴露在地址栏中。是默认的方式

表单元素

其中，type是表单元素的类型，name是作用域、关键词，value是表单元素的值

对type值的认识

<input type="text" placeholder="请输入用户名">

最简单的进行文本输入，想要文本框上有提示文本时，使用placeholder
<input type="password" placeholder="请输入密码">

对密码进行加密，有专属的type值，密码以暗文的形式显示

<input type="radio" name="gender" checked> <span>男</span>

radio 是单选框的属性值，需要name配合使用，即划定了作用之后，才可实现单选功能

checked是默认选择

<input type="checkbox" name="hobby"><span>阅读</span>

<input type="checkbox" name="hobby"><span>旅行</span>

checkbox 是复选框，需要使用name划定作用域
<input type="submit" value="百度一下">

submit是提交按钮，信息将提交到指定的地址中，并且原始按钮上的文字是提交

可以使用value进行修改

<input type="reset" value="刷新">

reset是对表单信息进行重置，同样可以改变原来默认的文字

<input type="submit" value="百度一下">

submit是提交按钮，信息将提交到指定的地址中，并且原始按钮上的文字是提交

可以使用value进行修改

<input type="hidden" name="">

上述代码的实现：

    <!-- action 数据提交的地址 --><!-- 表单提交的特点： 提交后会跳转到指定地址 --><form action="#"><!-- //form 进行信息提交 --><!-- form 块标签 --><!-- 资源类的标签基本上都是行块标签 --><!-- placeholder 显示在文本上边，输入时消失 --><input type="text" placeholder="请输入用户名"><br><!-- password 输入的文字内容会进行加密 --><input type="password" placeholder="请输入密码"><!-- name划定作用域，也是关键词 --><!-- checked 是默认选择 --><p>请选择你的性别</p><p><span>男</span><input type="radio" name="gender" checked></p><p><span>女</span><input type="radio" name="gender"></p><!-- 复选框 --><p>您的爱好</p><p><input type="checkbox" name="hobby"><span>阅读</span></p><p><input type="checkbox" name="hobby"><span>旅行</span></p><p><input type="checkbox" name="hobby"><span>烹饪</span></p><p><input type="checkbox" name="hobby" checked><span>movie</span></p><!-- 按钮 --><input type="submit" value="百度一下"><input type="reset" value="刷新"><input type="hidden" name=""></form>

html中的form表单相关推荐

HTML中的form表单有一个关键属性 enctype
HTML中的form表单有一个关键属性 enctype＝application/x-www-form-urlencoded 或multipart/form-data. 1.enctype=" ...
antd-vue中的form表单label标签for导致点击文字触发输入框解决方案
antd-vue中的form表单label标签for导致点击文字触发输入框解决方案参考文章: (1)antd-vue中的form表单label标签for导致点击文字触发输入框解决方案 (2)http ...
button layui 点击事件_解决layui中的form表单与button的点击事件冲突问题
解决layui中的form表单与button的点击事件冲突问题 layui的form表单位置和button标签的位置重合,会使得button的click事件得不到响应,如图: 蓝色底为form的位置, ...
在微信小程序中提交form表单
怎么在微信小程序中提交form表单发布时间:2021-04-07 16:26:31 来源:亿速云阅读:1229 作者:Leah 栏目:web开发活动:亿速云新用户活动,各类服务器大降价,满足绝大 ...
HTML中的form表单及其提交原理
HTML中的form表单 form属性表单内容数据类型表单控件 input表单控件 type属性其他属性 button表单控件 label表单控件表单组件 select option 表单提交 ...
Vue中使用form表单提交刷新问题
vue中使用表单form默认提交行为是刷新一下,在这儿我们使用事件修饰符prevent来阻止form表单的默认行为在@click后面跟上prevent 这样就可以阻止form表单默认刷新行为了 &l ...
antd中的form表单 initialValue导致数据不更新问题
初步理解 : initialValue就是所谓的defaultValue,只会在第一次赋值的时候改变,却又有一些不同,因为 initialValue又会因其他改动而改变. 然而当获取的数据重新上来要渲 ...
第83天：jQuery中操作form表单
操作form表单 1. 属性操作设置属性: // 第一个参数表示:要设置的属性名称 // 第二个参数表示:该属性名称对应的值 $(selector).attr("title", ...
oracle 中增加行,Oracle中实现FORM表单插入、锁定、更新行、删除行的包
此包写在oracle数据库中,供Form表单调用: CREATE OR REPLACE PACKAGE BODY cux_main_pkg AS /*========================= ...
android中怎么保存checkbox中的checked属性_第二十四天HTML中的form表单
form表单用于收集用户信息,如:登录.注册等场景:所有要提交的数据都必须放在form标签中 action:提交地址.动作,与input标签中typy标签的submit属性相关联. ,提交地址是ac ...

html中的form表单

表单元素

html中的form表单相关推荐

最新文章

热门文章