活动介绍
file-type

HTML5新特性:URL类型<input>标签在表单处理中的应用

PPT文件

下载需积分: 50 | 1.41MB | 更新于2024-07-10 | 111 浏览量 | 1 下载量 举报 收藏
download 立即下载
"该资源是一份关于HTML5表单及文件处理的学习资料,特别是使用URL类型`<input>`标签的示例。课程介绍了HTML4表单的基础以及HTML5表单的新特性,包括如何定义表单、各种表单元素如文本框、文本区域、单选按钮、复选框、组合框和按钮的使用。此外,还涵盖了文件上传的相关方法。" 在HTML5中,`<input>`标签是一个非常重要的元素,用于创建不同类型的用户输入字段。当设置`type`属性为`url`时,`<input>`标签用于创建一个URL输入字段,用户可以在此输入网页地址。这个新特性增强了表单验证的能力,确保用户提供的数据格式正确,符合URL的标准。 3.1 HTML4表单是网页交互的基础,通过`<form>`标签定义。`<form>`标签有多个关键属性,如: - `id`:用于唯一标识表单,方便JavaScript或其他脚本语言引用。 - `name`:给表单命名,便于在服务器端处理。 - `action`:指定提交表单后数据处理的脚本文件。 - `method`:定义数据发送到服务器的方式,通常是`GET`或`POST`。`GET`方法将数据附在URL后面,适合小量数据且不敏感的情况;`POST`方法则将数据隐藏在HTTP请求正文中,适用于大量或敏感数据。 例如,下面的代码创建了一个名为`form1`的表单,使用`POST`方法将数据发送到`ShowInfo.php`: ```html <form id="form1" name="form1" method="post" action="ShowInfo.php"> <!-- 表单内容 --> </form> ``` 3.1.2 文本框(`<input type="text">`)是基本的输入控件,用于获取单行文本。例如: ```html <input name="txtUserName" type="text" value="" /> ``` 这将创建一个空的文本框,用户可以输入用户名。 HTML5新增了许多表单控件和属性,提高了用户体验和数据验证。例如,`<input type="url">`用于输入URL,浏览器会自动进行基本的格式检查。同时,HTML5提供了`pattern`属性,允许开发者自定义更复杂的输入模式匹配规则。 文件处理是HTML5的另一大改进,允许用户直接在表单中选择并上传文件。通过`<input type="file">`标签,可以创建一个文件选择器,用户选择文件后,可以使用Ajax或传统HTTP提交方式进行上传。 HTML5的表单和文件处理功能增强了用户界面的交互性,提供了更好的数据验证和更高效的数据提交方式。对于开发者来说,理解和掌握这些特性有助于构建更健壮、用户体验更佳的Web应用。

相关推荐

filetype

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css "> <style> body{ margin: 0;/*去掉自带外边距*/ background-image: url("imgs/bg.jpg"); /*cover设置封面效果*/ background-size: cover; text-align: center; } h1{ font-size: 72px; color: #0096dc; margin-bottom: 0; } img{width: 100px} h2{ font-size: 32px; color: #0096dc; margin-bottom: 0; } </style> </head> <body>

欢迎来到品珂优选

Selective Preference

<el-card style="width: 600px;height: 300px;margin: 0 auto; background-color: rgba(255,255,255,0.3)"> <el-form label-width="60px" style="width: 400px;margin:40px auto"> <el-form-item label="用户名"> <el-input type="text" name="username" placeholder="请输入用户名"></el-input> </el-form-item> <el-form-item label="密码"> <el-input type="password" name="password" placeholder="请输入密码"></el-input> </el-form-item> <el-form-item> <el-checkbox>记住用户名和密码</el-checkbox> </el-form-item> <el-form-item> <el-button style="position: relative;right: 30px" type="primary">登录</el-button> </el-form-item> </el-form> </el-card>
</body> <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js "></script> <script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js "></script> <script> let v = new Vue({ el: '#app', data: function() { return { user:{username:"",password:"",nick:"",id:"",rem:false} } }, methods:{ login(){ axios.post("/login",v.user).then(function (response) { if (response.data == 1) { location.href="/https/wenku.csdn.net/admin.html"; }else if (response.data == 2) { v.$message("用户名不存在"); } else if (response.data==3) { v.$message("密码错误"); } }) } }, created:function () { //取出Cookie里面的用户名和密码显示到页面中 //'password=123; username=Tom' let arr = document.cookie.split(";"); //遍历数组 for (let cookie of arr) { let cookieArr = cookie.split("="); let key = cookieArr[0].trim(); let value = cookieArr[1]; if (key == "username") { this.user.username = value; } if (key == "password") { this.user.password = value; } } }, }) </script> </html>为什么输入框输入不进去东西,是少了什么代码

filetype

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="../../layui/css/layui.css"> <link rel="stylesheet" href="../../css/diy.css"> <style> .layui-body { overflow-x: scroll; } </style> </head> <body>
<form class="layui-form" action="">
<label class="layui-form-label">权限名</label>
<input type="text" name="mod_name" required lay-verify="required" autocomplete="off" class="layui-input">
<label class="layui-form-label">用户组</label>
<select name="user_group" lay-filter="required" id="user_group"> <option value=""></option> </select>
<label class="layui-form-label">添加权限</label>
<select name="add" lay-filter="required"> <option value=""></option> <option value="0">无</option> <option value="1">有</option> </select>
<label class="layui-form-label">修改权限</label>
<select name="set" lay-filter="required"> <option value=""></option> <option value="0">无</option> <option value="1">有</option> </select>
<label class="layui-form-label">删除权限</label>
<select name="del" lay-filter="required"> <option value=""></option> <option value="0">无</option> <option value="1">有</option> </select>
<label class="layui-form-label">查询权限</label>
<select name="get" lay-filter="required"> <option value=""></option> <option value="0">无</option> <option value="1">有</option> </select>
</form>
<button type="button" class="layui-btn layui-btn-normal" id="inquire">查询</button> <button type="button" class="layui-btn layui-btn-normal" id="reset">重置</button>

数据列表

<script type="text/html" id="toolbarDemo">
<button class="layui-btn layui-btn-sm" lay-event="add">修改</button>
</script>
<script src="../../layui/layui.js"></script> <script src="../../js/axios.min.js"></script> <script src="../../js/index.js"></script> <script src="../../js/base.js" charset="utf-8"></script> <script> var BaseUrl = baseUrl() layui.use(['element', 'layer', 'util'], function () { var element = layui.element , table = layui.table , layer = layui.layer , util = layui.util , $ = layui.$; let personInfo = JSON.parse(sessionStorage.personInfo) let user_group = personInfo.user_group let token = sessionStorage.token || null //头部事件 util.event('lay-header-event', { //左侧菜单事件 menuLeft: function (othis) { layer.msg('展开左侧菜单的操作', {icon: 0}); } , menuRight: function () { layer.open({ type: 1 , content: '
处理右侧面板的操作
' , area: ['260px', '100%'] , offset: 'rt' //右上角 , anim: 5 , shadeClose: true }); } }); // table 事件 table.render({ elem: '#newsClassification' , toolbar: true , url: BaseUrl + '/api/auth/get_list' , headers: { 'x-auth-token': token, 'Content-Type': 'application/json' } ,limits: [10] , page: { //支持传入 laypage 组件的所有参数(某些参数除外,如:jump/elem) - 详见文档 layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局 //,curr: 5 //设定初始在第 5 页 , groups: 1 //只显示 1 个连续页码 , first: false //不显示首页 , last: false //不显示尾页 } , cols: [[ {type: 'checkbox'} , {field: 'user_group', width: '10%', title: '用户组'} , {field: 'mod_name', width: '10%', title: '权限名称', templet: function (d) { if (d.path.replace('/'+d.table_name+'/','')=='table') { return "
"+d.mod_name+"后台列表
" } if (d.path.replace('/'+d.table_name+'/','')=='view') { return "
"+d.mod_name+"后台详情
" } if (d.path.replace('/'+d.table_name+'/','')=='list') { return "
"+d.mod_name+"前台列表
" } if (d.path.replace('/'+d.table_name+'/','')=='details') { return "
"+d.mod_name+"前台详情
" } if (d.path.replace('/'+d.table_name+'/','')=='edit') { return "
"+d.mod_name+"前台编辑
" } } } , { field: 'add', width: '10%', title: '添加权限', templet: function (d) { if (d.add == '0') { return "
" } else { return "
" } } } , { field: 'del', width: '10%', title: '删除权限', templet: function (d) { if (d.del == '0') { return "
" } else { return "
" } } } , { field: 'set', width: '10%', title: '修改权限', templet: function (d) { if (d.set == '0') { return "
" } else { return "
" } } } , { field: 'get', width: '10%', title: '查询权限', templet: function (d) { if (d.get == '0') { return "
" } else { return "
" } } } , { field: 'create_time', width: '15%', title: '新增时间', sort: true, templet: "
{{layui.util.toDateString(d.create_time, 'yyyy-MM-dd HH:mm:ss')}}
" } , { field: 'update_time', width: '15%', title: '更新时间', sort: true, templet: "
{{layui.util.toDateString(d.update_time, 'yyyy-MM-dd HH:mm:ss')}}
" } , {field: 'operate', title: '操作', toolbar: "#toolbarDemo"} ]] , page: true, request: { limitName: 'size' }, response: { statusName: 'code', //规定返回/Back的状态码字段为code statusCode: 200 //规定成功的状态码味200 }, parseData: function (res) { return { "code": 200, "msg": "", "count": res.result.count, "data": res.result.list } }, where: {like: 0, size: 10} }); layui.table.on('tool(newsClassification)', function (obj) { //注:tool是工具条事件名,test是table原始容器的属性 lay-filter="对应的值" var data = obj.data; //获得当前行数据 var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值) var tr = obj.tr; //获得当前行 tr 的DOM对象 if (layEvent == "add") { let auth_id = data.auth_id // window.location = ('./view.html?' + auth_id) layopen_dateil('./view.html?' + auth_id) } }); // 请求参数: let request = {like: 0, size: 10, page: 1, mod_name: '', user_group: '',add:'',set:'',del:'',get:'',orderby: 'create_time desc'} // 重置/Reset参数 let resetName = {like: 0, size: 10, page: 1, orderby: 'create_time desc'} fun('newsClassification', BaseUrl + '/api/auth/del', 'auth_id', request, resetName) async function get_list_user_group() { $.ajax({ url: BaseUrl + "/api/user_group/get_list", type: "get", async: false, success: function (data) { if (data && typeof data === 'string'){ data = JSON.parse(data); } if (data.result) { // 拿到单选框的父级节点 let select = document.querySelector("#user_group") let op1 = document.createElement('option') select.appendChild(op1) // 收集数据 长度 let count // 收集数据 数组 let arr = [] count = data.result.count arr = data.result.list for (let i = 0; i < arr.length; i++) { // 创建节点 let op = document.createElement('option') // 给节点赋值 op.innerHTML = arr[i].name op.value = arr[i].name // 新增/Add节点 select.appendChild(op) layui.form.render('select') } } } }); } get_list_user_group(); }); </script> </body> </html> 分析以上代码,详细一点,不要自己往里面加内容

filetype

实验步骤 1按图6.1的拓扑结构连接实验设备。 2启动所有的实验用计算机或服务器并录到系统。 3按照表6.1的要求,参照实验一中的方法为所有实验用计算机设置IP地址。 4配置 Web服务器 按照实验三“Web服务器的安装与配置”中所述的方法,在Server上配置Web服务器。 5建立表单文件和服务端处理程序 在 Web 服务器的主目录中,新建文本文件,然后录入下面的文本: <!DOCTYPE html> <html> <title><head>regist</head></title> <body> <form name="myform" method="get" action="reg.asp"> userid <input type="text" name-"name"> <input type="submit" value="ok"> </form> </body> </html> 保存后将文件名改为 index.htm,并将 Web 服务器的默认文档设置为 index.htm。再新建另一个文本文件,录入下面的文本:<!DOCTYPE html> <html> <title><head>registed</head></title> <body> uid=request("name") response.write uid&"注册成功!" %> </body> <html> 保存后将文件名改为reg.asp。6在PCA和PCB上安装运行Wireshark 软件,准备捕获 HTTP 报文。7 在PC A和PCB上运行,在地址栏中输入Web 服务器的IP地址,对于第组为:http://192.168.1.11。 8 PCA和PCB停止捕获报文,以HTTPX(X为组别)为名保存捕获的报文,上传到实验室的 FTP 服务器。 9 分析 HTTP 协议工作的过程并观察其报文格式。 10修改表单文件 index.htm 中的“GET”为“POST”,重复上述访问和报文捕获过 程。 六 实验报告 1 讨论 HTTP 的工作原理。 2 分析 HTTP 报文的格式。 3写出实验的结论和体会。

涟雪沧
  • 粉丝: 29
上传资源 快速赚钱