10表单

最新推荐文章于 2023-11-11 23:11:37 发布

宠儿呀

最新推荐文章于 2023-11-11 23:11:37 发布

阅读量205

点赞数

分类专栏： html+css笔记文章标签： html html5

本文链接：https://blog.csdn.net/qq_46055080/article/details/104445273

版权

html+css笔记专栏收录该内容

19 篇文章 0 订阅

订阅专栏

10表单

1.应用

网页注册登录界面、信息调查问卷。

搜索引擎的输出框。

2.表单form标签

浏览器在网页上专门用来划分出一个用来存储表单元素的块元素。

form标签的action属性内部是一个连接，指向的是提交表单时向哪个服务器地址发送表单数据。
form标签的method属性内部存储着，该表单向目标服务器传输数据时采用的是哪种方式。get提交的内容会出现在地址栏上，不安全，存储量小；post安全。

代码：

<form action="" method="GET">
</form>

3.input标签

在元素中使用，用来展示用户可以输入数据的元素。input标签最终的表现形式和传输至服务器的数据类型，取决于 type 属性。

input是行内块元素。
input标签的type属性内部是存储着该input元素输入信息的类别（如，文字，单选，邮箱，电话号码，多选框等）。
form标签的name属性内部存储着该input元素的名称，此处的名称与class不同。

代码：

 <input type="radio" name="sex" value="1">男

4.表单控件

类型	详解
文本框（默认）	text
密码框	password
单选按钮	radio
多选按钮	checkbox
普通按钮（专职按钮）	button
提交按钮	submit
重置按钮	reset
图片按钮	image
单个文件导入	file
多个文件导入
颜色选择器	color
日期	date和time。date是在一日历中选择日期，time是在选项款中增减日期，或手动输入。也可以直接用month，week，datetime-local。
滑块	range。可设置最大值用max以及最小值用min，步长用step（即滑动一下增减多少值），默认值设置用value
文本域	textarea.可以设置width和height。resize：none意为不可让用户随意拉动文本域大小。overflow:auto;设置滚动条。rows属性表示这个文本输入区域默认的高，cols属性表示这个文本输入区域默认的宽。这里的宽高值得是字符。

下拉列表：

select元素：创造一个下拉选项列表，select中的name值表示这个下拉选项列表的名称。
option元素：创造一个下拉选项列表中的具体选项，option中的value值表示用户选择这个选项后，表单向服务器发送的数据。option元素中如果有一个selected的单词，这表示，该选项为此下拉选项列表的默认选择。

<select name="month" id="">

    <option value="0" selected>-请选择月份-</option>

 	<option value="1月">1月</option>

      <option value="2月">2月</option>

      <option value="3月">3月</option>

</select>

下拉列表分组：

<select name="month" id="">
        <option value="0" selected>-请选择月份-</option>
        <optgroup label="一季度">
            <option value="1月">1月</option>
            <option value="2月">2月</option>
            <option value="3月">3月</option>
        </optgroup>
        <optgroup value="" label="二季度">
            <option value="4月">4月</option>
            <option value="5月">5月</option>
            <option value="6月">6月</option>
        </optgroup>
</select>

表单组：

<fieldset> 标签可以将表单内的相关元素分组，会在相关表单元素周围绘制边框。
<legend> 标签为 <fieldset> 元素定义标题。

<fieldset>

    <legend>&nbsp;模拟单选按钮：&nbsp;</legend>

    <input type="radio" name="sex" value="1">男

    <input type="radio" name="sex" value="2" >女

  </fieldset>

表单组

5.lable元素

扩大用户选中input元素的区域，for属性的存储的对应input元素的id名称.

简单来说，就是在label选中的区域里点击鼠标，都可以选中按钮。（应用：点击文字也可以选中按钮）

 <head>
 <title></title>
 <style>
      #love01 {
            display: none;
        }
        .label01 {
            display: block;
            width: 200px;
            height: 200px;
            background-color: pink;
            position: fixed;
            top: 200px;
            left: 100px;
        }
    </style>
    </head>
<body>
     你们爱我嘛？
        <input type="radio" name="love" id="love01">
        <label for="love01" class="label01">我们爱你</label>
        <input type="radio" name="love">我们很爱你
</body>

宠儿呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
10表单

10表单1.应用网页注册登录界面、信息调查问卷。搜索引擎的输出框。2.表单form标签浏览器在网页上专门用来划分出一个用来存储表单元素的块元素。form标签的action属性内部是一个连接，指向的是提交表单时向哪个服务器地址发送表单数据。form标签的method属性内部存储着，该表单向目标服务器传输数据时采用的是哪种方式。get提交的内容会出现在地址栏上，不安全，存储量小；post...
复制链接

扫一扫

专栏目录