我们接着上节的内容,上一节我们学习了三种按钮,在HTML中有一种图片域标签,可以用图片方式形成按钮。
语法:
<input type="image" src="图片的路径">
图片域image既拥有按钮的特点,也拥有图片的特点。
示例代码:
<html>
<head>
<title>图片域image</title>
</head>
<body>
账号:<input type="text"><br>
密码:<input type="password"><br>
<input type="image" src="images/login.jpg">
</body>
</html>
图片呢,你可以百度搜索一个按钮的,放在相应的路径下,就可以看到效果了。
在实际开发中,很少使用图片域来定义按钮,前端开发中,能用CSS样式表实现的,都使用CSS样式实现,这样可以节约传输量,加快页面速度。
隐藏域hidden:
这个标签的作用,主要是为后端开发服务的,比如有些数据,id啊之类的,不需要用户看到,但是又需要在页面上保存起来,就可以用hidden。
语法:
<input type="hidden" id="" name="">
在HTML学习中,隐藏域几乎用不到,大家了解一下即可。它主要的用处还是在后端技术中。
示例代码:
<html>
<head>
<title>隐藏域</title>
</head>
<body>
人员姓名:<input type="text" id="emp_name" name="emp_name" value="虾米大王">
<br>
<input type="hidden" id="emp_id" name="emp_id" value="001">
</body>
</html>
在浏览器预览效果中,隐藏域没有显示出来,但是数据是已经保存在控件中了,当提交数据至服务器时,就可以根据这些隐藏值做一些相应操作了。
文件域file:
我们上网时,经常可以看到很多网页中有上传文件的地方,这个就是文件域,在使用文件域时,需要在表单form中设置属性enctype="multipart/form-data",才可以有效果。
语法:
<input type="file" id="" name="">
示例代码:
<html>
<head>
<title>文件域file</title>
</head>
<body>
<form name="form1" methon="post" action="" enctype="multipart/form-data">
<input type="file">
</form>
</body>
</html>
多行文本框textarea:
单行文本框只能输入一行信息,当我们需要输入大段文字时,就可以使用多行文本框标签,但是它不再使用input标签,而是textarea;
语法:
<textarea rows="行数" cols="列数">多行文本内容</textarea>
多行文本框的内容,不再使用value属性标记,而是开始标签和结束标签之间包裹的内容,都属于多行文本框。
示例代码:
<html>
<head>
<title>多行文本框</title>
</head>
<body>
<p>个人简介:</p>
<textarea rows="10" cols="30">请介绍一下你自己</textarea>
</body>
</html>
我们设置多行文本框的大小时,使用rows属性和cols属性;
在HTML中,共有三种文本框,
单行文本框text,
密码文本框password,
多行文本框textarea。
下一节我们接着分享表单控件。