表单标签

学习目标

能够知道表单中常用的表单元素标签

1. 表单的介绍

表单用于搜集不同类型的用户输入(用户输入的数据)，然后可以把用户数据提交到web服务器。

2. 表单相关标签的使用

<form>标签表示表单标签，定义整体的表单区域
<label>标签表示表单元素的文字标注标签，定义文字标注
<input>标签表示表单元素的用户输入标签，定义不同类型的用户输入数据方式

type属性
- type=“text” 定义单行文本输入框
- type=“password” 定义密码输入框
- type=“radio” 定义单选框
- type=“checkbox” 定义复选框
- type=“file” 定义上传文件
- type=“submit” 定义提交按钮
- type=“reset” 定义重置按钮
- type=“button” 定义一个普通按钮

<textarea>标签表示表单元素的多行文本输入框标签定义多行文本输入框
<select>标签表示表单元素的下拉列表标签定义下拉列表

<option>标签与<select>标签配合，定义下拉列表中的选项

示例代码:

<form><p><label>姓名：</label><input type="text"></p><p><label>密码：</label><input type="password"></p><p><label>性别：</label><input type="radio"> 男<input type="radio"> 女</p><p><label>爱好：</label><input type="checkbox"> 唱歌<input type="checkbox"> 跑步<input type="checkbox"> 游泳</p><p><label>照片：</label><input type="file"></p><p><label>个人描述：</label><textarea></textarea></p><p><label>籍贯：</label><select><option>北京</option><option>上海</option><option>广州</option><option>深圳</option></select></p><p><input type="submit" value="提交"><input type="reset" value="重置"></p>
</form>

3. 小结

表单标签是<form>标签
常用的表单元素标签有: <label>、<input>、 <textarea>、<select> 等标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><!-- 把数据提交给web服务器需要使用表单标签：<form> --><form><p><!-- for 根据id名给指定id的标签设置光标 --><label for="name">用户名:</label><input type="text" id="name"></p><p><label>密码:</label><input type="password"></p><p><label>性别:</label><input type="radio">男<input type="radio">女</p><p><label>爱好:</label><input type="checkbox">学习<input type="checkbox">睡觉<input type="checkbox">打游戏</p><p><label>玉照:</label><input type="file"></p><p><label>个人描述:</label><textarea></textarea></p><p><label>籍贯:</label><select><option>北京</option><option>河北</option><option>深圳</option><option>湖北</option></select></p><p><input type="submit" value="提交"><input type="reset" value="重置"><input type="button" value="按钮"></p></form>
</body>
</html>

表单提交

学习目标

能够知道表单的提交方式
能够知道表单中action属性的作用

1. 表单属性设置

<form>标签表示表单标签，定义整体的表单区域

action属性设置表单数据提交地址
method属性设置表单提交的方式，一般有"GET"方式和"POST"方式, 不区分大小写

2. 表单元素属性设置

name属性设置表单元素的名称，该名称是提交数据时的参数名
value属性设置表单元素的值，该值是提交数据时参数名所对应的值

3. 示例代码

<form action="https://www.baidu.com" method="GET"><p><label>姓名：</label><input type="text" name="username" value="11" /></p><p><label>密码：</label><input type="password" name="password" /></p><p><label>性别：</label><input type="radio" name="gender" value="0" /> 男<input type="radio" name="gender" value="1" /> 女</p><p><label>爱好：</label><input type="checkbox" name="like" value="sing" /> 唱歌<input type="checkbox" name="like" value="run" /> 跑步<input type="checkbox" name="like" value="swiming" /> 游泳</p><p><label>照片：</label><input type="file" name="person_pic"></p><p><label>个人描述：</label><textarea name="about"></textarea></p><p><label>籍贯：</label><select name="site"><option value="0">北京</option><option value="1">上海</option><option value="2">广州</option><option value="3">深圳</option></select></p><p><input type="submit" name="" value="提交"><input type="reset" name="" value="重置"></p>
</form>

小结

表单标签的作用就是可以把用户输入数据一起提交到web服务器。
表单属性设置
- action: 是设置表单数据提交地址
- method: 是表单提交方式，提交方式有GET和POST
表单元素属性设置
- name: 表单元素的名称，用于作为提交表单数据时的参数名
- value: 表单元素的值，用于作为提交表单数据时参数名所对应的值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><!-- 把数据提交给web服务器需要使用表单标签：<form> --><form action="https://www.baidu.com" method="POST"><p><!-- for 根据id名给指定id的标签设置光标 --><label for="name">用户名:</label><input type="text" id="name" name="username"></p><p><label>密码:</label><input type="password" name="password"></p><p><label>性别:</label><input type="radio" name="sex" value="0">男<input type="radio" name="sex" value="1">女</p><p><label>爱好:</label><input type="checkbox" name="love" value="学习">学习<input type="checkbox" name="love" value="睡觉">睡觉<input type="checkbox" name="love" value="打游戏">打游戏</p><p><label>玉照:</label><input type="file" name="pic"></p><p><label>个人描述:</label><textarea name="desc"></textarea></p><p><label>籍贯:</label><select name="position"><option value="1">北京</option><option value="2">河北</option><option value="3">深圳</option><option value="4">湖北</option></select></p><p><input type="submit" value="提交"><input type="reset" value="重置"><input type="button" value="按钮"></p><!-- get和post方式提交表单数据都以http协议的方式提交数据给web服务器 --></form>
</body>
</html>

加油!

感谢!

努力!

【前端基础】表单标签/提交相关推荐

前端开发表单标签完成一个简单登陆的效果 0228
表单标签的功能提交数据给服务器表单的基本结构格式各样的控件 input标签的多样性目标效果表格的结构设置宽高合并单元格继续合并单元格填写内容 . 插入表单控件按钮添加按钮居中用 ...
什么标签用于在表单中构建复选框_基础表单标签及属性
表单标签一.一个完整的表单包含三个基本组成部分:(表单标签.表单域.表单按钮) 1.表单标签:form标签,用于设置服务器地址.请求方式等等 2.表单域:用户需要填写或选择的数据,输入框.单 ...
04.HTML基础-表单标签基础标签
表单标签什么是表单表单就是专门用来收集用户信息的什么是表单元素是特殊的标签,在浏览器中所有的表三标签都有特殊的外观和默认的功能作用:用于收集用户信息,让用户填写或选择相关的信息格式: &l ...
利用html开发英语单词小程,前端利用表单标签自己制作一个简单的表单页面-表单制作-小程序表单制作...
html中的表单标签:form标签:属性:提交到后台url地址:actionurl地址:http://localhost:8080/XXX提交方式:method常用两个:get:把提交的数据放到地址栏 ...
前端基础——双单标签、行内块级元素、路径、常用标签
一.单标签和双标签: 在HTML基础中,单标签就是由一个标签组成的. 例如<br>.<hr>.<img>.<input>.<param>.& ...
通过前端form表单将信息提交至数据库
(可以考虑把所有的附庸步骤放到最后面) 待解决问题返回的集合可以用List类型变量接住一.创建前端页面&给页面命名二.前端页面设计知识储备: 什么是http HTTP是什么?HTTP是 ...
HTML 基础【2】 -- 表格标签 / 表单标签
请先学习往期内容:HTML 基础[1] – 入门介绍 / 基本结构 / 块级标签 / 行内标签作业分析上一篇<HTML 基础[1] – 入门介绍 / 基本结构 / 块级标签 / 行内标签&g ...
HTML5基础学习——列表标签表单标签
学习内容: 1.列表标签表格是用来显示数据的,那么列表就是用来布局的. 列表最大的特点就是整齐.整洁.有序,它作为布局会更加自由和方便. 根据使用场景不同,列表可以分为三大类:无序列表.有序列表和自 ...
HTML标签汇总（基础表单部分）
HTML标签汇总(基础表单部分) <form> 用于用户输入创建的HTML表单表单包含<input>元素,比如文本字段,复选框,单选框,提交按钮等等表单还可以包含menus ...

【前端基础】表单标签/提交

【前端基础】表单标签/提交

表单标签

1. 表单的介绍

2. 表单相关标签的使用

3. 小结

表单提交

1. 表单属性设置

2. 表单元素属性设置

3. 示例代码

小结

【前端基础】表单标签/提交相关推荐

最新文章

热门文章