栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > 后端开发 > Java

HTML 表单

Java 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

HTML 表单

使用表单目的是为了收集用户信息。

在我们网页中,我们也需要跟用户进行交互,收集用户资料,此时就需要表单。

表单的组成

​ 在HTML中,一个完整的表单通常由表单域、表单控件(也称为表单元素) 和提示信息3个部分构成。

表单域

表单域是一个包含表单元素的区域。

在HTML标签中,

标签用于定义表单域,以实现用户信息的收集和传递。
会把它范围内的表单元素信息提交给服务器。


	各种表单元素控件

常用属性:

属性属性值作用
actionurl地址用于指定接收并处理表单数据的服务器程序的url地址。
methodget/post用于设置表单数据的提交方式,其取值为get或post。
name名称用于指定表单的名称,以区分同一个页面中的多个表单域。
表单元素(表单控件) 1.表单元素

在英文单词中,input是输入的意思,而在表单元素中标签用于收集用户信息。

在标签中,包含一个 type 属性。

根据不同的 type 属性值,输入字段拥有很多种形式 (可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等)。


注意:

​ 标签为单标签。

​ type 属性设置不同的属性值用来指定不同的控件类型。

​ type 属性的属性值及其描述如下:

属性值描述
button定义可点击按钮(多数情况下,用于通过 JavaScript 启动脚本)。
checkbox定义复选框。
file定义输入字段和"浏览"按钮,供文件上传。
hidden定义隐藏的输入字段。
image定义图像形式的提交按钮。
password定义密码字段。该字段中的字符被掩码。
radio定义单选按钮。
reset定义重置按钮。重置按钮会清除表单中的所有数据。
submit定义提交按钮。提交按钮会把表单数据发送到服务器。
text定义单行的输入字段,用户可在其中输入文本。默认宽度为20个字符。

除type属性外,标签还有其他很多属性,其常用属性如下∶

属性属性值描述
name由用户自定义定义 input 元素的名称。
value由用户自定义规定 input 元素的值。
checkedchecked规定此 input 元素首次加载时应当被选中。
maxlength正整数规定输入字段中的字符的最大长度。
  1. name 和 value 是每个表单元素都有的属性值,主要给后台人员使用。
  2. name 表单元素的名字,要求同一组单选按钮和复选框要有相同的name 值。
    3. checked 属性主要针对于单选按钮和复选框,主要作用是一打开页面,就可以默认选中某个表单元素。
  3. maxlength 是用户可以在表单元素输入的最大字符数,一般较少使用。
用户名:
密码:
性别:男 女
爱好:吃饭 睡觉 打豆豆



上传头像:
HTML5 新增 input 表单
属性值说明
type=“email”限制用户输入必须为Email类型
type=“url”限制用户输入必须为URL类型
type=“date”限制用户输入必须为日期类型
type=“time”限制用户输入必须为时间类型
type=“month””限制用户输入必须为月类型
type=“week”限制用户输入必须为周类型
type=“number”限制用户输入必须为数字类型
type=“tel”手机号码
type=“search”搜索框
type=“color”生成一个颜色选择表单
HTML5 新增表单属性
属性值说明
requiredrequired表单拥有该属性表示其内容不能为空,为必填内容
placeholder提示文本表单的提示信息,存在默认值将不显示
autofocusautofocus自动聚焦属性,页面加载完成自动聚焦到指定表单
autocompleteoff / on当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项。
默认已经打开,如 autocomplete="on”,关闭 autocomplete =“off” 需要放在表单内,同时加上name属性,同时成功提交
multiplemultiple可以多选文件提交

可以通过以下设置方式修改 placeholder 里面的字体颜色:

input::placeholder {
	color: pink;
}
2.