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

时间: 2024-11-05 17:26:02

网页设计之路(7)的相关文章

女友的“网页设计”之路

女友最近需要做一个网站,类型是艺术类的一个多图分享的网站.突出其艺术性和简洁性.她看了我之前做过的网站真是嗤之以鼻,说太古朴了.她可不知道后台服务和逻辑处理有多么复杂,反正外行就是只看画面,然后说这个那么简单你却做了那么久什么的.泪流满面. [小九的学堂,致力于以平凡的语言描述不平凡的技术.如要转载,请注明来源:小九的学堂.cnblogs.com/xfuture] 于是她就开始自己的网页设计探索之路. 首先她觉得自己需要一个很炫酷的开场,于是有了一个大概三秒的类似loading的画面.展示其强大

网页设计之路(8)

今天学习框架,慢慢理解后,觉得每个网页打开都是一个框架,其实里面可以有多个框架.更重要的是对name的用法有了更深刻的理解,元素有了名字才能寻找到,有利于区分其他元素.重点是一般框架和导航框架和内联框架,代码如下. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

网页设计之路(10)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--<!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前声明帮助浏览器正确地显示网页,不是 HTML 标签.它为浏览器提供一项信息(声明),即 HT

网页设计之路(11)

<!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-Typ

网页设计之路(6)

这次是布局的练习. 分别是div布局和table布局 div布局: <!DOCTYPE html><html><head><style type="text/css">div#container{width:500px}div#header {background-color:#99bbbb;}div#menu {background-color:#ffff99;height:200px;width:150px;float:left;}d

网页设计之路(3)

<!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-Typ

网页设计之路(5)

<!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-Typ

网页设计之路(2)

<!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><link rel="stylesheet" t

网页设计之路(4)

<!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-Typ

网页设计之路(1)

<!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-Ty