多个网站集成在一个页面,一个虚拟空间做两个网站,途牛网站大数据建设,杭州工作招聘网表单
form标签主要用于收集用户信息#xff0c;对表单结果的处理和发送
使用场景#xff1a;登录页面、注册页面、搜索区域
form属性描述action规定当提交表单时向何处发送表单数据method规定用于发送表单数据的 HTTP 方法name规定表单的名称target规定在何处打开 action …表单
form标签主要用于收集用户信息对表单结果的处理和发送
使用场景登录页面、注册页面、搜索区域
form属性描述action规定当提交表单时向何处发送表单数据method规定用于发送表单数据的 HTTP 方法name规定表单的名称target规定在何处打开 action URL。(_blank _self)
创建表单form
form name表单名 actionURL methodsget/post
/formaction属性指向服务器地址
input的type属性值
input根据不同的type属性值来定义不同的功能
input的type属性值描述text单行文本输入框number只能输入数字会出现数字增减按钮password密码输入框有的浏览器会有隐藏显示按钮radio单选按钮,checked属性在radio、checkbox中生效checkbox复选框reset重置按钮在form表单中才有作用要配合form使用value值默认为重置submit提交按钮在form中才有作用value值默认为提交button普通按钮默认无功能之后配合js添加功能以下为不常用的email邮箱输入框tel电话号输入框search搜索框会出现清空按钮date日期选择器month月份选择器week选择哪一年的第几周time时间选择器file选择文件空间用于上传文件image图片形式的提交按钮hidden隐藏的输入区域color让用户从拾色器中选择一个颜色
当input的属性typetext/password时的属性补充 autocompleteoff 关闭自动补全 readonly 设置为只读不能修改 disabled 设置为禁用 autofocus 自动获取焦点 placeholder 提示内容 maxlength“数字” 能够输入的最长字符 required 必填项不填写会报提示并且阻止用户的下一步操作 input标签的name属性
name属性的作用如下 表单提交当用户填写表单并提交时name属性指定的字段名称将与该字段的值一起作为键值对传递到服务器端。服务器端可以通过这个名称来获取对应字段的值以便处理用户提交的数据。 数据处理和服务器端编程在服务器端编程中可以使用name属性来标识和操作表单字段的值。在后端编程语言如PHP、Python或Java中可以使用表单字段的name属性来获取对应字段的值并进行相应的数据处理。 JavaScript操作通过name属性可以使用JavaScript来获取、修改或验证表单字段的值。例如使用document.getElementsByName()方法获取具有特定name属性的所有元素。 input标签的value属性 input 标签的 value 属性的作用是由 input 标签的 type 属性的值决定的 当 type 的取值为 button、reset、submit 中的其中一个时此时 value 属性的值表示的是按钮上显示的文本 当 type 的取值为 text、password、hidden 中的其中一个时此时 value 属性的值表示的是输入框中显示的初始值此初始值可以更改并且在提交表单时value 属性的值会发送给服务器既是初始值也是提交给服务器的值 当 type 的取值为 checkbox、radio 中的其中一个时此时 value 属性的值表示的是提交给服务器的值 typecheckbox时其 value 属性的值与单选框、复选框是否勾选有关。呈勾选状态时提交给服务器的数据值为true否则为false默认值为 false。 当 type 的取值为 image 时不能使用value属性点击它提交表单后会将用户的点击位置相对于图像左上角的 x 坐标和 y 坐标提交给服务器 typeimage 定义图像形式的提交按钮可以通过调整input的width和height来改变图片的大小。必须把 src 属性 和 alt 属性 input typeimage 结合使用alt 属性表示图片未正常显示时用于替换图片的提示如果不写这个属性当图片未正常显示时会默认显示提交这两个字 input typetext placeholder请输入
input typeimage src./d.jpeg titlesubmit alt提交 设置input标签格式
input 标签占位文本
占位文本提示信息文本框和密码框都可以使用。
input type... placeholder提示信息修改input输入框提示文字的样式
input::placeholder {font-size: 5px;color: rgb(190, 190, 190);
}去除input获取焦点时的边框 outline: none;修改input输入框提示文字
input{
text-indent: 5px; /*提示文字距离左边框的距离*/
font-size: 12px; /*提示文字大小*/
}单选框
常用属性
属性名作用描述name控件名称控件分组同组只能选中一个单选功能checked默认选中属性名和属性值相同简写为一个单词
input typeradio namegender checked 男
input typeradio namegender 女提示name 属性值自定义。 多选框
多选框也叫复选框默认选中checked。
input typecheckbox checked 我爱敲代码上传文件
默认情况下文件上传表单控件只能上传一个文件添加 multiple 属性可以实现文件多选功能。
input typefile !--上传单个文件--
input typefile multiple !--上传多个文件--
