今天介绍下form表单提交经常用到的表单元素。

1：datalist元素，一般与input组建配合使用，以定义可能输入的值，例如：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>
    <text>输入你最喜欢的汽车</text>

    <input list="cars" />

    <datalist id="cars">

        <option value="BMW">

        <option value="Ford">

        <option value="Volvo">

    </datalist>

</body>

</html>

可自行复制运行。

2：placeholder定义出现在输入框内的提示文本

密码：<input type="password" name="pwd2" id="pwd1" required placeholder="请输入密码" pattern="[a-zA-Z][a-zA-Z0-9]{10,20}" />

3:required的属性，检测输入框内是否有内容。

4：autocomplete保护用户敏感信息，如：输入密码的时候不进行显示。

5：下列代码对所介绍的属性进行了一次运用，如有不懂请留言

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>HTML5 Forms</title>

    <style>

    *{margin:;padding:;}

    h1{

        text-align: center;

        background:#ccc;

    }

    form{

        /* text-align:center; */

    }

    div{

        padding:10px;

        padding-left:50px;

    }

    .prompt_word{

        color:#aaa;

    }

    </style>

</head>

<body>

    <h1>用户注册表</h1>

    <form id="userForm" action="#" method="post" oninput="x.value=userAge.value">

        <div>

            用户名：<input type="text" name="username" required pattern="[0-9a-zA-z]{6,12}" placeholder="请输入用户名">

            <span class="prompt_word">用户名必须是6-12位英文字母或者数字组成</span>

        </div>

        <div>

            密码：<input type="password" name="pwd2" id="pwd1" required placeholder="请输入密码" pattern="[a-zA-Z][a-zA-Z0-9]{10,20}" />

            <span class="prompt_word">密码必须是英文字母开头和数字组成的10-20位字符组成</span>

        </div>

        <div>

            确认密码：<input type="password" name="pwd2" id="pwd2" required placeholder="请再次输入密码" pattern="[a-zA-Z][a-zA-Z0-9]{10,20}" />

            <span class="prompt_word">两次密码必须一致</span>

        </div>

        <div>

            姓名：<input type="text" placeholder="请输入您的姓名" />

        </div>

        <div>

            生日：<input type="date" id="userDate" name="userDate">

        </div>

        <div>

            主页：<input type="url" name="userUrl" id="userUrl">

        </div>

        <div>

            邮箱：<input type="email" name="userEmail" id="userEmail">

        </div>

        <div>

            年龄：<input type="range" id="userAge" name="userAge" min="" max="" step="" />

            <output for="userAge" name="x"></output>

        </div>

        <div>

            性别：<input type="radio" name="sex" value="man" checked>男<input type="radio" name="sex" value="woman">女

        </div>

        <div>

            头像：<input type="file" multiple>

        </div>

        <div>

            学历：<input type="text" list="userEducation">

                    <datalist id="userEducation">

                        <option value="初中">初中</option>

                        <option value="高中">高中</option>

                        <option value="本科">本科</option>

                        <option value="硕士">硕士</option>

                        <option value="博士">博士</option>

                        <option value="博士后">博士后</option>

                    </datalist>

        </div>

        <div>

            个人简介：<textarea name="userSign" id="userSign" cols="" rows=""></textarea>

        </div>

        <div>

            <input type="checkbox" name="agree" id="agree"><label for="agree">我同意注册协议</label>

        </div>

    </form>

    <div>

        <input type="submit" value="确认提交" form="userForm" />

    </div>

</body>

</html>

前端基础：form表单提交的更多相关文章

  1. Flask基础之返回值与form表单提交

    目录 1.Python 现阶段三大主流Web框架 Django Tornado Flask 对比 2.Flask的安装 3.Flask的第一个简单应用 4.Flask中的render_template ...

  2. ajax form表单提交 input file中的文件

    ajax form表单提交 input file中的文件 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为了 ...

  3. 2017-01-11小程序form表单提交

    小程序form表单提交 1.小程序相对于之前的WEB+PHP建站来说,个人理解为只是将web放到了微信端,用小程序固定的格式前前端进行布局.事件触发和数据的输送和读取,服务器端可以用任何后端语言写,但 ...

  4. Form表单提交，Ajax请求，$http请求的区别

    做过前端同学想必都避免不了要和后台server打交道.而以下这三种与后台交互的方式想必大家都不陌生. Form表单提交,Ajax请求,Angular的$http请求 以前一直搞不清楚什么时候应该用哪种 ...

  5. python中前后端通信方法Ajax和ORM映射（form表单提交）

    后端从数据库获取数据给到前端: 第一种方式: admin.py文件代码: @admin.route('/showList') def show(): # 获取数据库所有文章数据,得到一个个对象 res ...

  6. django 使用form组件提交数据之form表单提交

    django的form组件可以减少后台在进行一些重复性的验证工作,极大降低开发效率. 最近遇到一个问题: 当使用form表单提交数据后,如果数据格式不符合后台定义的规则,需要重新在前端页面填写数据. ...

  7. javascprit form表单提交前验证以及ajax返回json

    1.今天要做一个手机验证码验证的功能.需求是前端页面点击发送 短信验证码,后台接收后通过ajax返回到前端,之后前端在提交时候进行验证.思路很简单,不过做的过程还是学到不少的东西. 1.ajax请求后 ...

  8. thinkPHP5.0使用form表单提交数据和删除文章，不用TP的提示页面，使用弹出提示信息

    form表单提交数据和删除文章时,TP的默认信息提示页面的看起来不是很好看,想要实现弹窗提示怎么做呢? 前端:可以使用前端的一个知识--iframe,iframe元素会创建包含另外一个文档的内联框架: ...

  9. Django框架之第二篇--app注册、静态文件配置、form表单提交、pycharm连接数据库、django使用mysql数据库、表字段的增删改查、表数据的增删改查

    本节知识点大致为:静态文件配置.form表单提交数据后端如何获取.request方法.pycharm连接数据库,django使用mysql数据库.表字段的增删改查.表数据的增删改查 一.创建app,创 ...

随机推荐

  1. 使用spring：aop中修改增强方法中的参数

    大家都知道,在增强方法中,使用jp.getArgs()[index]可以获取传进来的参数,但是参数传进来之后,怎么改变它的值呢? 因为jp.getArgs()[index]获取到的只是数据的备份,所以 ...

  2. Asp .Net Core Spa (二) - 服务器渲染1

    Server Side Rendering 服务器渲染是各 Spa 项目目前很热衷于解决的一个问题,毕竟针对SEO和首次加载优化 .Net Core SPA 服务器渲染 将分为 两篇: 第一篇 主要分 ...

  3. Java——重写

    重写面向对象编程的三大特征之一 1.子类重写了父类的方法,则使用子类创建的对象调用该方法时,调用的是重写后的方法,即子类中的方法 2.子类重写父类方法需满足以下条件: (1)方法名和参数列表: 子类重 ...

  4. Pycharm 远程调试

    上传后发现成图片了,很模糊.可以看我在百度盘分享pdf文件. https://pan.baidu.com/s/1bYVcAq40SRFtn8qXCPH6TQ

  5. 数列全排列问题----递归实现--JAVA

    public class PaiLie { /** * @param args */ public static void main(String[] args) { PaiLie p=new Pai ...

  6. Windows MySQL测试数据库employees的导入

    一: 首先下载employees测试数据库 https://launchpad.net/test-db/ 二:用文本编辑器打开其中的employees.sql文件,将第38行的set storage_ ...

  7. html 使表格随着内容自动适应宽度

    所谓难而不会,会儿不难.这个问题让我纠结了很长时间,一句css解决了,仅仅靠一个属性 td { white-space: nowrap; } from:http://blog.csdn.net/liu ...

  8. 运维seq语法

    seq-print a sequence of numbers 用于产生从某个数到另外一个数之间的所有整数 语法:seq 开始列  指定步长  结束列 参数: -f :指定输出格式,允许使用print ...

  9. 设置Linux系统的LANG变量

    设置linux系统的LANG变量 对于国内的Linux用户,经常烦恼的一个问题是:系统常常在需要显示中文的时候却显示成了乱码,而由于某些原因,需要英文界面的系统的时候,却苦于系统不能正常输入和显示中文 ...

  10. ionic 3.0中使用原生插件ionic-native

    作为一个ionic的新手,今天使用了ionic的原生粘贴板插件  @ionic-native/clipboard,根据ionic官方文档上执行的命令 $ ionic cordova plugin ad ...