HTML小白初步学习教程9-职坐标

HTML小白初步学习教程9

沉沙 2018-10-25 来源：阅读 1666 评论 0

摘要：本篇教程探讨了HTML小白初步学习教程9，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通。

本篇教程探讨了HTML小白初步学习教程9，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通。

今天学习表单

首先，了解一下表单的一些属性

name——表单命名，不是必需属性，但是为了防止表单信息在提交到后台处理程序时出现混乱，一般要设置一个与表单功能符合的名称。

method——传送方法，post或者get

enctype——编码方式，有 “text/plain（纯文本）”“application/x-www-form-urlencoded”（默认编码）“multipart/form-data“（MIMe编码，上传文件必须用）

target——目标显示方式

…

然后，了解一下控件

输入类：input标签

菜单列表类：select标签

基本语法：

<form>
  <input name="input_name" type="input_type"/>
</form>

input_name的选项有很多，基本使用的有：

text password radio(单选) checkbox(复选框) button submit(提交按钮)

reset(重置按钮) image(图像提交按钮) hidden(隐藏域) file(文件域)

除了输入类型的控件，有一些控件，例如文字区域、菜单列表不用input标记，比如文字区域用textarea，菜单用select与option等等

看效果不说话：

image

代码：
复制代码

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="//www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>表单</title>
  6 </head>
  7  
  8  <h1>用户测试</h1>
  9  <form action="mailto:xxxx@xx" method="post" name="showitems" enctype="application/x-www-form-urlencoded">
10   姓名：<input type="text" name="username" size="20" id="username"/>
11   <br/><br/>
12   密码：<input type="password" name="pwd" size="30" maxlength="15" id="pwd"/>
13   <br><br>
14   寄语：<input type="text" name="URL" size="40" maxlength="50" value="写下你要说的话"/>
15   <hr size="3" color="#9900CC">
16   
17   <p><font size="+2" color="#3333FF">你最喜欢的漫画是：</font></p>
18   <input type="radio" value="ansA" name="test"/>火影忍者  
19   <input type="radio" value="ansB" name="test"/>犬夜叉  
20   <input type="radio" value="ansC" name="test"/>海贼王  
21   <input type="radio" value="ansD" name="test"/>其他<br/>
22   <br>
23   <hr size="3" color="#9900CC">
24   
25   <p><font size="+2" color="#3333FF">你喜欢的场景：</font></p>
26   <input type="checkbox" value="ansA2" name="test"/>春日微风  
27   <input type="checkbox" value="ansB2" name="test"/>夏日微凉夜晚  
28   <input type="checkbox" value="ansC2" name="test"/>秋日枫叶林  
29   <input type="checkbox" value="ansD2" name="test"/>冬日暖阳天  
30   <br><br><br>
31   
32   <input type="submit" name="sub" value="提交" />  
33   <input type="reset" name="rst" value="重置"/>
34   <br><br><br>
35   
36   <input align="middle" alt="相当于空按钮" type="button" value="没啥用" name="btn1"/>
37   <input align="left" type="button" value="关了你" name="closeyou" onclick="window.close()"/>
38   <input align="left" type="button" value="没啥用" name="opennew" onclick="window.open()"/>
39   <br><br>
40   
41   <input width="80" align="bottom" type="image" src="images/yes.jpg" name="image1" onclick="window.open()"/>
42   
43   <input type="hidden" name="from"/><br/><br>
44   
45   文件域，请选择文件：  
46   <input type="file" name="filee"/>
47  </form>
48   
49   
50  <form action="xxxx@xx" method="post" name="invest" id="invset">
51   选择性别：<br/><br/>
52   <select name="sex" size="4" multiple="multiple">
53    <option value="boy" selected="selected">男</option>
54    <option value="woman" selected="selected">女</option>
55    <option value="bw" selected="selected">男/女</option>
56   </select>
57   <br/><br/>
58   <select name="city">
59    <option value="beijing" selected="selected">北京
60    <option value="shanghai">上海
61    <option value="nanjing">南京
62    <option value="changchun">长春
63   </select>
64   <br/><br/>
65   留言：<textarea name="liuyan" rows="5" cols="40">留言区
66   </textarea><br/><br/>
67  </form>
68 <body>
69 </body>
70 </html>
71