html表单

利用js编写一个简单的html表单验证，验证通过时提交数据(附源码)

由 旧街凉风 提交于 2019-12-30 00:29:55
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script type="text/javascript"> function checknm() { var check = false; var username = document.getElementsByName("username")[0]; if (1<=username.value.length && username.value.length<=10){ console.log(document.getElementById("checktext1").innerHTML = " √") check = true; }else{ document.getElementById("checktext1").innerHTML = " × 最多10位且不为空"; check = false; } return check; } function

Vue.js 章6 v-model与表单

由 自古美人都是妖i 提交于 2019-12-30 00:29:35
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="Vue.2.6.10.js"></script> </head> <body> <!-- v-model在文本域的用法 --> <div id="app1"> <textarea name="" v-model="text" id="textarea" cols="30" rows="10"></textarea><!--拼音不会更新--> <textarea name="" @input = 'handleInput' id="textarea" cols="30" rows="10"></textarea><!--实时更新--> <!-- 使用v-model以后，其显示的值只依赖绑定的数据，初始化的value属性和textarea标签之间的值都不会起作用 --> <p>输入内容：</p> <p style="white-space:

HTML各种表单元素模板及写法

由 做~自己de王妃 提交于 2019-12-26 14:43:55
input中有很多属性type="text"表示文本框； name是连接前端后端的桥梁 value属性，包含的默认字符串 size宽度 maxlength接受的最多字符数 placeholder占位符 required必填属性 比如写账号和密码框时可以这么写： 账号: <input type="text" name="username" value="" size="30" maxlength="6" placeholder="手机\邮箱\用户名" required="required" /><br> password为***一般用于密码 密码: <input type="password" src="" size="30" maxlength="6" /><br> 提交按钮 <input type="submit" value="登录" /> <input type="reset" value="重置" /> 单选框 label的两种用法，点击文字可以勾选 checked为默认选择项 性别：<label><input type="radio" name="gender" checked="checked">男</label> <input type="radio" name="gender" id="woman"><label for="woman">女</label> 复选框

FormData 对象的使用

由 混江龙づ霸主 提交于 2019-12-26 00:39:06
Content 从零开始创建FormData对象 通过HTML表单创建FormData对象 使用FormData对象上传文件 不使用FormData对象,通过AJAX提交表单和上传文件 FormData对象用以将数据编译成键值对 ，以便用 XMLHttpRequest 来发送数据。 其主要用于发送表单数据 ，但亦可用于发送带键数据( keyed data )，而 独立于表单使用 。如果表单 enctype 属性设为 multipart/form-data ，则会使用表单的 submit() 方法来发送数据，从而，发送数据具有同样形式。 从零开始创建FormData对象 你可以自己创建一个 FormData 对象，然后调用它的 append() 方法来添加字段，像这样： var formData = new FormData ( ) ; formData . append ( "username" , "Groucho" ) ; formData . append ( "accountnum" , 123456 ) ; //数字123456会被立即转换成字符串 "123456" // HTML 文件类型input，由用户选择 formData . append ( "userfile" , fileInputElement . files [ 0 ] ) ; //

前端html表单与css样式

由 五迷三道 提交于 2019-12-26 00:16:44
/*--> */ /*--> */ 1，from标签 　　 from标签的功能是向服务器传输数据，实现用户交互的重要标签。 from标签的具体使用： 　　input标签使用示例： 　 <from action="" method="post"> <p>姓名:<input type="text" name="names"> </p> <p>用户名:<input type="text" name="username"> </p> <p>密码:<input type="password" name="pwd"> </p> <p>爱好:骑车<input type="checkbox" name="hobby1" checked="checked"> 游戏<input type="checkbox" name="hobby2"> 电影<input type="checkbox" name="hobby3"> </p> <p>男<input type="radio" name="sex">女<input type="radio" name="sex"></p> 第一句：action标签的意思就是表单提交到服务器的链接地址，method标签，表明表单的提交方式为post响应格式 第二句：指定一个姓名表格input标签，type表明该栏使用的格式为指定的“text”文本格式

使用Session防止表单重复提交

由 有些话、适合烂在心里 提交于 2019-12-25 12:02:58
　在平时开发中，如果网速比较慢的情况下，用户提交表单后，发现服务器半天都没有响应，那么用户可能会以为是自己没有提交表单，就会再点击提交按钮重复提交表单，我们在开发中必须防止表单重复提交。 一、表单重复提交的常见应用场景 有如下的form.jsp页面 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML> <html> <head> <title>Form表单</title> </head> <body> <form action="${pageContext.request.contextPath}/servlet/DoFormServlet" method="post"> 用户名：<input type="text" name="username"> <input type="submit" value="提交" id="submit"> </form> </body> </html> 　form表单提交到DoFormServlet进行处理 package xdp.gacl.session; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet

html 表单 & 表单控件.txt

由 烈酒焚心 提交于 2019-12-25 04:32:51
2、表单 1、表单的作用 用于接收用户数据并提交给服务器。 表单两个要素 1、form 元素 - 收集用户信息 2、表单控件 能够与用户进行数据交互的可视化组件。 2、form元素 1、作用 收集用户的信息并提交给服务器 在网页中是不可见的，但是功能不能忽略 2、语法 1、标记 <form></form> 2、属性 1、action 指定提交给服务器的处理程序的地址。 默认提交给本页。 2、method 提交方法/方式 默认值为 get 取值： 1、get 表示向服务器要数据时使用。 特点： 1、会将提交的数据显示在地址栏上 2、安全性较低 3、有提交数据的大小限制 - 2KB 2、post 要提交数据给服务器处理时使用。 特点： 1、隐式提交，看不到提交的数据。 2、安全性较高。 3、无提交数据的大小限制。 3、enctype 指定表单数据进行编码的方式，即允许将什么样的数据提交给服务器 1、application/x-www-form-urlencoded 默认值，允许将所有的文本数据提交给服务器 2、multipart/form-data 允许将文件提交给服务器 3、text/plain 只允许将普通文本字符提交给服务器，特殊字符则不可以。 3、表单控件 1、作用 & 注意 作用：用于和用户进行数据交互的可视化组件 注意：只有放在表单中的表单控件，才允许被提交 2

form表单中method的get和post区别

由 我的未来我决定 提交于 2019-12-25 03:26:58
一、问题的提出 <form action ="getPostServlet/getPost.do?param4=param4" method="get" > <input type="hidden" name="param1" value="param1"> <input type="hidden" name="param2" value="param2"> <input type="text" name="param3" value="param3" readonly> <input type="submit" name=" button 1" value="submit"> </form> 注意到表单中action：getPostServlet/getPost.do?param4=param4 这个action带有一个参数param4， 如果用get方法提交，后台无法接收到这个参数； 如果用post方法提交，后台就可以接收到这个参数。 问题原因的简单解释： 用get方法提交的url显示如下: http:// localhost /mywebapp/getPostServlet/getPost.do?pram1=param1&pram2=param2&pram3=param3&button1=submit也就是说 method为get时action自己后边带的参数列表会被忽视 ,

Layui 表单 多选模拟单选，checkbox实现radio效果

由 Deadly 提交于 2019-12-24 06:08:24
< ! DOCTYPE html > < html lang = "zh" > < head > < meta charset = "UTF-8" > < title > Layui 表单 多选模拟单选，checkbox实现radio效果 < / title > < link rel = "stylesheet" href = "../assets/libs/layui/css/layui.css" media = "all" > < / head > < body > < div class = "layui-form" > < br > < div class = "layui-form-item" > < label class = "layui-form-label" > 选一个你的兴趣爱好 < / label > < div class = "layui-input-block" isradio = "true" > < input type = "checkbox" lay - skin = "primary" lay - filter = "cb_r" title = "唱" > < input type = "checkbox" lay - skin = "primary" lay - filter = "cb_r" title = "跳" > < input

LayUi之表单监听事件

由 笑着哭i 提交于 2019-12-24 05:50:58
HTML < ! doctype html > < html > < head > < meta charset = "utf-8" > < title > layui . form小例子 < / title > < script src = "~/Content/layui/layui.js" > < / script > < link href = "~/Content/layui/css/layui.css" rel = "stylesheet" / > < / head > < body > < form class = "layui-form" action = "/Home/AddUserInfo" method = "get" lay - filter = "formfilter" > < ! -- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -- > < div class = "layui-form-item" > < label class = "layui-form-label" > 用户名 < / label > < div class = "layui-input-block" > < input type = "text" name = "Name" placeholder = "请输入" autocomplete = "off"
订阅 html表单