移动端，pc端的常规表单实现运行html文件即可查看效果，不懂的可以私密资源-CSDN文库

共13个文件

js：7个

css：3个

png：2个

需积分: 5 142 浏览量 2023-10-31 10:02:37 上传评论收藏 139KB RAR 举报

在IT行业中，构建适用于移动端和PC端的常规表单是一项基础但至关重要的任务。HTML（HyperText Markup Language）是创建网页内容的基础语言，它在表单实现中扮演着核心角色。本篇将深入探讨如何使用HTML来创建跨平台的表单，并通过运行HTML文件在不同设备上查看其效果。我们需要理解HTML表单的基本结构。一个基本的HTML表单通常由`<form>`标签定义，它可以包含各种表单元素，如输入字段`<input>`、文本区域`<textarea>`、选择框`<select>`、复选框`<input type="checkbox">`、单选按钮`<input type="radio">`以及提交按钮`<input type="submit">`等。例如，创建一个简单的姓名和邮箱输入表单： ```html <form action="submit.php" method="post"> <label for="name">姓名：</label> <input type="text" id="name" name="username" required><br> <label for="email">邮箱：</label> <input type="email" id="email" name="useremail" required><br> <input type="submit" value="提交"> </form> ``` 上述代码定义了一个表单，其中包含了两个输入字段，分别用于输入姓名和邮箱，且这两个字段都设置为必填。表单数据将通过POST方法提交到`submit.php`处理。对于移动端和PC端的适配，HTML5引入了响应式设计，通过CSS（Cascading Style Sheets）媒体查询可以实现不同设备上的布局调整。例如，我们可以用以下CSS代码让表单在小屏幕设备上显示为一列布局： ```css @media (max-width: 600px) { label, input { display: block; width: 100%; } } ``` 此外，为了让表单具有更好的用户体验，可以添加验证功能。HTML5提供了内置的表单验证，比如`required`属性（确保字段非空）、`pattern`属性（用于正则表达式验证）等。例如，邮箱字段的验证可以这样设置： ```html <input type="email" id="email" name="useremail" required pattern="^[\w.-]+@[\w-]+(\.[\w-]+)+$"> ``` 为了在本地运行HTML文件并查看效果，你需要一个Web服务器。虽然大多数现代浏览器允许直接打开HTML文件，但某些功能（如表单提交）可能受限。推荐使用简单本地服务器，如Apache或Node.js的http-server。将HTML、CSS和JavaScript文件放在同一目录下，通过命令行启动服务器，然后在浏览器中访问指定URL即可查看和测试表单。创建跨平台的HTML表单涉及HTML表单元素的使用、响应式设计、表单验证以及本地Web服务器的配置。通过学习这些基础知识，开发者能够创建出适应不同设备的交互式表单，提供无缝的用户体验。如果在实践过程中遇到问题，可以参考相关文档或者向有经验的开发者求助。

资源推荐

资源详情

资源评论

收起资源包目录

formDynamic-1.rar （13个子文件）

formDynamic-1

bootstrap.min.js 28KB

rem.js 302B

citys.js 54KB

common.js 6KB

zepto.js 78KB

bootstrapValidator.js 250KB

jquery-1.10.2.min.js 91KB

img

sandian.png 3KB

back.png 4KB

css

common.css 8KB

bootstrap.css 118KB

bootstrapValidator.css 472B

index.html 4KB

<!DOCTYPE html> <html lang="zh"> <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>申请单</title> <link rel="stylesheet" href="./css/common.css"> </head> <body>  <header>  <div class="back"> <img src="./img/back.png" alt=""> <span>返回</span> </div> <div class="header_title"> <h3>流程申请</h3> </div> <div class="header_threeDian"> <img src="./img/sandian.png" alt=""> </div> </header> <div class="formContent"> <form action="">  <div class="input_text formContentSon"> <span><i>*</i>申请人姓名</span> <input type="text" placeholder="请输入申请人姓名" value=""> </div>  <div class="input_text formContentSon"> <span><i>*</i>申请时间</span> <input type="datetime-local" value="2015-09-24T13:59:59" id="applyTime"/> </div>  <div class="input_text formContentSon inputTextarea"> <span><i>*</i>申请内容</span> <textarea maxlength="250" name="申请内容" cols="15" rows="30" placeholder="请填写申请内容(请输入5-250个字)" required warp="hard"></textarea> </div>  <div class="input_text formContentSon bottomPop"> <span><i>*</i>申请部门</span> <b>></b> <input type="text" placeholder="请选择" value=""> </div>  <div class="input_text formContentSon inputRadio"> <span><i>*</i>性别</span> <div class="radioGroup"> <div class="item"> <input type="radio" checked="checked" name="sex" value="1"><b>男</b> </div> <div class="item"> <input type="radio" name="sex" value="0"><b>女</b> </div> </div> </div>  <div class="input_text formContentSon inputRadio inputCheckbox"> <span><i>*</i>兴趣爱好</span> <div class="checkboxGroup"> <div class="item"> <input type="checkbox" name="hobby" value="足球"><b>足球</b> </div> <div class="item"> <input type="checkbox" name="hobby" value="篮球"><b>篮球</b> </div> <div class="item"> <input type="checkbox" name="hobby" value="排球"><b>排球</b> </div> </div> </div>  <div class="hsi_content"> <p><i style="color:#D42D00">*</i>当前所在地区</p> <div class="chooseArea"> <div class="selectProvince select"> <select name="province" id="province" class="chosen-select dis_input"> <option value="" selected:disabled style="diaplay:none">请选择</option> </select><br> </div> <div class="selectCity select"> <select name="city" id="city" class="chosen-select dis_input"> <option value="" selected:disabled style="diaplay:none">请选择</option> </select><br> </div> <div class="selectArea select"> <select name="area" id="area" class="chosen-select dis_input"> <option value="" selected:disabled style="diaplay:none">请选择</option> </select> </div> </div> </div> <input type="submit" value="提交" class="submit"> </form> </div> <div class="bottomPopDiv"> <div class="bottomPopDivBtn"> <a href="javascript:void(0)" class="cancel">取消</a> <a href="javascript:void(0)" class="makesure">确定</a> </div> <div class="bottomPopDivCon"> <div class="title"> <ul class="module clear"> <li class="active">市场拓展部</li> <li>技术商务部</li> <li>计划财务部</li> <li>战略规划部</li> <li>综合办公室</li> </ul> </div> </div> </div> </body> <script type="text/javascript" src="./js/citys.js"></script> <script src="js/jquery-1.10.2.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/rem.js" type="text/javascript" charset="utf-8"></script> <script src="js/common.js" type="text/javascript" charset="utf-8"></script> </html>

评论收藏

内容反馈