2.7 表单-高二《Web前端开发-网页设计》同步精品课堂（电工版2023）

单元2 HTML基础 2.7 表单 主要内容 CONTENTS PART 01 <form>标签 PART 02 表单控件 2 表单 表单属于 HTML 文档的一部分，其中包含了如输入框、单选按钮、复选按钮、下拉列表、提交按钮等不同的表单控件。用户通过修改表单控件中的内容来完成表单输入，通过表单中的提交按钮可以将表单数据提交给后端程序。 <form>标签 <form action="result.html" method="post"> </form> action 属性 指定浏览者输入的表单数据被传送到哪个文件进行处理。 method 属性 表单数据的传送方式，属性值有get和post两种 4 <form method="get" action="result.html"> <p> 名字：<input name="name" type="text" > </p> <p> 密码：<input name="pass" type="password" > </p> <p> <input type="submit" name="button" value="提交"/> <input type="reset" name="reset" value="重填“/> </p> </form> <form>标签 【案例2.7.1】创建表单 表单的主要属性 属性 可选值 描述 action URL 设置要将表单提交到何处（默认为当前页面） autocomplete on、off 设置是否启用表单的自动完成功能（默认开启） enctype application/x-www-form-urlencoded、multipart/form-data、text/plain 设置在提交表单数据之前如何对数据进行编码（适用于 method="post" 的情况） method get、post 设置使用哪种 HTTP 方法来提交表单数据（默认为 get） name Text 设置表单的名称 novalidate Novalidate 如果使用该属性，则提交表单时不进行验证 target _blank、_self、_parent、_top 设置在何处打开 action 属性设定的链接（默认为 _self） 表单控件 表单控件是允许用户在表单中输入信息的表单元素 文本域 复选框 下拉列表 单选框 …… 所有表单元素都必须放在<form></form>标签之间。 <input type="控件类型"> 语法 注意 7 表单控件 <input type="text" name="userName" value="用户名" size="30" maxlength="20" /> 文本框 文本框名称 文本框初始值 文本框长度 文本框可输入最多字符 文本框 表单控件 <input type="password " name="pass" size="20" /> 密码框 密码框的名称 密码框的长度 密码框 表单控件 <input name="gen" type="radio" value="男" checked />男 <input name="gen" type="radio" value="女" />女 单选按钮 值 单选按钮选中状态 单选按钮 表单控件 <input type="checkbox" name="interest" value="sports"/>运动 <input type="checkbox" name="interest" value="read" checked />读书 <input type="checkbox" name="interest" value="play"/>玩游戏 复选按钮 值 复选框选中状态 复选按钮 表单控件 <form action="" method="post" enctype="multipart/form-data"> <p><input type="file" name="files" /> <input type="submit" name="upload" value="上传" /></p> </form> 文件域 表单编码属性 <input type="hidden" value="888" name="userid"> 隐藏域 文件域与隐藏域 表单控件 <select name="列表名称" size="行数"> <option value="选项的值" selected="selected">…</option > <option value="选项的值">…</option > </selec