HTMLCSS（简单表单标签的制作）
表单标签的基本属性
input type = “text” 文本输入框 value设置默认显示内容
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title>HTML &&CSS</title>
</head><body><form>用户名：<input type = "text"/ value="请输入你的名字"/></form></body>
input type = “password” 是密码框 value设置默认显示内容
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title>HTML &&CSS</title>
</head><body><form>用户名：<input type = "text"/ value="请输入你的名字"/><br/>密码：<input type="password" value="请输入你的密码"/></form></body>
input type = “redio” 是单选框 name属性可以对其进行分组 checked="checked"表示默认选中
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title>HTML &&CSS</title>
</head><body><form>用户名：<input type = "text"/ value="请输入你的名字"/><br/>密码：<input type="password" value="请输入你的密码"/><br/>性别：<input type="radio" name = "sex"/>男<input type="radio" name = "sex" checked="checked"/>女<br/></form></body>
Input type=“checkbox” 复选框
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title>HTML &&CSS</title>
</head><body><form>用户名：<input type = "text"/ value="请输入你的名字"/><br/>密码：<input type="password" value="请输入你的密码"/><br/>性别：<input type="radio" name = "sex"/>男<input type="radio" name = "sex" checked="checked"/>女<br/>你最喜欢的语言是<br/><input type="checkbox" checked="checked"/>java<input type="checkbox" />python<input type="checkbox" />c++</form></body>
Input type=“reset” 是重置按钮 value属性修改按钮上的文本
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title>HTML &&CSS</title>
</head><body><form>用户名：<input type = "text"/ value="请输入你的名字"/><br/>密码：<input type="password" value="请输入你的密码"/><br/>性别：<input type="radio" name = "sex"/>男<input type="radio" name = "sex" checked="checked"/>女<br/>你最喜欢的语言是<br/><input type="checkbox" checked="checked"/>java<input type="checkbox" />python<input type="checkbox" />c++<br/><input type="reset" value="重置"/></form></body>这是点击重置按钮之前的页面
这是点击了重置按钮后的页面，都编程了页面设置的默认初始值
Input type=“submit” 是提交按钮 value属性修改按钮上的文本
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title>HTML &&CSS</title>
</head><body><form>用户名：<input type = "text"/ value="请输入你的名字"/><br/>密码：<input type="password" value="请输入你的密码"/><br/>性别：<input type="radio" name = "sex"/>男<input type="radio" name = "sex" checked="checked"/>女<br/>你最喜欢的语言是<br/><input type="checkbox" checked="checked"/>java<input type="checkbox" />python<input type="checkbox" />c++<br/><input type="reset" value="重置"/><br/><input type="submit" value="提交"/><br/></form></body>
点击提交按钮之后url地址栏就多出了一串内容，这就说名提交成功，这里默认用的是GET方式提交，所以url地址栏会显示，这里后面会提及到，现在不用管
Input type=“button” 是按钮 value属性可以修改按钮上的文本
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title>HTML &&CSS</title>
</head><body><form>用户名：<input type = "text"/ value="请输入你的名字"/><br/>密码：<input type="password" value="请输入你的密码"/><br/>性别：<input type="radio" name = "sex"/>男<input type="radio" name = "sex" checked="checked"/>女<br/>你最喜欢的语言是<br/><input type="checkbox" checked="checked"/>java<input type="checkbox" />python<input type="checkbox" />c++<br/><input type="reset" value="重置"/><br/><input type="submit" value="提交"/><br/><input type="button" value="保存到草稿箱"/></form></body>
Input type=“file” 是文本上传域
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title>HTML &&CSS</title>
</head><body><form>用户名：<input type = "text"/ value="请输入你的名字"/><br/>密码：<input type="password" value="请输入你的密码"/><br/>性别：<input type="radio" name = "sex"/>男<input type="radio" name = "sex" checked="checked"/>女<br/>你最喜欢的语言是<br/><input type="checkbox" checked="checked"/>java<input type="checkbox" />python<input type="checkbox" />c++<br/><input type="reset" value="重置"/><br/><input type="submit" value="提交"/><br/><input type="button" value="保存到草稿箱"/><br/><input type="file"/></form></body>
点击选择文件按钮后就会自动弹出选择文件的对话框
Input type=“hidden” 是隐藏域 当我们要发送某些信息，而这些信息，不需要用户参与，就可以使用隐藏域（提交的时候同时发展送给服务器）
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title>HTML &&CSS</title>
</head><body><form>用户名：<input type = "text"/ value="请输入你的名字"/><br/>密码：<input type="password" value="请输入你的密码"/><br/>性别：<input type="radio" name = "sex"/>男<input type="radio" name = "sex" checked="checked"/>女<br/>你最喜欢的语言是<br/><input type="checkbox" checked="checked"/>java<input type="checkbox" />python<input type="checkbox" />c++<br/><input type="reset" value="重置"/><br/><input type="submit" value="提交"/><br/><input type="button" value="保存到草稿箱"/><br/><input type="hidden"/><input type="file" name="abc" value ="acc"/></form></body>网页上并不会显示隐藏域
select 标签是下拉列表框
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title>HTML &&CSS</title>
</head><body><form>用户名：<input type = "text"/ value="请输入你的名字"/><br/>密码：<input type="password" value="请输入你的密码"/><br/>性别：<input type="radio" name = "sex"/>男<input type="radio" name = "sex" checked="checked"/>女<br/>你最喜欢的语言是<br/><input type="checkbox" checked="checked"/>java<input type="checkbox" />python<input type="checkbox" />c++<br/><input type="reset" value="重置"/><br/><input type="submit" value="提交"/><br/><input type="button" value="保存到草稿箱"/><br/>国籍：<select><option>--请选择国籍--<option/><option>中国<option/><option>俄罗斯<option/><option>巴基斯坦<option/><select/></form>
</body>
textarea 标签表示多行文本输框
rows属性设置可以显示几行的高度
cols属性设置每行可以显示几个字符宽度``
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title>HTML &&CSS</title>
</head><body><form>用户名：<input type = "text"/ value="请输入你的名字"/><br/>密码：<input type="password" value="请输入你的密码"/><br/>性别：<input type="radio" name = "sex"/>男<input type="radio" name = "sex" checked="checked"/>女<br/>你最喜欢的语言是<br/><input type="checkbox" checked="checked"/>java<input type="checkbox" />python<input type="checkbox" />c++<br/><input type="reset" value="重置"/><br/><input type="submit" value="提交"/><br/><input type="button" value="保存到草稿箱"/><br/>国籍：<select><option>--请选择国籍--<option/><option>中国<option/><option>俄罗斯<option/><option>巴基斯坦<option/><select/><br/>自我评价：<textarea rows="5" cols="20">请进行客观的评价</textarea></form>
</body>
目前一个简单的表单提交的页面就已经做好了，但是这个样式有点不太美观，我们可以用table标签来给页面更加格式化，更美观
table标签是表格标签
tr是行标签
th是列标签
td是单元格标签
b标签是加粗标签
colspan属性设置跨行
rowspan属性设置跨行
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title>HTML &&CSS</title>
</head><body><form><table><tr><td>用户名：</td><td><input type = "text"/ value="请输入你的名字"/></td></tr><tr><td>密码：</td><td><input type="password" value="请输入你的密码"/></td></tr><tr><td>性别：</td><td><input type="radio" name = "sex"/>男<input type="radio" name = "sex" checked="checked"/>女</td></tr><tr><td>你最喜欢的语言是</td><td><input type="checkbox" checked="checked"/>java<input type="checkbox" />python<input type="checkbox" />c++</td></tr><tr><td>国籍：</td><td><select><option>--请选择国籍--<option/><option>中国<option/><option>俄罗斯<option/><option>巴基斯坦<option/><select/></td></tr><tr><td>自我评价：</td><td><textarea rows="5" cols="20">请进行客观的评价</textarea></td></tr><tr><td><input type="reset" value="重置"/></td><td><input type="button" value="保存到草稿箱"/></td><td><input type="submit" value="提交"/></td></tr></table></form></body>
表单提交的时候，数据没有发送给服务器的三种情况
1，表单没有name属性值
2，单选，复选（下拉列表中的option标签）都需要添加value属性，以便发送给服务器
3，表单项不在提交的from标签中
GET请求的特点：
1，浏览器地址栏中的地址是action属性[+?+请求参数]
请求参数的格式是：name=value&name=value
2，不安全
3，他有数据长度的限制
POST请求的特点：
1，浏览器地址栏中只有action属性
2，相对于GET请求要安全
action属性设置提交的服务器网址
method属性设置设置提交的方式GET（默认值）或POST
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title>HTML &&CSS</title>
</head><body><form action="http://localhost:8080" method="post"><input type="hidden" name="action" value="login"/><table><tr><td>用户名：</td><td><input type = "text"/ value="请输入你的名字"/></td></tr><tr><td>密码：</td><td><input type="password" value="请输入你的密码"/></td></tr><tr><td>性别：</td><td><input type="radio" name = "sex"/>男<input type="radio" name = "sex" checked="checked"/>女</td></tr><tr><td>你最喜欢的语言是</td><td><input type="checkbox" checked="checked"/>java<input type="checkbox" />python<input type="checkbox" />c++</td></tr><tr><td>国籍：</td><td><select name="country"><option>--请选择国籍--<option/><option>中国<option/><option>俄罗斯<option/><option>巴基斯坦<option/><select/></td></tr><tr><td>自我评价：</td><td><textarea name="desc" rows="5" cols="20">请进行客观的评价</textarea></td></tr><tr><td><input type="reset" value="重置"/></td><td><input type="button" value="保存到草稿箱"/></td><td><input type="submit" value="提交"/></td></tr></table></form></body>现在点击提交按钮，页面就会把数据提交到http://localhost:8080的位置，并且不会在url地址栏里面显示提交的内容，保护了用户的隐私，
HTMLCSS（简单表单标签的制作）相关推荐
- 利用html开发英语单词小程,前端利用表单标签自己制作一个简单的表单页面-表单制作-小程序表单制作...
html中的表单标签:form标签:属性:提交到后台url地址:actionurl地址:http://localhost:8080/XXX提交方式:method常用两个:get:把提交的数据放到地址栏 ...
- 使用H5中的表单标签制作一个简单的网页登陆页面
简单介绍H5当中的表单标签.<form></form>表示定义一个表单的开始和结束.在form标签中,有主要的三个属性,action表示声明表单中的数据的处理的url地址.me ...
- dwcc2015如何制作html,Dreamweaver CC2015简单表单的创建方法
Dreamweaver CC 2015 官方正式版 软件大小:249M授权方式:免费软件 立即下载 Dreamweaver CC2015怎么创建简单的表单?Dreamweaver集网页制作和管理网站于 ...
- 前端开发 表单标签 完成一个简单登陆的效果 0228
表单标签的功能 提交数据给服务器 表单的基本结构 格式各样的控件 input标签的多样性 目标效果 表格的结构 设置宽高 合并单元格 继续合并单元格 填写内容 . 插入表单控件 按钮添加 按钮居中 用 ...
- form表单标签的简单使用
文章目录 form表单标签``: - 1.作用:收集客户信息 注意:在写radio,checkbox(单选,多选)的时候,**一定要写name和value**:name属性是分组,value属性设置值 ...
- 表单标签实现简单的登陆页面
一.表单标签 1.表单作用:收集用户信息 method="get或者post" action="向何处发送表单数据" input 里面包含的标签内容: A．属性 ...
- 03表格和表单标签的简单使用
表格和表单标签 一.表格 01.table标签 tr:表示一行 th(table head):表示表头的单元格 td(table body):表示单元格 border="1" :给 ...
- python全栈开发 * 表格标签 表单标签 css 引入方式 * 180807
html部分 一.表格标签<table> 1.一个表格<table>由每行<tr>组成的,每行是由<td>组成的. 注意: 一个表格是由行组成的(行是由 ...
- 用java写注册表单_利用HTML表单标签编写一个注册页面
今天我们来写一个注册页面 form表单 先来利用表单标签制作一个简单的注册页面,给大家说说标签的结构: 页面结构大体就是这样子的~ 利用HTML表单标签编写一个注册页面 表单标签: 所有需要提交到服务 ...
最新文章
- GPM - 多语言实现视频
- 用C语言实现三子棋游戏
- 网页设计相关计算机语言,title(计算机语言)
- 在idea里如何实现Git项目回滚
- Java多线程之静态代理
- 【渝粤教育】国家开放大学2018年秋季 0630-22T环境法学 参考试题
- 机器学习常用的算法整理：线性回归、逻辑回归、贝叶斯分类、支持向量机、K-means聚类、决策树、随机森林以及常用的应用场景整理
- html-下拉框、文本域、文件域
- 设置html按钮点击事件无效果,css怎么设置按钮不能点击？
- python画棒棒糖程序_python之turtle简单绘制学习
- DEFCON China倒计时 没想到炸屏“玩坏”百度
- 用PHPphpstudy写一个可以登录的简单网页
- 网吧免费上网的7种武器
- 布局区块链数据中心的互联在线，积极筹备精选层
- dell服务器报错信息,DELL 服务器LED屏报错信息 2012版
- java——博弈算法实现井字棋游戏
- Spark SQL中StructField和StructType
- 编译内核时bad register name `%dil'错误
- 作为硬件开发，你一定要知道开发板是个什么东西？陈老师带你了解
- 腾讯、网易云、字节跳动面试点总结—AMS在Android起到什么作用?