在前端开发中经常使用到表单来向服务器传值.
form
form标签是一个表单标签的容器,该标签的开始和结束直接定义了一个表单.
- 属性name 定义改表单的名字
- method属性定义以什么方式向后台提交数据,一般使用post
- action属性指定以什么脚本来处理提交的数据
input
input是一个自结束标签.他可以制定表单中的许多元素.常用属性为name,type.
其中type属性的不同创建出的input也不同
- type="text" 这是一个文本框
- type="password"这是一个密码框
- type="radio" 这是一个单选按钮
- type="checkbox"这是一个多选按钮 value属性表示提交到服务器的值
- type="image"定义图片域 点击可以提交 其中包含src属性和width以及height属性
- type="file"定义文件域
- type="submit"定义提交按钮,其中id标签可定制按钮上显示的文字
- type="reset"表示充值所有表单数据
- type="button"表示一个按钮,按钮的功能可以使用js定制
- type="hidden"隐藏域
input的一些属性
当input为输入框的时候可以使用maxlength指定文本框的最大输入长度,readonly表示不可输入 size指定根据输入长度指定框的size
当input为按钮的时候使用checked订制默认选中,disabled指定可选状态
button
button标签可以格式化按钮上的文字,type属性可以使用submit,reset和button指定与input同样的功能.
select
select可以定制列表框,下拉菜单和选项组列表框.当select为列表框和选项组列表框的时候可以指定列表框的size以及多选状态mutiple
option为列表框中的元素.value属性指定提交到服务器的值,selected属性指定默认选中的元素
optgroup为选项组,其中label属性表示该组的名字.
textarea
多行文本框
- cols必填属性指定高度问多少字符
- rows必填属性指定宽度
- readonly指定改文本框为只读
示例代码
<!DOCTYPE Html>
<html>
<head>
<title>Joe</title>
</head>
<body>
<form name="regform" method="post" action="http://www.baidu.com"/>
单行文本框<input type="text" name="username" id="username" maxlength="10" readonly="readonly"/> <br/>
<label for="password">密码框</label><input type="password" name="password" id="password" size="5"/> <br/>
隐藏域<input type="hidden" name="hidden" id="hidden"/> <br/>
单选按钮<input type="radio" name="sex" id="male" checked="checked"/> 男
<input type="radio" name="sex" id="female"/> 女<br/>
复选框<input type="checkbox" name="hobby" value ="1" id="hfootball" disabled="disabled"/> 足球
<input type="checkbox" name="hobby" value ="2" id="hfootball" checked="checked"/> 篮球
<input type="checkbox" name="hobby" value ="3" id="hfootball"/> 网球<br/>
图像域<input type="image" src="album.png" width="100px" height="20px" name="hobby" id="hfootball"/><br/>
文件上传域<input type="file" name="file" id="file"/><br/>
提交按钮<input type="submit" name="submit" id="提交按钮"/><br/>
充值按钮<input type="reset" name="reset" id="重置按钮"/><br/>
普通按钮<input type="button" name="button" id="普通按钮"/><br/>
button提交按钮<button type="submit" name="submit2">提交按钮</button><br/>
button重置按钮<button type="reset" name="reset2"><b>重置按钮</b></button><br/>
button普通按钮<button type="button" name="button2" disabled="disabled"><i>普通按钮</i></button><br/>
下拉菜单<br/>
<select name="city" id="city">
<option value="beijing">北京</option>
<option>上海</option>
<option selected="selected">南京</option>
<option>天津</option>
</select>
<br/>
列表框<br/>
<select name="city1" id="city1" size="3" mutiple="mutiple">
<option value="beijing">北京</option>
<option>上海</option>
<option selected="selected">南京</option>
<option>天津</option>
</select>
<br/>
选项组列表框<br/>
<select name="city2" id="city2" size="6" mutiple="mutiple">
<optgroup label="一线城市">
<option value="beijing">北京</option>
<option>上海</option>
</optgroup>
<optgroup label="二线城市">
<option>南京</option>
<option>杭州</option>
<option>大连</option>
</optgroup>
</select>
<br/>
多行文本框<br/>
<textarea name="content" cols="28" rows="4" readonly="readonly">
1. 协议要求很多
2. 你别管,只要同意即可
</textarea>
</form>
</body>
</html>
