复习HTML中的表单(form)标签

目录

标题部分

表单部分

action属性

method属性

表格部分

table标签

input标签

select 标签

input 标签的 type 属性

onclick 事件属性


这是我在网上搜的一段源代码,我自己使用这个表单实例进行分析,对之前学过的HTML中form进行系统复习

首先可以看做三个部分:标题、表单和表格。下面我们先一个个拆开分析:

标题部分

这是一个网页中的标题,在HTML中可以定义标题的有六个(h1~h6)

从图中可以看出,从h1~到h6字体越来越小。我们在看这次的网页,我们使用的是h1标签

表单部分

基础介绍
<form>标签用于为用户输入创建HTML表单
表单能够包含input元素,比如文本字段、复选框、提交按钮等等
表单还可以包含menus、textarea、fieldset、legend和label元素
表单用于向服务器传输数据


提示和注释
    form元素是块级元素,其前后会产生折行
在下面的分析中,我会根据使用情况进行介绍,为介绍我根据代码所处行数来说:


在9行中我们便用<form>既然用到<form>我们便用下面的属性,在这里我是根据在网上搜到的来分析
     <form action="" method="">

action属性

里面的action属性是规定单提交表单时,向何处发送表单数据
action定义和用法:
  action属性可设置或返回表单的action属性
  action属性定义了当表单被提交时数据被送往何处
语法:

  formObject.action=URL

地址可以是绝对地址,也可以是相对地址。
当 action 留空或者未设置时,默认指定当前页面所在的地址,并且向当前页面提交数据。

method属性

method 属性规定如何发送表单数据(表单数据发送到 action 属性所规定的页面)。
表单数据可以作为 URL 变量(method="get")或者 HTTP post (method="post")的方式来发送。
其中的get和post方法,又有着不用的区别,如果想具体了解,可以看参考网站地址


表格部分

在这里form标签便开始封装数据,我们需要table标签进行布局,table基本使用:

table标签

定义和用法
<table> 标签定义 HTML 表格。
简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元。
更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

在这里便和我们网页是一样了,在<table>标签里面是对属性的运用

通过这些运用和属性的展示,我们可以快速的分析出我们网页的基本框架和元素的使用

在这里面运用到input标签

input标签

定义和用法
<input> 标签用于搜集用户信息。
根据不同的 type 属性值,输入字段拥有很多种形式。
       输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等

通过其属性可以了解到:
input类型为text,意味着text是文本域可以写入文本
name:定义 input 元素的名称。
value:规定 input 元素的值。
placeholder:规定帮助用户填写输入字段的提示。

这部分是修改了input标签的type类型,由之前的文本域变为单元按钮(radio)
checked属性里面的值也是规定此 input 元素首次加载时应当被选中

和它不同的是:

这里的input类型是chekbox,是属于复选框,这里一个是单选按钮,一个是复选框

接下来的年龄,也不相同

这里便使用了最大值和最小值,感兴趣的可以自己设定

这里使用了简单的下拉列表

select 标签

定义和用法
select 元素可创建单选或多选菜单。
<select&> 元素中的 <option> 标签用于定义列表中的可用选项。
提示和注释:
       提示:select 元素是一种表单控件,可用于在表单中接受用户输入。

在网页制作中,可能运用多个input标签的type属性

input 标签的 type 属性

定义和用法
type 属性规定 input 元素的类型。

这些都是使用了不同的type类型

其中增添一个onclick事件属性

onclick 事件属性

定义和用法
onclick 属性由元素上的鼠标点击触发。
注释:
onclick 属性不适用以下元素:
         <base>、<bdo>、<br>、<head>、<html>、<iframe>
          <meta>、<param>、<script>、<style>  、 <title>

而其中的alert()是指从窗口弹出,在JavaScript多次使用

参考网站:
代码地:  https://www.cnblogs.com/wangenxian/p/10927205.html
h标签:  https://www.w3school.com.cn/tags/tag_hn.asp
form标签:  https://www.w3school.com.cn/tags/tag_form.asp
action属性:  https://zhidao.baidu.com/question/553981919814377932.html
method属性:  https://www.w3school.com.cn/tags/att_form_method.asp
table标签:  https://mp.csdn.net/console/editor/html/104434824
input标签:  https://www.w3school.com.cn/tags/tag_input.asp
select标签:  https://www.w3school.com.cn/tags/tag_select.asp
input标签的type属性:  https://www.w3school.com.cn/tags/att_input_type.asp
                                   https://blog.csdn.net/dayexiaofan/article/details/86464386
onclick 事件属性:  https://www.w3school.com.cn/tags/event_onclick.asp
HTML5中table标签与form标签的区别:  
                    https://www.cnblogs.com/curedfisher/p/11608592.html

发布了32 篇原创文章 · 获赞 11 · 访问量 6175

猜你喜欢

转载自blog.csdn.net/Cai1010110/article/details/104434824