您的位置：首页 > Web前端 > HTML

HTML学习笔记（九）表单

2016-04-01 16:21 489 查看

表单<form>

表单是一个包含表单元素的区域。表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息，并用于向服务器传输数据的元素。
表单标签：

<form>	定义供用户输入的表单
<input>	定义输入域
<textarea>	定义文本域 (一个多行的输入控件)
<label>	定义一个控制的标签
<fieldset>	定义域
<legend>	定义域的标题
<select>	定义一个选择(下拉)列表
<optgroup>	定义选项组
<option>	定义下拉列表中的选项
<button>	定义一个按钮

表单组件标签：
文本框 <input type="text"/>
密码框 <input type="password"/>
单选按钮 <input type="radio"/>

多选框 <input type="checkbox"/>
下拉列表框
<select> 描述一个下拉框
<option></option> 描述一个下拉项
<option></option>
</select>
多行文本框
<textarea cols="..." rows="..." ></textarea>
提交按钮 <input type="submit" value="按钮上的字"/>
重置按钮 <input type="reset" value=" ......"/>
普通按钮 <input type="button" value=" ...... "/>

HTML 表单 - 输入标签<input>

输入类型是由类型属性（type）定义的。经常被用到的输入类型如下：
文本域：type="text"
密码字段：type="password" (密码字段字符不会明文显示，而是以星号或圆点替代。)

单选按钮：type="radio" （设置相同的name属性，把单选按钮规定为同一组，就实现单选。如：下面单选框小栗子中两个radio类型input的name都为“Sex”）

复选框：type="checkbox" (用户可从若干给定的选择中选取一个或若干选项)

提交按钮：type="submit"
表单的动作属性：
action="xxxxxx.xxx" 当用户单击提交按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名/目标地址。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。
小栗子：（引用自w3cschool）

<form name="input" [code]action="html_form_action.asp" method="get">

Username:
<input type="text" name="user" />

<input type="submit" value="Submit" />

</form>[/code]

浏览器显示如下：

Username:

type
：当type值设置为submit时，按钮才有提交作用

value
：
按钮上显示的文字

假如在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 "html_form_action.asp" 的页面。该页面将显示出输入的结果。
点击到w3cschool--表单

单选框小栗子：

<html>
<body>
<form>
女：
<input type="radio" checked="checked" name="Sex" value="f"/>
<br/>
男：
<input type="radio" name="Sex" value="m"/>
</form>
</body>
</html>

复选框小栗子：

<html>
<body>
<form>
爱好：
<pre>        <input type="checkbox"name="reading book"/>看书</pre>
<pre>        <input type="checkbox"name="singing"/>唱歌</pre>
</form>
</body>
</html>

使用了 pre 标签对空行和空格进行控制。还可以使用<span> </span>

下拉列表小栗子：

<html>
<body>
<form>
<select name="city">
<option value="Beijing">Beijing</option>
<option value="Shanghai">Shanghai</option>
<option value="Hongkong">Hongkong</option>
<option value="Lundon">Lundon</option>
</select>
</form>
</body>
</html>

通过在某个option标签内添加selected="selected"属性，可以设定默认选项值。

下拉列表也可以进行多选操作，在<select>标签中设置multiple="multiple"属性，就可以实现多选功能。

文本域小栗子：

<html>
<body>
<textarea rows="8" cols="16"></textarea>
</body>
</html>

cols ：

多行输入域的列数。

rows ：

多行输入域的行数。

<fieldset>与<legend>的使用小栗子：

<!DOCTYPE HTML>
<html>
<body>
<form>
<fieldset>
<legend align="center">健康信息</legend>
姓名：<input type="text" />
性别：<input type="text" />
<br/>
身高：<input type="text" />
体重：<input type="text" />
</fieldset>
</form>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航