网页设计之路（7）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单练习</title>
</head>
<body>
<p>
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。
表单用表单标签（form）定义。
</p>
<form>
姓名：<input type="text" name="firstname" value="girl"><br /><!--输入文本,注意value，它表示input的默认值,不同的type有不同的用法-->
密码：<input type="password" name="password"</form><!--这是输入密码，注意格式要对齐，美观-->
<br />
<form>
<input type="radio" name="sex" value="male" />male<!--这里的value是用来表示选择后的input的值-->
<br />
<input type="radio", name="sex" value="female" />female<!--注意name的作用，它主要是区分输入标签的，在单选框里，name标签名字必须一样，否则起不到单选框的作用。-->
</form>
<br />
<form >
<input type="checkbox" name="firstcheck" />apple
<br />
<input type="checkbox" name="secondcheck" value="pear"/>pear
</form>
<form name="input", action="test1.html" method="post">
username:
<input type="text" name="user"/>
<input type="submit" value="submit" /><!-- 关于输入的数据处理，需要学习asp和php教程.现在需要掌握动作action这个用法-->
</form>
<form>
<select name="cars" ><!--别忘给列表命名-->
<option value="1">1</option>
<option value="2" selected="selected">2 </option>
<option value="3">3</option>
</select>
</form>
<br />
<form>
<input type="button" value="face" name="person" />
</form>
<textarea name="textarea" cols="10" rows="10">
we will win
</textarea>
<form>
<fieldset>
<legend>健康信息</legend><!--定义域的标题-->
身高：<input type="text" />
体重：<input type="text" />
</fieldset>
<!--fieldset 元素可将表单内的相关元素分组。
<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。
当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。
<fieldset> 标签没有必需的或唯一的属性。
<legend> 标签为 fieldset 元素定义标题-->
</form>
<form action="MAILTO:[email protected]" method="post" enctype="text/plain"><!--1 method是指定数据如何发送到服务器的一个属性
2 只可能是post和get post:官方解释是把数据通过post会话传送到服务器。实际就是提交数据。 get:将表单中数据的按照variable=value的形式，添加到action所指向的URL后面，并且两者使用“?”连接，而各个变量之间使用“&”连接；一般用来从服务器得到数据。
3,默认是get，所以一般我们都要指定为post,get会使输入的值在网站上显示.enctype为编码方式-->
<h3>这个表单会把电子邮件发送到 W3School。</h3>
姓名：<br />
<input type="text" name="name" value="yourname" size="20">
<br />
电邮：<br />
<input type="text" name="mail" value="yourmail" size="20">
<br />
内容：<br />
<input type="text" name="comment" value="yourcomment" size="40"><!--默认长度为20-->
<br /><br />
<input type="submit" value="发送">
<input type="reset" value="重置">
</form>
<br />
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select><!--通过 <optgroup> 标签把相关的选项组合在一起,注意里面的label标签的使用-->
<br />
<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form><!--请点击文本标记之一，就可以触发相关控件,注意for与id的对应-->
</body>
</html>
我觉得我应该把例子和注释放在一起，有利于我记忆和复习，这个是表单的练习，觉得很神奇，之前学java也能实现这些功能。所以说一定要多看多练习。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
