HTML基础知识之表单
发布时间:2025-09-01 00:23:41
作者:益华网络
来源:undefined
浏览量(0)
点赞(0)
摘要:表单的用途非常广泛,比如电子邮箱、用户注册登录、网上搜索等,简单来说,表单是一个将用户信息阻止起来的容器; 一、表单标签及属性 <form>标签就
表单的用途非常广泛,比如电子邮箱、用户注册登录、网上搜索等,简单来说,表单是一个将用户信息阻止起来的容器;
一、表单标签及属性
<form>标签就是表单标签,该标签用于在网页中创建表单区域,属于一个容器标签; action:表单的属性之一,用于指示服务器上处理表单输出的程序; method:表单属性之一,此属性告诉浏览器如何将数据发送给服务起,指定向服务器发送数据的方法,是用post或者get; <form action="#" method="post"> <p>密码:<input type="text" name="pwd"></p> <p> <input type="submit" value="提交"/> <input type="reset" value="重填"/> </p> </form>
1.png
二、GET 方法和POST 方法的区别
Get方法:
GET 请求可被缓存; GET 请求保留在浏览器历史记录中; GET 请求可被收藏为书签; GET 请求不应在处理敏感数据时使用; GET 请求有长度限制; GET 请求只应当用于取回数据;POST方法:
POST 请求不会被缓存; POST 请求不会保留在浏览器历史记录中; POST 不能被收藏为书签; POST 请求对数据长度没有要求;三、表单元素
<form action="#" method="post" style="margin:0 auto;width: 1000px;margin-top:100px;"> <p>姓名:<input type="text" /></p> <p>邮箱:<input type="text" /></p> <p>地址:<input type="text" /></p> <p>性别:男<input type="radio" checked/> 女<input type="radio"/></p> <p>爱好:篮球<input type="checkbox" /> 羽毛球<input type="checkbox" checked/> 足球<input type="checkbox"/></p> <p>今天星期: <select name="weekday" size="1"> <option value="1">星期一</option> <option value="2">星期二</option> <option value="3" selected>星期三</option> <option value="4">星期四</option> <option value="5">星期五</option> <option value="6">星期六</option> <option value="7">星期七</option> </select> </p> <p>密码:<input type="password" /></p> <p>确认密码:<input type="password" /></p> <p> <input type="submit" value="提交按钮"/> <input type="reset" value="重填按钮"/> <input type="button" value="普通按钮"/> </p> </form>以上代码的演示结果图为:

2.png
(1)<input>标签
type属性:指定表单元素的类型,可选项有text、password、checkbox、radio、submit、reset、file、hidden、image和button,默认为text; name属性:指定表单元素的名称; value属性:可选,指定表单元素的初始值; checked:指定按钮是否被选中; size属性:指定表单元素的初始宽度; maxlength属性:指定可在text或password元素中输入的最大字符数;(2)三种按钮
reset按钮:重置按钮,将表单重置为最初状态; submit按钮:提交按钮,用户单击按钮后,表单将会提交到action属性所指的URl,并传递表单数据; button按钮:普通按钮,需要与事件关联使用;四、表单的只读与禁用设置
readonly:只读,网站服务器方不希望用户修改的数据,这些数据在表单元素中显示; disabled:禁用,只有满足某个条件后,才能选用某项功能; 禁用的表单不会被提交;扫一扫,关注我们
声明:本文由【益华网络】编辑上传发布,转载此文章须经作者同意,并请附上出处【益华网络】及本页链接。如内容、图片有任何版权问题,请联系我们进行处理。
0