目录
这是我在网上搜的一段源代码,我自己使用这个表单实例进行分析,对之前学过的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