html 表单控件

form

表单,用于向其他页面传递数据。

一个例子

<form action="form_action.asp" method="get">
  <p>First name: <input type="text" name="fname" /></p>
  <p>Last name: <input type="text" name="lname" /></p>
  <input type="submit" value="Submit" />
</form>

标签属性
action 规定当提交表单时向何处发送表单数据;
method 仅能为get或post。
name 此表单的名称。
表单能够包含 input 元素,比如文本字段复选框、单选框、提交按钮等等。

URL中“?”问号后面的参数会出现在Query String Parameters中;POST方法的form中的数据会出现在FormDara中。

input

input,输入,用于搜集用户信息。
标签属性
type 根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是text文本字段、checkbox复选框、password密码、radio单选按钮、button按钮等等。

下拉列表

<form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

提交
<input type="submit" value="点我提交" />
checked 若值为“checked",规定此 input 元素首次加载时应当被选中。

placeholder

在input标签增加placeholder属性,即可增加输入框的提示效果,见图1.

onkeydown

在input标签增加onkeydown属性即可为输入框绑定回车事件,见图1。

<input placeholder="试试你的名字^_^"  onkeydown='if(event.keyCode==13){fuzzyQuerybutton.click()} ' type="text" class="form-control" ng-model="fuzzyQueryName"></input>
<button id="fuzzyQuerybutton" class="btn btn-info" ng-click='fuzzyQuery(fuzzyQueryName)'>模糊搜索</button> 
<!--placeholder与onkeydown,bootstrap部分与angularJS部分可忽略-->

图1  placeholder与onkeydown

时间: 2024-08-30 10:50:17

html 表单控件的相关文章

假乱真的表单控件:美化原生表单控件

文章描述:这样的模拟需要在兼顾实现设计的同时,还要保证网站的性能和可用性.这时我不禁开始怀念那些看起来平凡却非常实用的原生表单控件.如果用他们几乎可以解决以上所有问题. 在互联网成熟的今天,大家对网站的要求不仅仅在功能实现上,也开始注重视觉设计,多终端用户体验等等.表单控件是web页面上重要的组成元素,具有非常高的功能性.交互设计师为它设计更加方便的操作方式,视觉设计师也会绞尽脑汁设计出更加夺人眼球的视觉展现.可是由于表单控件自身的局限性,不能很好地自定义外表,所以就诞生了一系列的由聪明的前端同

ASP.NET中的XML表单控件

asp.net|xml|控件 导 读:介绍了有关ASP.NET中XML控件的使用,有个小BUG:在WEBFORM.ASPX中出现的XML控件,其中的transformsource属性设定了样式表文件路径,可是在文章出处没有找到这个XSL文件.:( 自己解决吧. --------------------------------------------------------------------------------在这个代码中揭示了微软在ASP.NET架构中隐藏的一个WEB表单控件,即<as

ASP入门教程-使用输入型表单控件

为了让用户通过表单输入数据,可以使用INPUT标记创建各种表单控件,通过将INPUT标记的TYPE属性设置为不同的值,可以创建不同类型的输入型表单控件. 1.单行文本框,格式如下: 一)格式: <form name="表单的名称" method="get | post" action="URL"> <input type="text" name="字符串" value="字符串&

ASP入门教程-使用其他表单控件

除了使用INPUT标记创建输入型表单控件外,也可以使用TEXTAREA标记创建多行文本框,或使用SELECT标记创建选项选单,还可以使用FIELDSET标记以表单中的控件进行分组. 1.在表单中使用多行文本框控件 一)格式: <form name="表单的名称" method="get | post" action="URL"> <TEXTAREA name="字符串" ROWS="整数"

excel2013如何插入表单控件

  excel2013插入表单控件的方法: 插入表单步骤1:先看下效果,下面是两个调查表单,左边使用的是单选按钮,右边使用的是复选按钮. 插入表单步骤2:插入表单控件是在开发工具选项卡下,该选项卡不在默认主选项卡,需要添加该选项卡.在 文件->选项->自定义功能区,勾选开发工具 插入表单步骤3:回到表格,即看到多了一个开发工具选项卡, 选择开发工具->插入->表单控件->分组框. 插入表单步骤4:将分组框重命名为"你的职业" 插入表单步骤5:再选择开发工具

php通过隐藏表单控件获取到前两个页面的url

  自己在学习过程中也遇到了类似的问题: 比如,后台是想做成这样子的: 但是实际则是这样的: 解决方法: 通过隐藏表单控件         <input type="hidden" name="prevurl" value="<?php echo $_SERVER['HTTP_REFERER']?>"> 这样$_SERVER['HTTP_REFERER']的值看上去就暂时存到了$_POST[prevurl]里. 其实这个方

为原生表单控件穿上美丽外衣

  Fufu :在互联网成熟的今天,大家对网站的要求不仅仅在功能实现上,也开始注重视觉设计,多终端用户体验等等.表单控件是web页面上重要的组成元素,具有非常高的功能性.交互设计师为它设计更加方便的操作方式,视觉设计师也会绞尽脑汁设计出更加夺人眼球的视觉展现.可是由于表单控件自身的局限性,不能很好地自定义外表,所以就诞生了一系列的由聪明的前端同学模拟出来的以假乱真的表单控件. 让我们从一个真实的"栗子"开始. 视觉设计师提供了一张设计稿: 作为前端同学,我在收到稿子的一瞬间,其实内心各

label标签for属性与表单控件点击选中的联系(单选按钮为例)

表单中经常会出现单选按钮,也就是,但我们是否有注意到自己所写的单选按钮,能否在点击文字的时候进行选中切换. 其实这里面包含了一点点小窍门,也就是我们的标签 标签为input元素定义标记,其本身没有任何效果,但若在label元素内点击文本的话,就会触发此控件.所以,当用户选择标签时,浏览器就会自动将焦点转到和标签相关的控件上. label与表单控件联系的方式有两种: 1.隐式联系--表单控件作为标记标签的内容 <div> <span>显式联系</span> <inp

Vue.js表单控件实践_javascript技巧

最近项目中使用了vue替代繁琐的jquery处理dom的数据更新,个人非常喜欢,所以就上官网小小地实践了一把. 以下为表单控件的实践,代码敬上,直接新建html文件,粘贴复制即可看到效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>PlayAround2 Have Fun</title> <sc

全面解析Bootstrap表单使用方法(表单控件)_javascript技巧

一.输入框input 单行输入框,常见的文本输入框,也就是input的type属性值为text. 在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootstrap框架都是通过input[type="?"] (其中?号代表type类型,比如说text类型,对应的是input[type="text"])的形式来定义样式的. 为了让控件在各种表单风格中样式不出错,需要添加类名".form-con