码迷,mamicode.com
首页 > Web开发 > 详细

HTML学习笔记(十一)编辑表单三

时间:2016-05-16 01:57:33      阅读:223      评论:0      收藏:0      [点我收藏+]

标签:

    提交按钮是一种特殊的按钮,不需要设置onclick参数,在单击该类按钮时可以实现表单内容的提交。语法:<input type="submit" name="按钮名" value="按钮的取值"/>;重置按钮可以清除表单的内容,恢复默认的表单内容设定,语法:<input type="reset" name="按钮名" value="按钮的取值"/>

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>在表单中添加提交、重置按钮</title>
 6 </head>
 7 <form action="mailto:mingrisoft@mingrisoft.com" method="post" name="invest" enctype="text/plain">
 8   姓名:
 9   <input type="text" name="username" size="20"/>
10   <br/>
11   <br/>
12   网址:
13   <input type="text" name="URL" size="20" maxlength="50" value="http://"/>
14   <br/>
15   <br/>
16   密码:
17   <input type="password" name="password" size="20" maxlength="8"/>
18   <br/>
19   <br/>
20   确认密码:
21   <input type="password" name="qurpassword" size="20" maxlength="8"/>
22   <br/>
23   <br/>
24   请选择你喜欢的音乐:
25   <input type="checkbox" name="m1" value="rock"/>
26   摇滚乐
27   <input type="checkbox" name="m2" value="jazz"/>
28   爵士乐
29   <input type="checkbox" name="m3" value="pop"/>
30   流行乐<br/>
31   <br/>
32   请选择你居住的城市:
33   <input type="radio" name="city" value="beijing"/>
34   北京
35   <input type="radio" name="city" value="beijing"/>
36   上海
37   <input type="radio" name="city" value="beijing"/>
38   南京<br/>
39   <br/>
40   <input type="submit" name="submit" value="提交表单"/>
41   <input type="reset" name="cx" value="重置按钮"/>
42 </form>
43 <body>
44 </body>
45 </html>

     图像域是指可以用在提交按钮位置上的图片,这幅图片具有按钮的功能,语法:<input type="image" src="图像地址" name="图像域名称"/>;表单中的隐藏域主要用来传递一些参数,而这些参数不需要在页面中显示。当用户提交表单时,隐藏域的内容会一起提交给处理程序,语法:<input type="hidden" name="隐藏域名称" value="提交的值"/>;文件域在上传文件时常常用到,它用于查找硬盘中的文件路径,然后通过表单将选中的文件上传,语法:<input type="file" name="文件域的名称"/>

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>表单</title>
 6 </head>
 7 <form action="mailto:mingrisoft@mingrisoft.com" method="post" name="invest" enctype="text/plain">
 8   姓名:
 9   <input type="text" name="username" size="20"/>
10   <br/>
11   <br/>
12   网址:
13   <input type="text" name="URL" size="20" maxlength="50" value="http://"/>
14   <br/>
15   <br/>
16   密码:
17   <input type="password" name="password" size="20" maxlength="8"/>
18   <br/>
19   <br/>
20   确认密码:
21   <input type="password" name="qurpassword" size="20" maxlength="8"/>
22   <br/>
23   <br/>
24   请上传你的照片:
25   <input type="file" name="file"/>
26   <br/>
27   <br/>
28   请选择你喜欢的音乐:
29   <input type="checkbox" name="m1" value="rock"/>
30   摇滚乐
31   <input type="checkbox" name="m2" value="jazz"/>
32   爵士乐
33   <input type="checkbox" name="m3" value="pop"/>
34   流行乐<br/>
35   <br/>
36   请选择你居住的城市:
37   <input type="radio" name="city" value="beijing"/>
38   北京
39   <input type="radio" name="city" value="beijing"/>
40   上海
41   <input type="radio" name="city" value="beijing"/>
42   南京<br/>
43   <br/>
44   <input type="image" src="1.jpg" name="image1" width="160" height="160"/>
45   <input type="image" src="2.jpg" name="image2" width="160" height="160"/>
46   <input type="hidden" name="form" value="invert"/>
47 </form>
48 <body>
49 </body>
50 </html>

     列表和菜单都是通过<select>和<option>标记来实现的,语法:<select name="下拉菜单的名称" size="显示的选项数目" multiple="列表中的项目多选"><option value="选项值" selected="selected">选项显示内容</option></select>

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>菜单的插入</title>
 6 </head>
 7 <body>
 8 <h3>兴趣调查</h3>
 9 <form action="mailto:mingrisoft@mingrisoft.com" method="post" name="invest">
10   请选择你喜欢的音乐:<br/>
11   <br/>
12   <select name="music" size="5" multiple>
13     <option value="rock">摇滚乐</option>
14     <option value="pop">流行乐</option>
15     <option value="jazz" selected>爵士乐</option>
16     <option value="folk">民族乐</option>
17     <option value="dj">打击乐</option>
18   </select>
19   <br/>
20   <br/>
21   <select name="city">
22     <option value="beijing">北京</option>
23     <option value="shanghai">上海</option>
24     <option value="nanjing">南京</option>
25     <option value="changchun">长春</option>
26   </select>
27   <input type="submit" name="submit" value="提交表单"/>
28 </form>
29 </body>
30 </html>

     文字域或文本域可以添加多行文字,从而可以输入更多的文本,语法:<textarea name="文本域名称" value="文本域默认值" rows="行数" cols="列数"></textarea>;在HTML中,id用来标记页面的唯一元素

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>添加文本域</title>
 6 </head>
 7 <body>
 8 用户调查留言:<br/>
 9 <br/>
10 <form action="mailto:mingrisoft@mingrisoft.com" method="post" name="invest">
11   用户名:
12   <input name="username" id="username" type="text" size="20"/>
13   <br/>
14   <br/>
15   密码:
16   <input name="password" type="password" size="20"/>
17   <br/>
18   <br/>
19   留言:
20   <textarea name="liuyan" rows="5" cols="40">留言
21 </textarea>
22 </form>
23 </body>
24 </html>

 

HTML学习笔记(十一)编辑表单三

标签:

原文地址:http://www.cnblogs.com/yyxiangjava/p/5496705.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!