html基础学习之用户交互，控件使用

html用户交互

2017年7月12日

17:30

HTML表单(form)

表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。

<form method="传送方式"  action="服务器文件"></form>

所有表单控件必须放在form标签中

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

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

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

<form    method="post"   action="save.php">
        <labelfor="username">用户名:</label>
        <input type="text"name="username" />
        <labelfor="pass">密码:</label>
        <inputtype="password" name="pass" />
</form>

文本输入框、密码输入框

 

<form>

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

</form>

 

文本框，密码框是一个控件。value是控件的值， name是空间变量的名字，用于对控件里数据的辨识。

placeholder：占位符

定义和用法：

value 属性为 input 元素设定值。

对于不同的输入类型，value 属性的用法也不同：

type="button", "reset","submit" - 定义按钮上的显示的文本

type="text", "password","hidden" - 定义输入字段的初始值

type="checkbox", "radio","image" - 定义与输入相关联的值

注释：<input type="checkbox"> 和 <inputtype="radio"> 中必须设置 value 属性。

注释：value 属性无法与 <input type="file">一同使用。

定义和用法

name 属性规定 input 元素的名称。

name 属性用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据。

注释：只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。

 

文本域：textarea

<textarea row="行数" cols="列数">文本</textarea>

 

<label for="控件id名称"> 标签

标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同

 

单选框radio、复选框checkbox：

<inputtype="radio/checkbox" value=" " name=" "checked="checked"/>

单选框的name要一样，checked为默认选项

 

下拉列表：

<select multiple="multiple">

<optionvalue="向服务器提交的值" Selected="selected" >显示的值<option>

Selected="selected"默认选中

multiple="multiple"ctrl+单击可以多选

 

按钮（重置 提交）：

<inputtype="submit/reset" value="提交/重置">