html个人信息表单,html个人信息页面
HTML表单
表单是用来填写并收集用户信息的单子,就像银行存款单一样。HTML中的表单也是这样,比如注册QQ时填写的信息,问卷调查等都是常见的HTML表单。
HTML中的表单通常写在form标签中。这是因为用户填写完相关的表单信息,需要将其发送到服务端,如果不用form标签包裹,那么可能出现发送的信息遗漏等问题。
Demo如下:
(1)form标签
Q1 post 和 get 方式提交数据有什么区别?
(2)input标签
Q2 input中的name属性作用
(3)select标签
(4)label标签
Q3 CSRF 攻击是什么?如何防范?
利用html和php 在用户登录页面 点击登录的button后,提交表单并转到用户个人信息页面(下面分别是php)
在php代码里,如果信息匹配成功,给一个跳转header("你个人信息地址"),很简单的。
需要一个HTML模板,用来做简单的表单数据录入
HTML做个数据录入的模板。如下参考:
1、首先新建一个html,点击body/body中间,先填入表格内容:
2.内容可根据要求编写,示例代码如下:
table
p style="text-align:center "功课表/p
tr
th语文/th
td7:00-7:40/td
td7:50-8:30/td
/tr
tr
th数学/th
td7:00-7:40/td
td7:50-8:30/td
/tr
tr
th英文/th
td7:00-7:40/td
td7:50-8:30/td
/tr
/table
3.然后在head/head中间输入样式表的样式,如下图:
4.样式也可以根据个人需要设置,设置单元格的宽度高度,合并单元格,位置,颜色等,示例代码如下:
style type="text/css"
body
{
width:340px;
height:800px;
}
table
{
border-collapse:collapse;
}
th,td
{
width:100px;
height:40px;
border:1pxsolidblack;
font-size:12px;
text-align:center;
}
/style
5.注意,此代码“table的意思是表”的含义是将表边框合并为单个边框以合并相邻的更改。
6.预览结果如下图所示,一个制作简单的HTML模板。
怎样用html写表单的教程
我们在浏览一些网站时经常会用到一种网页元素--表单。如下图,像这样允许用户输入并使用按钮提交信息的功能,我们称之为表单,那么接下来介绍HTML表单相关的一些知识点。
1)表单:帮助服务器收集客户端信息的一种机制
form?action="提交到的页面"?method="提交的方法"
表单控件
form
action:数据最后所提交的页面 绝对路径/相对路径
method:数据提交服务器时的提交方法 post get
2)表单控件:表单用于用户填写信息的控件
1、文本控件: 用于用户填写较少信息,且可以显示用户填写信息的控件
(注册时,用户名填写)
格式:
input?type="text"?name=""??id=""??value=""?size=""?placeholder=""/
type:设置控件样式 text
name:用于表单收集信息的一种标示符,也就是控件的名称
2、密码框:只是用户输入的内容看不到
input?type="password"?name=""?id=""??size=""/
3、单选按钮组:由多个单选按钮组成的按钮组,只能选中其中一个,这种按钮组
input?type='radio'?name=""?value=""?checked标示符
name:为了保证传递服务器数据只有一个,所以name值必须相同
value:是用提交服务器时,该标签被提交的数据,value不能相同;
checked:默认按钮组中的那个按钮被选中
性别:input?type='radio'?name=""?value=""?checked男
input?type='radio'?name=""?value=""?checked女
input?type='radio'?name=""?value=""?checked保密
所有表单控件name值不能相同!!!
4、复选按钮组: 与单选按钮组的区别可以选择多个,为了能将用户选择的多项内容传递服务器中,要将name名字后面加个[]
格式:
input?type='checkbox'?name=""?id=""?value=""?checked标示
选课:
input?type='checkbox'?name='classes[]'?checked?value='1'语文
input?type='checkbox'?name='classes[]'??value='2'数学
input?type='checkbox'?name='classes[]'??value='3'历史
input?type='checkbox'?name='classes[]'??value='4'政治
input?type='checkbox'?name='classes[]'??value='5'物理
input?type='checkbox'?name='classes[]'??value='6'化学
input?type='checkbox'?name='classes[]'?checked?value='7'美术
注意:一定要在name属性后面添加[]
5)下拉列表框:
格式:
select?name=""?
option?value=""?selected下拉列表项option
option?value=""?下拉列表项option
option?value=""?下拉列表项option
option?value=""?下拉列表项option
option?value=""?下拉列表项option
select
multiple:允许用户选中多个下拉列表项
optgroup: 设置下拉分类标示
6) 文本域:可以输入多行数据的表单控件
textarea?name=""?id=""?cols=""?rows=""
内容
textarea
rows:设置文本域可以输入的行数
cols:设置的文本域输入的列数(一行可以输入多少个字符)(不是PX)
个人介绍:
textarea?name='descs'?cols="50"?rows="10"
我是个学生
textarea
7)隐藏域:
input?type="hidden"?name?=?“”value?=””
8)上传控件:
input?type="file"?name=””
9)按钮标签:
普通按钮:为js提供的控件
input?type='button'?name=””?value=""/
value:按钮中显示的数据和提交到服务器后该控件提交的值
input?type='button'?name='clicks'?value="点我"/
提交按钮:点击后可以提交表单
input?type='submit'?name="add"?value='注册'/
重置按钮:点击后可以将用户输入的数据清空
input?type='reset'?name='cancel'?value='重置'
图片提交按钮:使用图片作为提交按钮
input?type='image'?src='图片地址'?name=””
本文的分享就到这,希望我的回答能帮到你。