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

HTML_4th_表单

2017-03-26 12:13 183 查看

一、表单

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 />
密    码：<input type="password" name="pwd"  maxlength="6"  size="20" /><br />
<span>请选择您的性别</span>&
4000
lt;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>

页面显示：

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

标签： html5 表单 form submit button

相关文章推荐

新的分享

章节导航