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 是 form 内最常用的元素, 它有以下多种 type: 

• text, 单行文本
• textarea, 块文本
• password, 密码
• radio, 单选按钮
• checkbox, 复选框
• select, 下拉列表
• button, 按钮
• submit, 提交

等等。

不同 type 下又有着不同的 元素搭配 与 规律.
凡是有预设值的表单控件, 元素内都要有 value 属性. 多选一的, 这些value不同的元素, 其name是一致的.

下拉列表 node 内要有 option 元素.

<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>

常用属性

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. HTML 表单 | 菜鸟教程 (runoob.com)