HTML之于浏览者交互

HTML之于浏览者交互

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

讲解

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

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

3.method ： 数据传送的方式(get/post)。

所有表单控件(文本框、文本域、按钮、单选框、复选框等)都必须放在 标签之间

text:

<input type="text"  name="username" id="username" value="" placeholder="请输入用户名"/>

password:

<input type="password"  name="pass" id="pass" value="" placeholder="请输入密码"/>

radio:

(name相同则为单选按钮)

男性：
<input type="radio" checked="checked" name="Sex" value="male" />
女性：
<input type="radio" name="Sex" value="female" />

submit：

<input type="submit" value="确定"  name="submit" />

checkbox：复选框

file：文件选择框

当用户需要在表单中输入大段文字时，需要用到文本输入域。

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

1、

<textarea>标签是成对出现的，以<textarea>开始，以</textarea>结束。

2、cols ：多行输入域的列数。

3、rows ：多行输入域的行数。

4、

在<textarea></textarea>标签之间可以输入默认值。

下拉列表在网页中也常会用到，它可以有效的节省网页空间。既可以单选、又可以多选。

下拉列表也可以进行多选操作，在<select>标签中设置multiple="multiple"属性，就可以实现多选功能，在 windows 操作系统下，进行多选时按下Ctrl键同时进行单击（在 Mac下使用 Command +单击），可以选择多个选项。

<select>/<select multiple="multiple">
  <option value="看书">看书</option>
  <option value="旅游">旅游</option>
  <option value="运动">运动</option>
  <option value="购物">购物</option>
</select>

不加label的话鼠标一定要点击小圆点才能激活条目,加了label可以直接点击对应的文字来激活条目。

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

  <label for="male">男</label>
  <input type="radio" name="gender" id="male" />
  <label for="female">女</label>
  <input type="radio" name="gender" id="female" />