html怎么定住form（html中怎么设置form的位置）

今天给各位分享html怎么定住form的知识，其中也会对html中怎么设置form的位置进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

微信号：cloud7591
如需了解更多，欢迎添加客服微信咨询。
复制微信号

本文目录一览：

• 1、html页面中，怎么能能让form表单在页面中居中，上下左右都居中。不分页面的大小，只在页面的中间显示
• 2、html怎么固定位置
• 3、怎样用html写表单的教程

html页面中，怎么能能让form表单在页面中居中，上下左右都居中。不分页面的大小，只在页面的中间显示

STYLE type="text/css"

#login{

width:400px;

height:280px;

position:absolute;

left: 50%;

top: 50%;

margin-left:-200px;

margin-top:-140px;

border:1px;

background-color:red;

align:center;

}

#form{

width:300px;

height:160px;

position:relative;

left:50%;

top:50%;

margin-left:-150px;

margin-top:-80px;

}

/STYLE

/head

body

div id="login"

div id="form"

s:form action=""

s:textfield name="username" label="用户名" /s:textfield

s:password name="password" label="密码" /s:password

s:select list="{}" listKey="1" listValue="1" label="用户类型"/s:select

tr align="center"

td colspan="2" align="center" valign="middle"

s:submit value="登录" theme="simple"/s:submit

s:reset value="重置" theme="simple"/s:reset /td

/tr

/s:form

/div

/div

/body

/html

原理就是使用两个div,一个是绝对定位，一个是相对定位，绝对定位用于控制在浏览器中位置；相对定们的div把表单包起来，控制让其居中。

html怎么固定位置

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的body标签中，输入html代码：button style="position: absolute;left: 250px;top: 40px;"按钮/button。

3、浏览器运行index.html页面，此时按钮被固定在距离上方40px，左侧250px的位置。

怎样用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=””

本文的分享就到这，希望我的回答能帮到你。

关于html怎么定住form和html中怎么设置form的位置的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。