HTML标记之Form表单
一、表单的作用
从访问的Web站点的用户那里获得信息。访问者可以使用诸如文本域、列表框、复选框以及单选按钮之类的表单元素输入信息,然后单击某个按钮提交这些信息。是客户端与服务器端的交流途径。
二、说明
Form标记用于创建一个表单,定义一个表单的开始与结束,他是一个容器,用于包含其他元素,例如文本框、单选框等。表单元素必须在form标记内才有作用。
语法:
<form action=url(传送目标,处理表单信息的服务器端应用程序) method=处理表单的方式(post/get)默认为get, name=”表单名”>
表单元素
</form>
注意:post方法可以传递大量信息,get将值附加到请求的url中,适合少量的信息。
三、表单元素标记
①.单行文本
<input name=”文本框名称” type=”text” value=”初始值” size=“显示字符数” maxlength=“最多容纳字符数”readonly=”readonly”(设置为只读) disable=”disable”(设置为不可操作) ></input>
②.密码框
<input name=”文本框名称” type=”password” value=”初始值” size=“显示字符数”></input>
③.单选框
<input name=”文本框名” type=”radio” value=” 提交值” checked=”checked”(是否被选中) ></input>,
④.复选框
<input name=”文本框名” type=”checkbox” value=”提交值” checked=“checked”></input>
⑤.下拉框
单选下拉框:
<select name=”下拉框名”>
<option selected=”selected” (那个是初始选择就添加) value=”提交值”>列表1</option>
<option>列表2</option>
</select>
(<optgrounp label=”分组名称”><option></option></optgrounp>用来做有子项的下拉框)
多选下拉框:
<select name="下拉框名字" size="显示的行数" multiple="multiple"> //multiple:表示允许多选
<option value="提交值">显示值</option>
。。。。
</select>
四、表单元素标签分类
1.<label >标注内容</label>标签:为input元素定义标注(标记),<label>标签的for属性应当与相关元素id相同
如:<input type=”redio” name=”sex” id=”man”><label for=”man”>男</label>就把input标签和label标签关联在一起。
2.按钮
语法:<input type="按钮类型:reset[重置表单]、submit[提交表单]、button[普通按钮]、" name="按钮名称" value="按钮显示文本">
3.图片按钮
语法:<input type="image" name="按钮名称" src="图片路径" />
4.隐藏域:
语法:<input type="hidden" value="隐藏域的值" />
5.多行文本
语法:<textarea name="多行文本框名称" cols="每行中的字符数" rows="显示的行数"></textarea>
6.文件框
语法:<input type="file" name="文件框名称" size="显示长度"/>
7.表单外框
语法:<fieldset></fieldset>定义围绕表单中元素的边框
<legend></legend>为fieldset元素定义标题
8.动画插入
语法:<embed src="动画地址" width="宽度" height="高度" wmode="transparent:使flash背景部分透明"></embed>
9.滚动字幕
语法:<marqueen
direction="滚动方向:left[左]、right[右]、up[上]、down[下]"
behavior="滚动方式:scroll[一圈一圈绕着走]、slide[只走一次]、alternate[来回]"
loop="滚动的循环次数,若未指定则循环不止(loop="infinite")"
bgcolor="背景颜色"
onMouseOver="this.stop(),鼠标进入暂停"
onMouseOut="this.start(),鼠标离开继续"
scorllamount="滚动速度,值越大,速度越快"
scrolldelay="延时,走一走,停一停"
></marqueen>
10.内嵌框架元素
语法:<frameset rows="行高及行数" cols="列数及列宽" framespacing="框架间距"
frameborder="框架边框设置:yes/no,1/0" border="边框宽度" bordercolor="边框颜色">
<frame src="被包含的文件路径及名称" name="框架名称" noresize="是否允许改变框架大小,true/false" scroll="滚动条显示控制,yes/no/auto">
</frameset>
感谢您花时间阅读此篇文章,如果您觉得这篇文章你学到了东西也是为了犒劳下博主的码字不易不妨打赏一下吧,让博主能喝上一杯咖啡,在此谢过了!
如果您觉得阅读本文对您有帮助,请点一下左下角“推荐”按钮,您的将是我最大的写作动力!另外您也可以选择【关注我】,可以很方便找到我!
本文版权归作者和博客园共有,来源网址:http://www.cnblogs.com/hafiz 欢迎各位转载,但是未经作者本人同意,转载文章之后必须在文章页面明显位置给出作者和原文连接,否则保留追究法律责任的权利!


【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?