代码实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>信息提交</title>
<style>
p{
font-size:15px;
}
#m{
color:blue;
}
#f{
color:red;
}
.button{
background-color:#e1d8d8;
color:red;
}
</style>
</head>

<body onload="alert('页面已成功加载')">
<div style="text-align:center">
<form action="#" onsubmit="alert('姓名：'+name.value+'\r\n电话：'+tel.value+'\r\n性别：'+sex.value)">
<p>姓名</p>
<input type="text" name="name">
<br><br>
<p>电话</p>
<input type="text" name="tel">
<br><br>
<input type="radio" name="sex" value="男">
<span id="m">男</span>
<input type="radio" name="sex" value="女">
<span id="f">女</span>
<br><br>
<input class="button" type="submit" name="提交">
<input class="button" type="reset" name="重置">
</form>
</div>
</body>
</html>

运行截图：

Css实例之信息提交的更多相关文章

  1. ajax+FormData+javascript实现无刷新表单信息提交

    ajax+FormData+javascript实现无刷新表单信息提交 原理: dom收集表单信息,利用FormData快速收集表单信息  ,实例化表单数据对象 同时收集fm的表单域信息. var f ...

  2. CSS：CSS 实例

    ylbtech-CSS:CSS 实例 1.返回顶部 1. CSS 实例 CSS背景 设置页面的背景颜色 设置不同元素的背景颜色 设置一个图像作为页面的背景 错误的背景图片 如何在水平方向重复背景图像 ...

  3. `＜jsp:getProperty＞`动作和`＜jsp:setProperty＞`动作的使用在一个静态页面填写图书的基本信息，页面信息提交给其他页面，并且在其页面显示。要去将表单元素的值赋值给Java

    <jsp:getProperty>动作和<jsp:setProperty>动作的使用 1.<jsp:getProperty>动作 语法格式: <jsp:get ...

  4. CSS实例

    CSS 实例 CSS背景 设置页面的背景颜色 设置不同元素的背景颜色 设置一个图像作为页面的背景 错误的的背景图片 如何在水平方向重复背景图像 如何定位背景图像 一个固定的背景图片(这个图片不会随页面 ...

  5. LESS CSS 实例

    值得参考的 10 个 LESS CSS 实例   2 收藏(185) LESS, Sass 和其他 CSS 预处理器是一种超棒的方法用来扩展 CSS 功能,使之更适合程序员.你可以使用变量.函数.混合 ...

  6. JS/CSS 各种操作信息提示效果

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. CSS实例 display display 边距

    CSS学习大纲 在标签上设置style属性: background-color:#2459a2 ; height:48px ; 编写CSS样式: 1.标签的style属性 2.写在head里面,sty ...

  8. CSS实例练习

    蓝色导航为图片,用background-image实现. 排版用到ul,li标签,下划线运用border-bottom中的dashed,右边文字用到CSS浮动float. 实例: 代码: <!D ...

  9. div+css实例教程

    DIV+CSS是WEB设计标准,它是一种网页的布局方法.与传统中通过表格(table)布局定位的方式不同,它可以实现网页页面内容与表现相分离. 对于初学者来说,可能比较模糊不熟悉.毕竟,样式布局需要通 ...

随机推荐

  1. Cadence 错误合集

    1.原理图DRC出现如下错误"Duplicate Pin Name "GND" found on Packag" 解决方案:原因是元件引脚重复定义,可以进行重新 ...

  2. 前端进阶（8） - 前端开发需要了解的工具集合：webpack, eslint, prettier, ...

    前端开发需要了解的工具集合:webpack, eslint, prettier, ... 前端开发需要了解的一些工具,这些工具能够帮助你在项目开发中事半功倍. 1. nrm: npm registry ...

  3. web移动开发中如何实现图标点击态的蒙层效果

    webapp开发中经常需要加入点击二态,即用户点击(tap)页面某个部分时该部分的样式进行相应的变化来相应用户的点击操作,这样能够带来更好的用户体验,今天我们要讨论的是如何给图标加上点击的二态效果. ...

  4. task0002（四）- 练习：数据处理、轮播及交互

    转载自我的个人博客 欢迎大家批评指正 包括5部分: 小练习1-处理用户输入 小练习2-日期对象的使用 小练习3:轮播图 小练习4:输入提示框 小练习5:界面拖拽交互 源码地址task0002 在线De ...

  5. cisco packet tracer安装步骤

    一.进入Cisco Networking Academy Builds IT Skills & Education For Future Careers (netacad.com) 二.注册, ...

  6. DB2表数据导出、导入及常用sql使用总结

      一．DB2数据的导出: export to [path(例:D:"TABLE1.ixf)]of ixf select [字段(例: * or col1,col2,col3)] from ...

  7. jboss7学习3-jboss安装 访问（外网）添加用户

    一.下载安装 1.下载地址: http://www.jboss.org/jbossas/downloads ,下载Certified Java EE 6 Full Profile版本. 2.解压 jb ...

  8. IO流入门+简单案例实现

    IO流 总结内容 1. IO流是什么 2. 字符流和字节流 3. File常用API(前面类型为返回类型) 4. 编码转换 5. IO流实现流程 6. 输入输出流简单实现 7. 输入输出流简单实现 总 ...

  9. ASP.NET Core高性能服务器HTTP.SYS

    如果我们只需要将ASP.NET CORE应用部署到Windows环境下,并且希望获得更好的性能,那么我们选择的服务器类型应该是HTTP.SYS.Windows环境下任何针对HTTP的网络监听器/服务器 ...

  10. hashlib加密模块、logging日志模块

    hashlib模块 加密:将明文数据通过一系列算法变成密文数据 目的: 就是为了数据的安全 基本使用 基本使用 import hashlib # 1.先确定算法类型(md5普遍使用) md5 = ha ...