表单和表单控件以及表单域详解

表单域：存放表单的区域。把表单控件里面的信息全部收集提交。
表单控件
input表单控件：
1.是个单标签 </input>
2.input可以通过type（类型）属性来变换形状

单选按钮注意：

 <body><p>用户名：<input type="text" value="请输入你的名字" /></p><p>密&nbsp; 码：<input type="password" /></p><p>性&nbsp;别：<input type="radio" /> 男 <input type="radio" /> 女 </p></body>

由图能够看出来，此时可以对性别男和女同时选中，这是错误的，因此只需要将单选按钮名称统一即可。
修改

<body><p>用户名：<input type="text" value="请输入你的名字" /></p><p>密&nbsp; 码：<input type="password" /></p><p>性&nbsp;别：<input type="radio" name="sex" /> 男 <input type="radio" name="sex" /> 女 </p>
</body>

此时，只能选中男或者女，不能两者同时选中。
单选按钮和复选按钮默认的被选中状态：

使用checked="checked"即可实现

label标签的使用
1.用label标签直接包裹input标签就可以了
2.如果label标签里面有许多个表单，想定位到某个，可以通过for...id的格式来进行
例：

<body><h3>label标签的使用</h3><label>用户名：<input type="text" /></label> <br /><label for="two">用户名：<input type="text" />密码：<input type="password" id="two" /></label>
</body>

通过效果图可以看出，有多个文本框时，通过使用for...id可以控制光标定位到哪个文本框。
文本域控件：<textarea>...</textarea>双标签
作用：可以实现文本的多行输入

留言板：<textarea>请输入留言</textarea>

效果图：

下拉菜单：
代码结构：

 <select><option>选项1</option><option>选项2</option><option>选项3</option>...</select>

代码：

学科：<select><option>请选择你喜欢的学科</option><option>HTML</option><option>CSS</option><option>JAVA</option><option>前端</option><option>数学</option></select>

效果图：

如果你想使下拉菜单初始默认一个，可以在option标签内，使用selected="selected"
如：

学科：<select><option>请选择你喜欢的学科</option><option>HTML</option><option>CSS</option><option>JAVA</option><option>前端</option><option selected="selected">数学</option></select>

表单域：
语法结构：

<form action="url地址" method="提交方式" name="表单名称">各种表单控件
</form>

常用属性：
1. Action
在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。
2. method
用于设置表单数据的提交方式，其取值为get或post。
3. name
用于指定表单的名称，以区分同一个页面中的多个表单。

 <h3>表单域</h3><form action="table.html" method="post" name="one"><p><label>用户名：<input type="text" /></label></p><p><label>密&nbsp;码：<input type="password" /></label></p><p><input type="submit" value="提交数据" /></p><p><input type="reset" value="重置数据" /></p></form></form>

效果：

表单和表单控件以及表单域详解相关推荐

DevExpress控件GridControl中的布局详解【转】
DevExpress控件GridControl中的布局详解 [转] 2012-10-24 13:27:28| 分类: devexpress | 标签:devexpress |举报|字号订阅 h ...
利用Animation控件制作帧动画过程详解
利用Animation控件制作帧动画过程详解前言通过Animation控件来达到序列图的播放(素材和示例视频在文章末尾) 一.序列图 (此素材为已经分割好的序列图) 如若序列图在一张图片上,请参考 ...
Android中设置控件可见与不可见详解
通常控件的可见与不可见分为三种情况. 第一种 gone 表示不可见并且不占用空间第二种 visible 表示可见第三种 invisible 表示不可见但是占用空间可见与不可见的表现形式有两种. ...
【原创】DevExpress控件GridControl中的布局详解
在进行DevExpress控件GridControl的使用时,因控件的灵活性,所以用户会经常进行拖动控件的列,以达到自己满意的样式, 但下次再打开时系统就会重新还原到原有的布局风格,为了能够保持用户之 ...
java图形用户界面控件介绍,GUI(图形用户界面)详解
一.GUI(图形用户界面) GUI Graphical User Interface(图形用户接口) 用图形的方式,来显示计算机操作的界面,这样更方便更直观 CLI Command line User ...
python点击屏幕坐标_Appium+python自动化（二十二）- 三个臭皮匠顶个诸葛亮-控件坐标获取（超详解）...
简介有些小伙伴或者是童鞋可能会好奇会问上一篇中的那个monkey脚本里的坐标点是如何获取的,不是自己随便蒙的猜的,或者是自己用目光或者是尺子量出来的吧,答案当然是:NO.获取控件坐标点的方式这里宏哥 ...
【Android 常见控件使用】AlertDialog(对话框)详解
文章目录 AlertDialog(对话框)详解本节引言 1.基本使用流程 2.几种常用的对话框使用示例 3.通过Builder的setView()定制显示的AlertDialog AlertDial ...
申报控件检测未通过_详解高企申报未通过原因！
2020年高企申报正在火热进行中,宏邦结合往年高企申报过程,总结以下常见申报未通过的原因,看看自己申报时有没有触碰到这些"雷区"吧. 财税方面 1.研发费用(主因之一): --研发 ...
android 控件 margin,Android MarginDesign控件TabLayout导航栏使用详解
TabLayout的使用简单介绍比如在平常的项目中实现这样的效果,一般都是都会使用viewPageIndicate等几个开源框架直接实现,或者使用自定义的HorizontalScroll再配合Vie ...
autojs遍历当前页面所有控件_HTML5表单和表单控件的使用
哈喽大家好,我是作者"未来",本期分享的内容是Web前端系列课程,本系列总共29个阶段,坚持学习3个月蜕变为Web前端高手哦! 志同道合的小伙伴跟我一起学习交流哦! 第一阶段 HT ...

表单和表单控件以及表单域详解

表单和表单控件以及表单域详解相关推荐

最新文章

热门文章