表单3
表单3
表单文本区域
文本区域
语法格式：
<textarea name = “名称" cols = “宽度" rows = “高度"></textarea>
常用属性
- name：元素名称
- cols：宽度，是指多少个字符宽。
- Rows：高度，是指几行高。
注：<textarea>和</textarea>之间是默认文本
实例：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>用户注册</title>
</head>
<body>
<font size="5" color="red">欢迎注册php.cn</font>
<form name="user" method="get" action="" >
用户名：<input type="text" name="username"/>
<br/>
密码：<input type="password" name="userpwd"/>
<br/>
性别：<input type="radio" name="sex" value="男" checked=checked>男
<input type="radio" name="sex" value="女">女
<br/>
爱好：<input type="checkbox" name="hobby" value="运动">运动
<input type="checkbox" name="hobby" value="看电影">看电影
<input type="checkbox" name="hobby" value="编程" checked="checked">编程
<input type="checkbox" name="hobby" value="宅着">宅着
<br/>所在地：
<select name="city">
<option value="北京">北京<option>
<option value="上海">上海<option>
<option value="杭州" selected="selected">杭州<option>
<option value="南京">南京<option>
<option value="合肥">合肥<option>
</select>
<br/>个性介绍：<br/><textarea name=" introduction" cols="30" rows="4"></textarea>
<br/><input type="submit" value="提交信息"/>
</form>
</body>
表单按钮大全
HTML表单中的按钮主要有四种
- 提交按钮：<input type="submit" value="提交表单" />
- 重置按钮：<input type="reset" value="重新填写" />
- 图片按钮：<input type="image" src="images/btn02.png" /> 功能就是提交表单，与submit按钮功能一样
- 普通按钮：<input type="button" onclick="javascript:window.close()" value="关闭窗口" />
- 普通按钮本身是不具备任何功能的，一般要与JS程序配合使用，实现相应的功能。
- 关于JS的内容，后面再讲
实例：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>用户注册</title>
</head>
<body>
<font size="5" color="red">欢迎注册php.cn</font>
<form name="user" method="get" action="" >
用户名：<input type="text" name="username"/>
<br/>
密码：<input type="password" name="userpwd"/>
<br/>
性别：<input type="radio" name="sex" value="男" checked=checked>男
<input type="radio" name="sex" value="女">女
<br/>
爱好：<input type="checkbox" name="hobby" value="运动">运动
<input type="checkbox" name="hobby" value="看电影">看电影
<input type="checkbox" name="hobby" value="编程" checked="checked">编程
<input type="checkbox" name="hobby" value="宅着">宅着
<br/>所在地：
<select name="city">
<option value="北京">北京<option>
<option value="上海">上海<option>
<option value="杭州" selected="selected">杭州<option>
<option value="南京">南京<option>
<option value="合肥">合肥<option>
</select>
<br/>个性介绍：<br/><textarea name=" introduction" cols="30" rows="4"></textarea>
<br/><input type="submit" value="提交信息"/>
<input type="reset" value="重填一次"/>
<input type="image" src="http://photocdn.sohu.com/20160107/mp52903269_1452135104978_1_th.png" width="70"/>
<input type="button" onclick="javascript:window.close()" value="关闭窗口"/>
</form>
</body>
表单隐藏域
隐藏域
功能：隐藏域就是看不见的一个框。传递一些值，而这个值又不想让别人看见。
用处：主要用于后端后面程序，如：修改某一条新闻内容时，需要传递一个新闻的id号。
语法格式：<input type = “hidden" name = “名称" value = “默认值" />
表单上传文件域
上传文件域
语法格式：
<input type = “file” 属性 = “属性” />
常用属性
- name：表单元素的名称
- value：表单元素的值，这个值其实就是上传的文件名。value属性是只读属性，这个value的内容只能来自手动选择上传的文件，而不能用户自己指定一个路径。为了安全起见，value是只读的。
注：现在只能实现上传文件框，而不能真正实现上传功能，上传功能用后端来实现的。
注：
- 需要上传文件时，表单的提交方式只能为post方式，
- 必须给form标签添加enctype="multipart/form-data"
实例：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>用户注册</title>
</head>
<body>
<font size="5" color="red">欢迎注册php.cn</font>
<form name="user" method="post" action="" enctype="multipart/form-data" >
用户名：<input type="text" name="username"/>
<br/>
密码：<input type="password" name="userpwd"/>
<br/>
性别：<input type="radio" name="sex" value="男" checked=checked>男
<input type="radio" name="sex" value="女">女
<br/>
爱好：<input type="checkbox" name="hobby" value="运动">运动
<input type="checkbox" name="hobby" value="看电影">看电影
<input type="checkbox" name="hobby" value="编程" checked="checked">编程
<input type="checkbox" name="hobby" value="宅着">宅着
<br/>所在地：
<select name="city">
<option value="北京">北京<option>
<option value="上海">上海<option>
<option value="杭州" selected="selected">杭州<option>
<option value="南京">南京<option>
<option value="合肥">合肥<option>
</select>
<br/>个性介绍：<br/><textarea name=" introduction" cols="30" rows="4"></textarea>
<br/>上传头像：<input type="file" name="upload"/>
<br/><input type="submit" value="提交信息"/>
<input type="reset" value="重填一次"/>
<input type="image" src="http://photocdn.sohu.com/20160107/mp52903269_1452135104978_1_th.png" width="70"/>
<input type="button" onclick="javascript:window.close()" value="关闭窗口"/>
</form>
</body>
