<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单的使用示例</title>
</head>
<body>
<!--表单的应用，基础-->
<form name="form1" method="post" action="form_action.jsp" enctype="text/plain">
<h3>输入课程成绩</h3>
姓名：<input type="text"/><br/>
网页设计：<input type="text" size="15"/>
数据结构：<input type="text" size="15"/><br/><br/>
<input type="submit" value="成绩提交"/>
<input type="reset" value="成绩重置"/>
</form>
<!--运用<fieldset>标签功能，可以使数据被输入停留-->
<form align="center">
<fieldset>
<legend align="center">基本信息</legend>
姓名：<input name="name" type="text"/>
性别：<input name="sex" type="text"/>
</fieldset>
<fieldset>
身高：<input name="height" type="password"/>
体重：<input name="weight" type="text"/>
</fieldset>
</form>
<!--输入框-->
<!--输入框案列:<input name="a"(name负责给它一个名字，让它被定义,用于暂时储存数据，然后等待服务器响应)
type="text"（引号内表示这是一个单行的输入框，它只能输入一行，不能换行）
maxlength="5"（5表示输入框的内容长度最多为五个字符，不管是文字，字母，字符等）
size="20"（20表示的是输入框的长度，为20，如果数字变小的话输入框的长度也会变小）
value="0"（0表示输入框的内容默认为0，如果不更改的话就会以0显示）
readonly（如果在<input...>中输入此标签，那么输入框的内容就无法更改，而是一直以默认值显示，如果没有默认值就什么也不会显示）/>-->
单行文本输入框案列:<input name="danhan" type="text" maxlength="5" size="20" value="0" readonly/>
<p></p>
<!--密码输入框-->
<!--输入之后显示的内容是一个点，用于保护用户的隐私，但是旁边的小眼睛可以使用户确认是否无误-->
密码输入框:<input name="mima" type="password" maxlength="5" size="21"/>
<p></p>
<!--复选框-->
<!--<input name="fuxuan"（这个不用多说）
type="checkbox"（这个是<input>标记中type的属性，如果需要使用复选框的话需要填写此选项）
value="0"(此处的默认值不外显，但是是规定input的值，在使用复选框的时候，此处每一行的值都应该不一样)
checked（除了上面type的属性必须要打以外，这个标签也是必须要打的，用于对复选框的使用）/>-->
<p>
复选框：<input name="fuxuan" type="checkbox" value="0" checked/><br/>
愿意同意此选项：<input name="fuxuan1" type="checkbox" value="1" checked/><br/>
自愿选择：<input name="fuxuan2" type="checkbox" value="2" checked/><br/>
信任此渠道：<input name="fuxuan3" type="checkbox" value="3" checked/><br/>
我非常喜欢此选项<input name="fuxuan4" type="checkbox" value="4" checked/>
</p>
<!--单选按钮-->
<!--<input name="danxuan"（前面第一次介绍这个的时候有说，用于暂时储存数据。所以在单选框里面，所有的name都必须一样）
type="radio"（此处不多说，是type使用单选框必须要带的）
value="0"（默认值）
checked（除了上面type中的属性以外，此处的这个也必须要加）/>-->
<p>
单选（请选择您的序列号）:<input name="danxuank" type="checkbox" value="0" checked/><br/>
序列一：命定之眼<input name="danxuan" type="radio" value="0" checked/><br/>
序列二：牵魂梦绕<input name="danxuan" type="radio" value="0" checked/><br/>
序列三：茫然泰坦<input name="danxuan" type="radio" value="0" checked/><br/>
序列四：魂灭永续<input name="danxuan" type="radio" value="0" checked/><br/>
序列五：万物归恒<input name="danxuan" type="radio" value="0" checked/>
</p>
<!--图像按钮-->
<!--<input name="tuxiang"(不多说)(其实图像按钮就是插入了图片的提交按钮，可以使网页更加美观)
type="image"（必写的，是图像按钮的属性）
src="img/1.png"（img是图片路径的文档，src是按照路径找过去用的）
width="30" height="20"（在此处定义插入图片的宽和高，单位是像素点）/>-->
<input name="tuxiang" type="image" src="img/1.png" width="30" height="20"/>
<input type="submit" value="开始游戏"/>
<p></p>
<!--提交按钮-->
<!--<input name="tijiao"（不多说，前面也有详解的，分出来美观一点，我就不改了）
type="submit"（提交按钮的type属性，是必写的）
value="提交"（提交按钮的内容在这里被写入，可以将“提交”替换成任意字符，也是可以的）/>-->
<input name="tijiao" type="submit" value="提交"/>
<p></p>
<!--重置按钮-->
<!--<input name="chongzhi"(重置按钮可以清除输入选项框的内容，使选项框的内容为空或者默认值)
type="reset"（重置按钮的属性，不过重置按钮要放到相同的标签内才可以有效，不然的话重置是没有用的）
value="重置"（在此处定义按钮的名字）/>-->
<input name="chongzhi" type="reset" value="重置"/>
<p></p>
<!--普通按钮-->
<!--<input name="tupong"（同上...）
type="button"（普通按钮的type属性，也是必写的）
value="选项一"（是input标记的值，也是选项框的内容）
onclick=""（此处是普通按钮所绑定的事件代码，也可以是自定义函数或者其他的，因为我这里没有写，就不加入进去了）/>-->
<input name="tupong" type="button" value="选项一"/>
<p></p>
<!--文件选择框和隐藏框看看书写形式就好了，我们也还没有学到这里，暂时无法告知具体功能，但是帮助一些忽然忘记这上面部分知识的来说，还是可以的-->
<!--文件选择框-->
<!--<input name="wenjian"（定义input标记的名称）
type="file"（属性）（）
value=""（规定input标记的值）>-->
<input name="wenjian" type="file" value="1"/>
<!--隐藏框-->
<!--<input name="yincang" type="hidden" value="22"/>-->
<input name="yincang" type="hidden" value="22"/>
<!--下拉列表框-->
<!--select中有三个属性
name定义sele标记的名称
size下拉列表框可见的内容（旁边滑轮可以滑动内容）
miltiple规定可以选择多个选项
<option...>...</option>中有两个属性
value规定列表项的值
selected设置预选列的列表项
-->
<form>
<h3>请选择您的课程：</h3>
<select name="course" size="5" multiple>
<option value="c1" selected>...</option>
<option value="c2">...</option>
</form>
<p></p>
<!--多行文本输入框-->
<!--在上面有提到过单行输入框，它不能换行，只能输入一行-->
<!--<textarea（这个标记可以使输入框内输入多行）
name="duohang"（名字，就不多说了）
rows="100"（规定的是输入框内的可见行数）
cols="99"（规定的是输入框内的可见宽度）
wrap="virtual"(上文有说可见二字，因为有些是不会自动换行的，因为有不同的属性)/>
wrap:文本区会包含一行文本,用户必须将光标移动到右边才能看到全部文本,这时将把一行文本传送给服务器
virtual:将实现文本区内的自动换行,但在传输给服务器时,文本只在用户按下Enter键的地方进行换行,其他地方没有换行的效果
physical:将实现文本区内的自动换行,并以这种形式传送给服务器
off:不会自动换行,输入内容超出文本域右界时,文本将向左滚动,必须按Enter键才能将插入点移到下行。
HTML5中,
soft:表示提交时不换行,
hard:表示提交时换行
-->
<form>
<p>多行文本输入框：</p>
<textarea name="duohang" rows="5" cols="5" wrap="virtual">
</textarea>
</form>
</body>
</html>
扫一扫
1万+
05-24
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
