web快速入门之基础篇-html：13、表单-常用操作：form、input、select、textarea、label、fieldset、iframe

最新推荐文章于 2021-12-05 17:10:41 发布
最新推荐文章于 2021-12-05 17:10:41 发布
阅读量479 收藏
点赞数
分类专栏： web前端（H5）
本文为博主原创文章，不得随意转载，转载请注明出处！！！
本文链接：https://blog.csdn.net/YuDBL/article/details/104129754
版权

目录

一、前言

二、表单知识点****

1、form：承载页面元素，备于做提交

2、form可以承载的：input、其它元素

3、input：单标记，靠 type 属性的不同取值

      a、类型

      b、常用属性

4、列表框、下拉框：取决于 size 的取值

5、多行文本框

6、label：文本标签

7、fieldset：元素圈起来

8、iframe：浮动框架

      a、显示：一个浏览器窗口中显示多个html页面

      b、嵌入到某个html页面里

三、实例演示

1、实例代码

2、效果演示

一、前言

上一篇文章我整理以前的笔记是：表格-常用属性：colspan、colspan、表格的嵌套等，详细可参考博文 web快速入门之基础篇-html：12、表格-常用属性：colspan、colspan、表格的嵌套等 这篇文章我将整理笔记：表单-常用基本操作

二、表单知识点****

1、form：承载页面元素，备于做提交

 <form action="a.jsp" method="post">
 </form>

2、form可以承载的：input、其它元素

3、input：单标记，靠 type 属性的不同取值

      a、类型

            <input type="text" />--文本框( 不写type属性, 默认为文本框 )
            <input type="password" />--密码框
            <input type="radio" />--单选按钮
            <input type="checkbox" />--多选（复选/核选）框
            <input type="submit" />--提交按钮，提交并刷新页面
            <input type="reset" />--重置按钮，将页面恢复到原始状态
            <input type="button" />--普通按钮
            <input type="file" />--选择文件，以供上传
            <input type="hidden" />--隐藏域，适用于记载那些不需要显示的关键数据

      b、常用属性

            id：需要的时候，唯一标识
            name：名值对的方式提交数据
            value：取决于需求
            maxlength：文本框、密码框
            readonly：只读
            checked：单选、多选

4、列表框、下拉框：取决于 size 的取值

           <select>
                <option></option>
                <option></option>
                <option></option>
            </select>
            如何选择：页面布局

5、多行文本框

        <textarea>
        </textarea>

6、label：文本标签

        <input type="radio" id="r1" />
        <label for="r1">文本</label>

7、fieldset：元素圈起来

        legend:为圈添加名称描述，即标题
        比如：
        <fieldset>
            <legend>标题</legend>
        </fieldset>

8、iframe：浮动框架

      a、显示：一个浏览器窗口中显示多个html页面

        main.html---页面
        a.html---广告页面

      b、嵌入到某个html页面里

        <iframe src="url"></iframe>

三、实例演示

1、实例代码

我们先来看看一个例子，如下代码：01_表单.html

<!--版本信息-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<title>文档标题</title>
		<meta http-equiv="refresh
		" content="3" />
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	</head>
	<body>


		<h1>增加管理员</h1>
		<form>
用户名：<input type="text" name="n" value="aaa" /><br/>
密码：<input type="password" name="p" /><br />
性别： 
	<input type="radio" name="sex" value="0" />
	男生
	<input type="radio" name="sex" value="1" />
	女生
	<br/>
	角色：
<fieldset style="width:35%">
	<legend>请选择</legend>
	<input id="r1" type="checkbox" name="role" value="sa" />
	<label for="r1">超级管理员</label>
	<br/>
	<input type="checkbox" name="role" value="ad" />
	普通管理员
</fieldset>
	<br/>
	状态：
	<select>
		<option>启用</option>
		<option>停用</option>
		<option>删除</option>
	</select>
	<br />
	个人描述：
	<textarea cols="20" rows="5">
	</textarea>
	<br/>
	其他url页面显示(CSDN官网)：
	<iframe src="https://passport.csdn.net"></iframe>
	<br/>
	<input type="submit" value="保存" />
	<input type="reset" value="重填" />

	<br />
	<!--隐藏域控件-->
	注：这是“隐藏域控件”<input type="hidden" value="111" />
		</form>


	</body>
</html>

2、效果演示

用谷歌浏览器打开运行，效果如下：

 

 

 

被开发耽误的大厨
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
custom-textarea：Web组件custom-textarea元素
02-06
安装npm i @lemmon/custom-textarea在Web应用程序内部使用// does register the component for you// with `custom-textarea` tagnamerequire ( '@lemmon/custom-textarea' ) 要么// does not register the ...
WEB前端 -- input类型、fieldset、HTML5新标签
叶的博客
11-26 1934
1.fieldset：将表单中的相关元素进行分组，生成一组相关表单的字段 学生信息 姓名： 性别： 男 女 2.input类型 请选择数字： 改变值： 颜色： 日期： 搜索： 3.HTML5部分新标
css中表单使用技巧
sinat_31907813的博客
09-18 493
表单用于搜集不同类型的用户输入，表单由不同类型的标签组成，相关标签及属性用法如下： 1、标签 定义整体的表单区域 action属性 定义表单数据提交地址 method属性 定义表单提交的方式，一般有“get”方式和“post”方式 2、标签 为表单元素定义文字标注 3、标签 定义通用的表单元素 type属性： type="text" 定义单行文本输入框 type="password" 定义...
HTML 表单标签之form、input、label、select、textarea表单元素详解
蟹黄堡
05-11 1169
表单概述 表单通常是由表单域、表单控件（表单元素）和提示信息3个部分构成。 表单域 表单域的基本语法格式如下： <form action="url地址" method="提交方式" name="表单域名称"> 各种表单元素控件 </form> 定义：表单域是一个用来包含表单元素的区域； 作用：实现用户信息的收集和传递； 常用属性： 属性 属性值 作用 action url地址 用于指定接收并处理表单数据的服务器程序的url地址 method get/po
web前端开发与应用——分组元素
m0_59742894的博客
12-01 1671
div div元素是没有语义的通用分组元素，早期设计中常用div标签进行网页布局。 blockquote blockquote元素表示摘自另一个源的大段内容的语义化元素。在显示上有段落空隙，在左右两边缩进（增加外边距）。 pre pre元素用来定义预格式化文本，在<pre>标签内容中的文本通常会保留空格和换行符，显示为等宽字体。 figure/figcaption figure元素代表一个和文档相关的图，figcaption是这个图的标题。 ul/li ul可创建无序列表，在这
Vue入门篇_1
royarn
06-26 555
html> html xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"> head> meta charset="utf-8"> title>Vue learingtitle> script src="https://cdn.bootcss.com/vu
educoder——web：构建web表单
m0_51461030的博客
12-05 1832
构建web表单
react-valid-form:React形式验证组件
05-03
入门 使用NPM安装： $ npm install react-valid-form-component 用法 现场演示 使用此组件，您可以根据指定的规则来验证表单字段。 只需在<ValidForm></ValidForm>标记中定义表单即可进行验证。 组件支持标准表单...
content-editable:一个使其内容可编辑HTML元素
03-14
<content> 一个自定义元素，当用户单击它时，可以通过将其自身更改为文本字段来使其内容可编辑。 创建该库是为了支持缺少功能，并减轻其。安装npm i content-editable用法< script src =" node_modules/content-...
stimulus-textarea-autogrow:用于自动增长文本区域的Stimulus控制器
05-24
入门 用于自动增长textarea的Stimulus控制器。 :books: 文献资料 请参阅。 :male_sign:‍:male_sign: 贡献 不要犹豫，通过修改或添加功能为项目做出贡献！ 错误报告或请求请求是受欢迎的。 :memo: 执照 该项目是...
表单美化之textarea文本域背景的美化.rar
07-05
表单美化之textarea文本域背景的美化
auto-complete-for-text-input-box:一个自动完成的jQuery插件
05-02
jQuery中的自动完成插件 如何使用： 导入jquery源文件，在此项目中，... $ ( "#input" ) . autoCompleteToken ( '{' , '}' , [ A , B , C , D , E , F , G ] ) ; 执照 版权所有:copyright: 根据Apache许可获得许可。
JSP C标签库
aaaaaaddddsssss的博客
10-28 409
导入jstl.jar stand.jar 可以百度搜索 jsp C标签库 在jsp页面声明 c标签库 c标签库中 for循环的用法，从后台取出的数据 给items 起个别名给var varStatus是序号123 c标签库的if可以配合jsp标签使用当访问这个jsp如果没有数据，就跳转到servlet里面进行查询，在从servet通过转发到jsp页面 有时候如果C标签库报错 多在网上搜索一下。复制错误。 ...
HTML中for属性用来关联某控件
杨咩咩
02-16 592
例如： <label for="r1">颜色修改</label> <input type="checkbox" v-model="use" id="r1"> 运行结果：当点击颜色修改字体时，后面的复选框被选中
JQuery常用选择器
HYJ940228的博客
10-25 521
基本选择器 分类 1. 基本选择器 1. 标签选择器（元素选择器） 语法： $(“html标签名”) 获得所有匹配标签名称的元素 描述: 查找一个 DIV 元素。 HTML 代码: <div>DIV1</div> <div>DIV2</div> <span>SPAN</span> jQuery 代码: $("di...
VUE 全选
weixin_30519071的博客
10-11 75
<div id="vue_det"> <p>全选:</p> <input type="checkbox" id="checkbox" v-model="checked" @change="changAllChecked"/> <label for="checkbox"> {{checked}} &lt...
fieldset在form中的用法
恭喜姐姐
10-15 2410
在表单的应用中，我们有时会用到对 form 的信息进行分组，例如“注册(regForm)”，可能会将注册信息分组成基本信息（一般为必填），详细信息（一般为可选），因此可考虑在 form 中加入下面两个标签：   fieldset：对表单进行分组，一个表单可以有多个fieldset。fieldset标签会在包含的文本和input等表单元素外面形成一个方框，legend元素作为标题。 legend：说...
使用form表单中自带的fieldset与legend
水痕
03-14 8094
在form表单中常常被忽视的两个标签fieldset和legend 下面我是用了bootstrap的样式，把一些默认样式去除了 <div class="container"> <div class="col-md-5"> <form role="form" action="" method="post"> <fieldset>
button, select { text-transform: none; } button, input { overflow: visible; } button, input, optgroup, select, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; } button { border-radius: 0; }
最新发布
07-15
这是一些CSS样式代码。它们用于重置按钮和输入元素的默认样式。具体来说，这些代码做了以下几个事情： 1. `text-transform: none;` 取消按钮和选择框中的文本转换效果，确保文本按原样显示。 2. `overflow: visible...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

被开发耽误的大厨

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值