网页设计之路(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:someone@w3school.com.cn" 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也能实现这些功能。所以说一定要多看多练习。

原文地址:https://www.cnblogs.com/chufengpeng/p/4004135.html