1、表单
表单控件:包含了具体的表单功能项,如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
提示信息:一个表单中通常需要包含一些说明性的文字,提示用户进行填写和操作。
表单域:相当于一个容器,用来容纳所有的表单控件和提示信息。
2、创建表单
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
表单控件:表单控件是表单的核心部分,常见的表单控件有、、。
action:action属性用于指定接收并处理表单数据的服务器程序的url地址。
method:method属性用于设置表单数据的提交方式,其取值为get或post。
name:name属性用于指定表单的名称,以区分同一个页面中的多个表单。
3、input控件
浏览网页时经常会看到单行文本输入框、单选按钮、复选框、提交按钮、重置按钮等,要想定义这些元素就需要使用input控件。
<input type="控件类型"/>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>input控件</title>
</head>
<body>
<form action="#" method="post">
用户名: <!--text单行文本输入框-->
<input type="text" value="张三" maxlength="6" /><br /><br />
密码: <!--password密码输入框-->
<input type="password" size="40" /><br /><br />
性别: <!--radio单选按钮-->
<input type="radio" name="sex" checked="checked" />男
<input type="radio" name="sex" />女<br /><br />
兴趣: <!--checkbox复选框-->
<input type="checkbox" />唱歌
<input type="checkbox" />跳舞
<input type="checkbox" />游泳<br /><br />
上传头像:
<input type="file" /><br /><br /> <!--file文件域-->
<input type="submit" /> <!--submit提交按钮-->
<input type="reset" /> <!--reset重置按钮-->
<input type="button" value="普通按钮" /> <!--button普通按钮-->
<input type="image" src="img/login.gif" /> <!--image图像域-->
<input type="hidden" /> <!--hidden隐藏域-->
</form>
</body>
效果图:
4、textarea控件
<textarea cols="每行中的字符数" rows="显示的行数">
文本内容
</textarea>
cols和rows为< textarea>标记的必须属性,其中cols用来定义多行文本输入框每行中的字符数,rows用来定义多行文本输入框显示的行数,取值均为正整数。
<body>
<form action="#" method="post">
评论:<br />
<textarea cols="60" rows="8">
评论的时候,请遵纪守法并注意语言文明,多给文档分享人一些支持。
</textarea><br /><br />
<input type="submit" value="提交"/>
</form>
</body>
效果图:
5、select控件
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
<body>
<form action="#" method="post">
所在校区:<br />
<select> <!--最基本的下拉菜单-->
<option>-请选择-</option>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>武汉</option>
<option>成都</option>
</select><br /><br />
特长(单选):<br />
<select>
<option>唱歌</option>
<option selected="selected">画画</option> <!--设置默认选中项-->
<option>跳舞</option>
</select><br /><br />
爱好(多选):<br />
<select multiple="multiple" size="4"> <!--设置多选和可见选项数-->
<option>读书</option>
<option selected="selected">写代码</option> <!--设置默认选中项-->
<option>旅行</option>
<option selected="selected">听音乐</option> <!--设置默认选中项-->
<option>踢球</option>
</select><br /><br />
<input type="submit" value="提交"/>
</form>
</body>
效果图: