html5交互,HTML5交互融媒体大赛作品

HTML5表单标签，与浏览器交互

1、form表单：网址与用户交互，把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。

语法： form method="传送方式" action="服务器文件"

          form ： 标签是成对出现的，以开始，以/form结束。

          action   ： 浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。

          method   ：  数据传送的方式（get/post）。

2、文本输入框、密码输入框

语法：

form

  input type="text/password" name="名称" value="文本" /

/form

type：

当type=" text "时，输入框为 文本 输入框 ;

当type=" password "时, 输入框为 密码输入框。

name： 为文本框命名，以备后台程序ASP 、PHP使用。

value： 为文本输入框设置默认值。(一般起到提示作用)

3、占位符placeholder,属性，有时候需要提示用户输入框需要输入框的内容

     4、input标签中的数字框number类型

       input type="number"/  ：输入框中只能输入数字，输入其他字符无效，输入框右侧会有加减符号，可以调整输入数字的大小，浏览器不同表现不一致。

5、input标签中的网址框url类型

input type="url"/： 数字框的值需以http://或者https://开头,且后面必须有内容,否则表单提交的时候会报错误提示

6、input标签中的邮箱框的email类型

    input type="email" / ： 表示该输入框的类型为邮箱；数字框的值必须包含@；数字框的值@之后必须有内容,否则会报错误提示。

7、textarea标签创建文本域

      语法：  textarea rows=" 行数" cols=" 列数" 文本/textarea

8、label为input标签穿上衣服：如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）

        语法：label for="控件id名称" （标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。）

9、单选框、复选框

    input type="radio/checkbox" value="值" name="名称" checked="checked"/

    type:    当  type="radio"  时，控件为 单选框

                当  type="checkbox"  时，控件为 复选框

     value： 提交数据到服务器的值（后台程序PHP使用）

     name： 为控件命名，以备后台程序 ASP、PHP 使用

     checked： 当设置 checked="checked" 时，该选项被默认选中

        注意： 同一组 的单选按钮，name 取值一定要一致，比如上面例子为同一个名称“radioLove”，这样同一组的单选按钮才可以起到单选的作用。

10、使用select option创建下拉菜单 （select标签里面只能放option标签，表示下拉列表的选项）

        设置selected="selected"属性，则该选项就被默认选中。

    11、提交/重置 按钮

      语法：input type="submit"value="提交"

                input  type="reset"  value="重置"

相关问答

Q1: 怎么直接使用Html5与后台交互

常见的HTML5与后台交互方式有：1 传统的GET、POST提交FORM，2 使用AJAX技术交互 3 使用 websocket 交互

其实还有一个技术是使用iframe来进行交互，不过，这个技术现在用的已经不多了。

Q2: html5 如何与后台交互 .net

一般是用Ajax，url习惯用一般处理程序。Ajax是Jquery里的。一般处理程序学.net应该都要会的。

function jiaohu(){

   $.ajax({

       type: "Post",//提交方式，分为get和post两种

       url: "test.json",//路径，就是你要交互的后台的路径

       data: {username:"1", password:"2"},//参数，提交到后台的参数

       dataType: "json",//后台返回的类型

       success: function(data){    //交互成功后的回调函数，data为返回的内容

         $('#resText').empty();   //清空resText里面的所有内容

         var html = 'p交互成功/p'; 

         $('#resText').html(html);

         }

  });

}

Q3: html5中的页面交互元素有哪些

1、点击屏幕交互

点击是最常用的手势，经常用于页面切换。点击引导可以作为注释，用户可以理解H5内容，使用户能够按照H5的节奏操作。例如，在《带上希望的种子去北京》中，用户可以点击手势“检查”行李箱，详细查看H5设计的内容。

2、连续点击交互

连击交互在游戏类中的应用比较多。在游戏类H5中，通常由连续点击生成的数值关联积分排名，具有竞技性质的H5可以进一步吸引用户参与。例如，《漫威电影十周年》的“揍”灭霸小游戏，用户继续点击屏幕，10秒内的点击次数就会计算出整个网络排名。

3、长按交互

长按是用户根据H5引导长时间触摸页面。长按交互用户需要保持手指静止状态，并在设计时提示H5播放进度参考，以避免乏味。例如，从腾讯公益的《敦煌未来博物馆》设计的风化过程来看，用户点击手机即可看到壁画随着年份推移逐渐风化的场景，还可以唤醒用户心中的文化保护意识。

4、滑动交互

拖拽交互必须在长按交互的基础上滑动，从一个点拖动到另一个点可以让用户自行控制速度。适合图片展示类的H5。例如，在《睡姿大比拼》中，用户可以拖动角色肢体来创建各种有趣的睡眠姿势。

5、重力交互

重力交互是一个非常直观的表达形式，用户可以轻松get到H5获得乐趣，这意味着手机硬件能升级给H5设计带来了更多的可能性。利用重力感应、陀螺仪、速度加速器等硬件，对H5的玩法进行创新，提高用户的代入感。例如，安装在《一“陆”狂飙，极速挑战》上的赛车游戏是通过手机重力传感来调整小车的方向。

6、全景交互

全景交互在屏幕中以360度展现所有场景，用户可以通过滑动移动场景。这种H5格式(如VR)需要关注整个场景的设计，边界连接要足够顺畅，全景加载内容较大，一定要注意用户等待和屏幕卡顿的问题。例如，华为出品的《我的荣耀5G世界》中全景互动展示了未来丰富多彩的5G世界。

以上几种就是现目前比较常见的H5交互元素，如有帮助请采纳~