前端开发 表单标签 完成一个简单登陆的效果 0228
分类:
文章
•
2024-02-16 13:03:28
表单标签的功能
![前端开发 表单标签 完成一个简单登陆的效果 0228 前端开发 表单标签 完成一个简单登陆的效果 0228](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzI3NC9mMDU1MzZhODk2M2M1YWZmYzRjYWQ0N2U5ZGFiMzhjYS5wbmc=)
提交数据给服务器
表单的基本结构
![前端开发 表单标签 完成一个简单登陆的效果 0228 前端开发 表单标签 完成一个简单登陆的效果 0228](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzQwOC82YjdjMWU2MzgzMDQyYzA0ZjgxOTE2M2FjZTk5OTc0OC5wbmc=)
格式各样的控件
![前端开发 表单标签 完成一个简单登陆的效果 0228 前端开发 表单标签 完成一个简单登陆的效果 0228](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzc2OC9jMTZjMjdkZjMxYzY1OWExYTBkOTlmN2NhZWQ0NjNkMC5wbmc=)
input标签的多样性
![前端开发 表单标签 完成一个简单登陆的效果 0228 前端开发 表单标签 完成一个简单登陆的效果 0228](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzYwOS8yMzgwODhiZDMzMjkxYzUxMTYxMDIwYjhjNjBlNzZhMS5wbmc=)
目标效果
![前端开发 表单标签 完成一个简单登陆的效果 0228 前端开发 表单标签 完成一个简单登陆的效果 0228](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzY2MC9mM2I1Mzc4OTdhYjc3N2YzMDUxYWMyYWJjNWZhNjMzYy5wbmc=)
表格的结构
![前端开发 表单标签 完成一个简单登陆的效果 0228 前端开发 表单标签 完成一个简单登陆的效果 0228](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzI0Mi9mN2VkMTNiZTI3ZmVkMGU3ZGJlMjQ1NDc0OGFmMGY4Mi5wbmc=)
设置宽高
![前端开发 表单标签 完成一个简单登陆的效果 0228 前端开发 表单标签 完成一个简单登陆的效果 0228](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzYyOC84YWRhM2IxZjgwMTE5YzcxYzRiYjllZmNiM2E1MTdiYy5wbmc=)
![前端开发 表单标签 完成一个简单登陆的效果 0228 前端开发 表单标签 完成一个简单登陆的效果 0228](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzUxNC85YTU4ODkxZjEwNDgxN2MxNzhmMTZlNTIyYTk3ZjcwMi5wbmc=)
合并单元格
![前端开发 表单标签 完成一个简单登陆的效果 0228 前端开发 表单标签 完成一个简单登陆的效果 0228](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzMyLzViNGM5YjUwZDMxYjRkMmZmYWU2ZjNjZmNhZTA3NmUwLnBuZw==)
![前端开发 表单标签 完成一个简单登陆的效果 0228 前端开发 表单标签 完成一个简单登陆的效果 0228](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzExMy80ZDQzMzMzNmE1MjM4MWZkMjBjYzMyNmNmZTA0MTY5OS5wbmc=)
继续合并单元格
![前端开发 表单标签 完成一个简单登陆的效果 0228 前端开发 表单标签 完成一个简单登陆的效果 0228](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzI2Mi85NDRiNzhmYzBlMjIzZGM3YWM5MGY5NjY5ZmUyODUwZS5wbmc=)
![前端开发 表单标签 完成一个简单登陆的效果 0228 前端开发 表单标签 完成一个简单登陆的效果 0228](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzgyNi8zYTlmOWQyNGFhNWVkMjFmYWU0N2RkZTJlMzA3ZTEwYS5wbmc=)
填写内容
![前端开发 表单标签 完成一个简单登陆的效果 0228 前端开发 表单标签 完成一个简单登陆的效果 0228](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzIyMi9hZTNkNGJhNTU4ODk3YTA5MGUzMDQ1ZWY3ZjliYWE1ZS5wbmc=)
、
插入表单控件
![前端开发 表单标签 完成一个简单登陆的效果 0228 前端开发 表单标签 完成一个简单登陆的效果 0228](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzg5OS81NTdmOWIyN2NmYjFlZGMzOGNlNjk2MjUzMGYwNWUwMy5wbmc=)
![前端开发 表单标签 完成一个简单登陆的效果 0228 前端开发 表单标签 完成一个简单登陆的效果 0228](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzUzNi9mYWIwMjYyZWEyMmM2OTJkODU5OTM5YjFmYjY3NWExMC5wbmc=)
按钮添加
![前端开发 表单标签 完成一个简单登陆的效果 0228 前端开发 表单标签 完成一个简单登陆的效果 0228](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzI1Lzg5OWQ1ZWM5ZWM0ODA4NjhlMzA1MjMyNTZmYWU5NWU5LnBuZw==)
![前端开发 表单标签 完成一个简单登陆的效果 0228 前端开发 表单标签 完成一个简单登陆的效果 0228](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzgvZDBjOWQxYzRjNzg0ZmMzNDI5MDBlNDFhZGNiZjc5MjAucG5n)
按钮居中
![前端开发 表单标签 完成一个简单登陆的效果 0228 前端开发 表单标签 完成一个简单登陆的效果 0228](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzg2MC9iNmYyNjVlZGZjN2M5OWZkMmYwYzg2Y2RlMmE0ZTJhYy5wbmc=)
用户名密码右对齐
![前端开发 表单标签 完成一个简单登陆的效果 0228 前端开发 表单标签 完成一个简单登陆的效果 0228](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzU5Mi9kNDE4NWU4NDg1NDVhY2ZjYTNhZGFkMGViOGY1YTUyMC5wbmc=)
![前端开发 表单标签 完成一个简单登陆的效果 0228 前端开发 表单标签 完成一个简单登陆的效果 0228](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzg4OC9jY2EwY2U2Mzk5NGE4MzBiM2EzOWRkNDgzYmVkZWNmMC5wbmc=)
总体信息居中
![前端开发 表单标签 完成一个简单登陆的效果 0228 前端开发 表单标签 完成一个简单登陆的效果 0228](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzY2NC8yNGRjMGU0NWY2MWYyMTQxNDQyZThjMmQ3NjNkZDc5OC5wbmc=)
![前端开发 表单标签 完成一个简单登陆的效果 0228 前端开发 表单标签 完成一个简单登陆的效果 0228](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzQ3NS8zNjQ4OGFiZmJjZGFmNjE2ODQ2NDQ4MjVkMDBkMTk4Yi5wbmc=)
让提交效果可用 form标签包裹
包裹前
![前端开发 表单标签 完成一个简单登陆的效果 0228 前端开发 表单标签 完成一个简单登陆的效果 0228](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzgxNi82ODc5NzY0YTVlOWMzMWY3MDk3NzdlZWM4OTllMDQ5MC5wbmc=)
包裹后
![前端开发 表单标签 完成一个简单登陆的效果 0228 前端开发 表单标签 完成一个简单登陆的效果 0228](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzk1Mi9lNDNmZTQ5YmRhOTk5NTdmNzNmNmYyZWE0MThmMDAxMC5wbmc=)
注意
提交需要用submit标签
表单提交的去向
form表单的
action属性
控制着表单提交的去向
![前端开发 表单标签 完成一个简单登陆的效果 0228 前端开发 表单标签 完成一个简单登陆的效果 0228](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzE5LzI4NzJkMWI2MzM1YWUyZjg3YjU1MGM4MGUwMDA4OWViLnBuZw==)
![前端开发 表单标签 完成一个简单登陆的效果 0228 前端开发 表单标签 完成一个简单登陆的效果 0228](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzY3OC83ZmQ3MDQ1ZGMwZmZiNWIxNDk1MmY5MDQ0MDBkMGUxZS5wbmc=)
问题
提交时没有数据传输过去
提交时带上数据
![前端开发 表单标签 完成一个简单登陆的效果 0228 前端开发 表单标签 完成一个简单登陆的效果 0228](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzM3Ny8wMWI4NjBkNmJiZmE2YzIzZjc0OWMxZTgxNzE1Njg4MS5wbmc=)
![前端开发 表单标签 完成一个简单登陆的效果 0228 前端开发 表单标签 完成一个简单登陆的效果 0228](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzgzNC82ZDA2MDdlOGM1NDZmM2U2MjM2YTNiNjE5OTg4NWJkYS5wbmc=)
重置按钮 type=‘reset’
具有清空控件数据的功能
![前端开发 表单标签 完成一个简单登陆的效果 0228 前端开发 表单标签 完成一个简单登陆的效果 0228](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzYxMS9jNjM3Mjg0NTM3ZmYwNDk0NDk5YTA4OTExYTlhZjViYi5wbmc=)
本节回顾
![前端开发 表单标签 完成一个简单登陆的效果 0228 前端开发 表单标签 完成一个简单登陆的效果 0228](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzY0Mi8wYTZlZjI4ZWZiZDk1ZjRhMmQ5MWUxNjQ1YjI0MTEyYS5wbmc=)
![前端开发 表单标签 完成一个简单登陆的效果 0228 前端开发 表单标签 完成一个简单登陆的效果 0228](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzIyOC8zZGE1MmE0NDE3MWI4MTk5MjEyMjM5OWI4ZDRkNjAzNC5wbmc=)