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>
复制
效果图: