HTML_4th_表单

来源：互联网发布：华为光猫更改ssh端口编辑：程序博客网时间：2024/06/06 11:38

一、表单
1、网页中何处用到表单？
用户登陆、注册、信息反馈、提供搜索工具...
作用：用表单来收集数据、信息
2、语法

<!-- 语法 --><form method="post" action="result.html" enctype="multipart/form-data"></form>

1）method属性规定如何发送表单数据。
2）action属性表示向何处发送表单数据。
3）enctype属性表示表单编码属性。

二、表单元素（难点）
1、基本语法

<!-- 语法 --><input type="text" name="fname" value="text" />

1）type属性表示input元素类型。
2）name属性表示input元素名称。
3）value属性表示input元素的值。

2、文本框

<!-- 语法 --><input type="text" name="userName" value="用户名" size="30" maxlength="20" />

1）type="text"表示这是一个文本框
2）name="userName"表示文本框名称
3）value="用户名"表示文本框初始值
4）size="30"表示文本框长度
5）maxlength="20"文本框可输入最大字符

3、密码框

<!-- 语法 --><input type="password" name="pass" size="20" />

1）type="password"表示这是一个密码框
2）name="pass"表示密码框名称
3）size="20"表示密码框的长度

4、单选按钮

<!-- 语法 --><input name="sex" type="radio" value="男" checked="checked" />男<input name="sex" type="radio" value="女" />女

1）type="radio"表示这是一个单选按钮框
2）value="男（女）"表示单选按钮框的值
3）checked="checked"表示单选按钮为选中状态
4）两个单选按钮框的属性name的值必须相同，才能达到互斥效果。
5）属性name相同的单选按钮框可以有多个。

5、复选框

<!-- 语法 --><input type="checkbox" name="interest" value="sports" />运动<input type="checkbox" name="interest" value="talk" checked="checked" />聊天<input type="checkbox" name="interest" value="play" />玩游戏

1）type="checkbox"表示这是一个复选框。

2）value="sports"表示该复选框的值。
3）checked="checked"表示该复选框为选中状态。
4）name属性值可以相同（相同表示为同一组复选框），也可以不同。
5）同一组复选框里可以有多个复选框默认有checked属性。

6、列表框（下拉列表，如选择省份）

<!-- 语法 --><select name="住址" size="1"><option value="选项的值" selected="selected">省份1</option><option value="选项的值">省份2</option><option>省份3</option><option>省份4</option>······</select>

1）name="列表名称"表示列表名称。
2）size="1"表示列表显示一行，size默认值为1。
3）至少有一个<option>。

7、按钮
1）提交按钮（submit）

<!-- 语法 --><input type="submit" name="butSubmit" value="submit按钮" />

2）重置按钮（reset）

<!-- 语法 --><input type="reset" name="butReset" value="reset按钮" />

3）普通按钮（button）

<!-- 语法 --><input type="button" name="butButton" value="button按钮" />

4）图片按钮

<!-- 语法 --><input type="image" src="images/login.gif" />

1）图片按钮同样具有提交表单的功能。

8、多行文本框（文本域）

<!-- 语法 --><textarea name="showText" cols="x" rows="y">文本内容</textarea>

9、文件域

<!-- 语法 --><form method="post" action="" enctype="multipart/form-data"><input type="file" name="myFile" /><input type="submit" name="upload" value="上传" /></form>

三、表单高级应用
1、隐藏域

<!-- 语法 --><input type="hidden" name="userid" value="666" />

2、只读

<!-- 语法 --><input type="text" name="name" value="张三"  readonly="readonly"/>

3、禁用

<!-- 语法 --><input type="submit" disabled="disabled" value="保存" />

四、综合示例

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>表单</title></head><body><p>注册</p><form method="post" action="" enctype="multipart/form-data">用户名：<input type="text" name="username" maxlength="10" size="20" value="123" readonly="readonly" /><br />密&nbsp;&nbsp;&nbsp;&nbsp;码：<input type="password" name="pwd"  maxlength="6"  size="20" /><br /><span>请选择您的性别</span><br /><input type="radio" value="男" name="sex" checked="checked" />男<input type="radio" value="女" name="sex" />女<br /><span>请选择您的爱好</span><br /><input type="checkbox" />打球<input type="checkbox" checked="checked" />玩游戏<input type="checkbox" />看电影<input type="checkbox" />听音乐<br /><span>请选择您的住址</span><br /><select name="住址" size="1"><option>湖南</option><option selected="selected">湖北</option><option selected="selected">上海</option></select><br /><span>交友宣言</span><br /><textarea cols="30" raws="3"></textarea><br /><input type="file" name="file" /><input type="submit" name="update" value="上传"/><br /><input type="submit" name="button" value="提交" /><input type="reset" name="reset" value="重置" /><input type="button" name="anniu" value="点我啊" disabled="disabled" /></form></body></html>

页面显示：

1 0