表单标记
<form></form>定义表单的开始位置和结束位置，表单提交时的内容就是<form>表单中的内容。
基本格式
<form action=”服务器端地址（接受表单内容的地址）” name=”表单单名称” method=”post|get”>…</form>
属性
name
表单名称
method
- get方式：会将表单的内容附加在URL地址的后面，所以限制了提交的内容的长度，不超过8192个字符，且不具备保密性
- post方式：将表单中的数据一并包含在表单主题中，一起传送到服务器中处理，没有数据大小限制。
action
表单数据的处理程序URL地址，如果为空则使用当前文档的URL地址，如果变淡中不需要使用action属性也要指定其属性为”no”
enctype
设置变淡的资料的编码方式
target
和超链接的属于类似，用于指定目标窗口
<input>标记
type属性
- text：当type=”text”时，<input>表示一个文本的输入域
- password:当type=”password”时,<input>表示一个密码的输入域
代码
<body>
<form>
姓名：<input type="text" name="name"><br/>
密码：<input type="password" name="password">
</form>
</body>显示结果
name属性
定义控件的名称
value属性
初始化值，打开浏览器时，文本框中的内容
代码
<body>
<form>
姓名：<input type="text" name="name" value="这是默认的值"><br/>
密码：<input type="password" name="password">
</form>
</body>显示结果
size属性
设置控件的长度
代码
<body>
<form>
姓名：<input type="text" name="name" value="这是默认的值" size="10"><br/>
密码：<input type="password" name="password" size="5">
</form>
</body>显示结果
maxlenght属性
输入框中最大允许输入的字符数
提交 重置 普通按钮
- 当<input type=”submit”>时，为提交按钮
- 当<input type=”reset”>时，为重置按钮
- 当<input type=”button”>时，为普通按钮
代码
<body>
<form>
姓名：<input type="text" name="name" value="这是默认的值" size="10"><br/>
密码：<input type="password" name="password" size="5"><br/>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="普通按钮">
</form>
</body>点击提交默认提交到当前页面
设置action
代码
<body>
<form action="demo2.html">
姓名：<input type="text" name="name" value="这是默认的值" size="10"><br/>
密码：<input type="password" name="password" size="5"><br/>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="普通按钮">
</form>
</body>点击提交显示结果，提交到action地址
设置post提交
代码
<body>
<form method="post">
姓名：<input type="text" name="name" value="这是默认的值" size="10"><br/>
密码：<input type="password" name="password" size="5"><br/>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="普通按钮">
</form>
</body>点击提交后地址栏不会有参数暴露
单选框和复选框
单选按钮
当<input type=”radio”>时，为单选按钮
代码
name设置一样可单选 checked为默认选择项
<body>
<form method="post">
姓名：<input type="text" name="name" value="这是默认的值" size="10"><br/>
密码：<input type="password" name="password" size="5"><br/>
性别<input type="radio" name="sex" checked> 男 <input type="radio" name="sex"> 女<br/>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="普通按钮">
</form>
</body>显示结果
复选框
当<input type=”checkbox”>时，为复选框
代码
<body>
<form method="post">
姓名：<input type="text" name="name" value="这是默认的值" size="10"><br/>
密码：<input type="password" name="password" size="5"><br/>
性别<input type="radio" name="sex" checked> 男 <input type="radio" name="sex"> 女<br/>
爱好：<input type="checkbox" name="zuqiu" checked> 足球
<input type="checkbox" name="lanqiu" > 篮球
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="普通按钮">
</form>
</body>显示结果
注意
单选框和复选框都可以使用”cheked”属性来设置默认选中项
隐藏域
当<input type=”hidden”>时，为隐藏表单域
代码
<body>
<form >
姓名：<input type="text" name="name" value="这是默认的值" size="10"><br/>
密码：<input type="password" name="password" size="5"><br/>
性别<input type="radio" name="sex" checked> 男 <input type="radio" name="sex"> 女<br/>
爱好：<input type="checkbox" name="zuqiu" checked> 足球
<input type="checkbox" name="lanqiu" > 篮球
<input type="hidden" value="隐藏的内容" name="hide" size=10>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="普通按钮">
</form>
</body>显示结果，界面中不会显示隐藏的内容，单机提交会进行提交
多行文本域
用法
使用<textarea>标记可以实现一个，能够输入多行文本的区域
语法格式
<textarea name=”name” rows=”value” cols=”value” value=”value” >……</textarea>
rows属性和cosl属性分别用来指定，显示的行数和猎术，单位是个数
代码
<body>
<form >
姓名：<input type="text" name="name" value="这是默认的值" size="10"><br/>
密码：<input type="password" name="password" size="5"><br/>
性别<input type="radio" name="sex" checked> 男 <input type="radio" name="sex"> 女<br/>
爱好：<input type="checkbox" name="zuqiu" checked> 足球
<input type="checkbox" name="lanqiu" > 篮球
<input type="hidden" value="隐藏的内容" name="hide" size=10><br/>
自我介绍<br/>
<textarea cols="35" rows="10" name="me">
</textarea><br/>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="普通按钮">
</form>
</body>显示结果
菜单下拉列表域
语法格式
<select name="" size="value" multiple
<option value="value" selected>选项1</option>
<option value="value" >选项2</option>
<option value="value" >选项3</option>
......
</select>
option标记
<option>用来指定列表中的一个选项，需要放在<select></select>之间
- value：给选项赋值，指定传送到服务器上面的值
- selected：指定默认的选项
代码
<body>
<form >
姓名：<input type="text" name="name" value="这是默认的值" size="10"><br/>
密码：<input type="password" name="password" size="5"><br/>
性别<input type="radio" name="sex" checked> 男 <input type="radio" name="sex"> 女<br/>
爱好：<input type="checkbox" name="zuqiu" checked> 足球
<input type="checkbox" name="lanqiu" > 篮球
<input type="hidden" value="隐藏的内容" name="hide" size=10><br/>
自我介绍<br/>
<textarea cols="35" rows="10" name="me">
</textarea><br/>
地址：<br/>
<select name="address">
<option>上海</option>
<option>北京</option>
</select><br/>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="普通按钮">
</form>
</body>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
