制作一个简单的文本框输入的网页

题目:制作一个简单的网页(包含一个文本框、一个按钮),在页面上输出用户在文本框输入的内容,要求用JavaScript获取文本框内容。

一、首先利用html在网页上制作表单,代码如下:

  

**onclick事件:onclick 事件会在对象被点击时发生.

二、利用js获取输入信息,并将其输出:

  相关知识:

    1、给用户确认消息,真正实现交互,使用语句confirm();给用户提示信息,实现单向通信,使用语句alert().

三、运行结果:

  1、用浏览器打开结果如下:

  2、输入文本框内容,点击【提交】:

  3、点击【确定】,则打印文本框内容:

时间: 2024-10-12 20:25:17

制作一个简单的文本框输入的网页的相关文章

简单的文本框输入自动提示

简单的文本框输入自动提示--输入的时候可以直接异步加载数据库中匹配的项,然后显示出来. 这里没有使用到数据库,直接在PHP用数组模拟数据存储.  demo演示 原理主要是: 监听输入框的状态,当有改变的时候即刻通过ajax发送数据并取得返回值. 主要使用了jQuery封装很方便,但貌似我这个兼容性不咋地...主要提供个思路吧~ js部分: <script type="text/javascript" src="./js/jquery.min.js">&l

如何使用AEditor制作一个简单的H5交互页demo

转载自:http://www.alloyteam.com/2015/06/h5-jiao-hu-ye-bian-ji-qi-aeditor-jie-shao/ 本教程演示如何使用AEditor制作一个简单的H5交互页demo: 交互页demo地址: 点击打开H5交互页demo AEditor访问地址: http://aeditor.alloyteam.com Step1:设置页面背景颜色 首先我们设置页面的背景颜色,右击舞台点击“设置背景”: 然后在背景颜色中填上色值rgb(38, 61, 10

制作一个简单的用户界面

制作一个简单的用户界面 这节课里面,我们来开发一个XML布局文件,这个布局文件里面会包含一个text field,文本输入框,和一个按钮button.下一节课里面,会教大家怎么在按下一个按钮的时候,跳转到另一个Activity. 这里先简单解释一下Android界面的构成.AndroidApp的界面是使用View和ViewGroup构建起来的.View通常就是我们常见的UI小部件,比如按钮Button.文本控件TextView等:而ViewGroup是一个View的容器,它可以限制这个容器里面的

文本框输入数字倒计实例代码

文本框输入数字倒计实例代码:一般情况下,文本框中文字的个数并不是无限的,也就是说具有一定的限制,在人性化程度较好的网站一般有输入文字倒计效果,这样可以便于浏览者组织语言,下面就简单介绍一下如何实现此效果.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>文本框输入文字倒计实例代码-蚂蚁部落</title> <style t

监听文本框输入开发仿新浪微博限制输入字数的textarea插件

监听文本框输入 Firefox.Chrome.IE9,IE10 均支持 oninput 事件,此外所有版本的 IE 均支持 onpropertychange 事件. oninput 事件在用户输入.退格(backspace).删除(delete).剪切(ctrl + x).粘贴(ctrl + v)及鼠标剪切与粘贴时触发(在 IE9 中只在输入.粘贴.鼠标粘贴时触发). onpropertychange 事件在用户输入.退格(backspace).删除(delete).剪切(ctrl + x).粘

一个友好的文本框内显示提示语 jquery 插件

插件实现文本框内默认显示提示语,当文本框获得焦点时提示语消失. 如果没有输入或输入为空则失去焦点时提示语再次出现. 同时它的使用非常舒适简单,引入插件及 jquery 后,在原有的文本框内加上样式类(class="prompt-input")以及设置值(value="Your prompt")为提示语就可以了. 像这样: 1 <input class="prompt-input" type="text" value='Y

【Qt5开发及实例】16、实现一个简单的文本编辑器(over)

实现一个简单的文本编辑器 其他具体的代码基础看前面:http://blog.csdn.net/cutter_point/article/details/42839071 1.功能 这个程序又添加了文本编辑功能,什么加粗,斜体,下划线,字体设置,字号设置,文字排版,段落对齐功能. 2.代码全展示 头文件 showwidget.h /** * 书本:[Qt5开发及实例] * 功能:实现一个简单的文本编辑器 * 文件:showwidget.h * 时间:2015年1月18日10:03:21 * 作者:

实现文本框输入内容提示代码实例

实现文本框输入内容提示代码实例:比较人性化的网站一般都是比较讲究细节的,比如文本框输入内容具有提示效果,在默认情况下,文本框有提示文本,当鼠标放入文本框输入文本的时候,提示文本会消失,下面就通过代码实例介绍一下如何实现此效果.代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="ht

【Qt5开发及实例】12、实现一个简单的文本编辑器1

showwidget.h /** * 书本:[Qt5开发及实例] * 功能:实现一个简单的文本编辑器 * 文件:showwidget.h * 时间:2015年1月18日10:03:21 * 作者:cutter_point */ #ifndef SHOWWIDGET_H #define SHOWWIDGET_H #include <QWidget> #include <QLabel> #include <QTextEdit> #include <QImage>