html表单

合集下载

html表单练习题

html表单练习题

html表单练习题HTML(超文本标记语言)表单是网页中收集用户输入数据的主要工具。

通过使用不同的HTML输入元素和属性,可以创建各种类型的表单,如文本输入框、单选按钮、复选框、下拉列表等。

本文将提供一些HTML表单练习题,帮助读者熟悉和练习HTML表单的使用。

1. 文本输入框使用HTML创建一个简单的文本输入框,用户可以在其中输入自己的名字。

确保输入框有适当的标签和属性来描述其用途,并设置最大字符限制为10个字符。

2. 单选按钮创建一个包含三个选项的单选按钮组,用于选择用户的喜爱的颜色。

每个单选按钮都应该有一个合适的标签和值。

3. 复选框在一个表单中创建一个包含四个选项的复选框组,用于选择用户感兴趣的不同领域。

每个复选框都应该有一个适当的标签和值,让用户可以同时选择多个选项。

4. 下拉列表创建一个下拉列表,其中包含用户感兴趣的学科。

列表中应该至少包含三个选项,每个选项都有一个适当的标签和值。

5. 提交按钮在表单底部创建一个提交按钮,让用户可以点击以提交表单内容。

确保按钮具有适当的标签和属性,如ID和名称。

以上是一些HTML表单的练习题。

通过完成这些练习,读者可以熟悉并加深对HTML表单的理解和应用。

请按照提供的题目和要求完成每个练习,注意正确使用HTML标签和属性,以及合适的文本描述和值。

可以根据需要进行样式调整,使表单更加整洁和美观。

完成所有练习后,您可以在浏览器中打开HTML文件,查看和测试表单的功能和外观。

这些练习将帮助您熟练掌握HTML表单的创建和使用,为以后的网页开发工作打下坚实的基础。

希望这些HTML表单练习题对您有所帮助!祝您学习愉快,提升HTML编程技能!。

HTML的form表单标签

HTML的form表单标签

HTML的form表单标签表单HTML 表单⽤于搜集不同类型的⽤户输⼊。

㈠Form标签⑴form标签简介在HTML中,如果创建⼀个表单,就把各种表单标签放在<form></form>标签内部。

我们常说的表单,指的是⽂本框,按钮,下拉列表等的统称。

form⼀共有五个重要属性,分别是name,action,method,enctype和target属性。

语法:<form>表单各种标签</form>⑵表单名称name属性⼀个页⾯中,你的表单可能不⽌⼀个,为了区分这些表单,使⽤name属性来给表单进⾏命名。

这样也是防⽌在表单提交之后,在后台程序中出现混乱。

语法:<form name="表单名称">......</form>表单名称中不能包含特殊字符和空格。

⑶提交表单action属性在form标签中,action属性⽤于指定表单数据提交到哪个地址进⾏处理。

语法:<form action="表单的处理程序">......</form>表单的处理程序是表单要提交的地址,这个程序地址⽤来处理从表单搜集的信息。

这个地址可以是相对地址,绝对地址,也可以是⼀些其他形式的地址。

⑷传送⽅法method属性①在form标签中,methon属性的作⽤是告诉浏览器,指定将表单中的数据使⽤哪⼀种HTP提交⽅法,取值为get或post。

②methon属性取值:属性值说明get 默认值,表单数据被传送到action属性指定的URL,然后这个新的URL被送到处理程序上post 表单数据被包含在表单主体中,然后被传送到处理程序上③这两种⽅式的区别在于,get在安全性上较差,所有的表单域的值都直接显⽰出来了。

⽽post除了可见的脚本处理程序之外,其他信息都可以隐藏。

所以在实际开发中,通常选择post处理⽅式。

html中div 和 表单的简单运用

html中div 和 表单的简单运用

html中div 和表单的简单运用在HTML中,<div>和<form>是两个常用的元素,它们各自有着特定的用途。

<div>元素:<div>元素是一个块级元素,通常用于对其他元素进行分组或布局。

它本身并不代表任何特殊的语义,但其样式和布局可以通过CSS 来定义和调整。

例如,你可以使用CSS为<div>设置背景色、边框、宽度和高度等属性。

下面是一个简单的例子:html复制代码<div style="background-color: lightblue; width: 200px; height: 200px;">这是一个div元素。

</div><form>元素:<form>元素用于创建一个HTML表单,用户可以在其中输入数据,例如文本、复选框、单选按钮、提交按钮等。

这些数据可以发送到服务器进行处理。

下面是一个简单的表单例子:html复制代码<form action="/submit" method="post">姓名:<input type="text" name="name"><br>邮箱:<input type="email"name="email"><br><input type="submit" value="提交"></form>在这个例子中,当用户填写完姓名和邮箱并点击“提交”按钮后,表单数据将被发送到服务器的"/submit"路径,处理方法为POST。

结合使用<div>和<form>:你还可以将<div>元素与<form>元素结合使用,以实现更复杂的布局和样式。

HTML FORM表单,input标签的说明

HTML FORM表单,input标签的说明

HTML 表单(Form)是 HTML 的一个重要部分,主要用于采集和提交用户输入的信息。

一个简单的 HTML 表单,包含两个文本输入框和一个提交按钮:<form action="form_action.asp" method="get"> First name: Last name:<input type="text" name="fname" /><input type="text" name="lname" /><input type="submit" value="Submit" /></form>HTML 表单(Form)常用控件(Controls)HTML 表单(Form)常用控件有:      input type="text" 单行文本输入框 input type="submit" 将表单(Form)里的信息提交给表单里 action 所指向的文件 input type="checkbox" 复选框 input type="radio" 单选框 select 下拉框 textArea 多行文本输入框 input type="password" 密码输入框(输入的文字用*表示)表单控件(Form Control):单行文本输入框(input type="text")单行文本输入框允许用户输入一些简短的单行信息,比如用户姓名。

例句如下: <input type="text" name="yourname">表单控件(Form Control):复选框(input type="checkbox")复选框允许用户在一组选项里,选择多个。

html基础-form表单、input输入框、select选择框与文本框(二)

html基础-form表单、input输入框、select选择框与文本框(二)

html基础-form表单、input输⼊框、select选择框与⽂本框(⼆)HTML标签:表单标签概念:⽤于采集⽤户输⼊的数据的。

⽤于和服务器进⾏交互表单标签 form:⽤于定义表单的。

可以定义⼀个范围,范围代表采集⽤户数据的范围form表单属性:1)action:指定提交数据的URL2)method:指定提交⽅式,分类:⼀共7种,2种⽐较常⽤get:1.请求参数会在地址栏中显⽰。

会封装到请求⾏中(HTTP协议后讲解)。

2.请求参数⼤⼩是有限制的。

3.不太安全。

post:1.请求参数不会再地址栏中显⽰。

会封装在请求体中(HTTP协议后讲解)2.请求参数的⼤⼩没有限制。

3.较为安全。

3)表单项中的数据要想被提交:必须指定其name属性例⼦:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>表单标签</title></head><body><form action="/login" method="post">⽤户名:<input name="username"><br>密码:<input name="password"><br><!--登陆按钮--><input type="submit" value="登录" ></form></body></html>结果:input标签:可以通过type属性值,改变元素展⽰的样式label:指定输⼊项的⽂字描述信息, label的for属性⼀般会和 input 的 id属性值 对应。

HTML表单数据处理与提交方法讲解

HTML表单数据处理与提交方法讲解

HTML表单数据处理与提交方法讲解1. 介绍HTML表单是网页中收集用户数据的重要方式之一。

用户可以通过填写表单向服务器提交数据,而服务器则会对这些数据进行处理和存储。

本文将详细介绍HTML表单数据的处理与提交方法。

2. 表单数据处理在提交表单数据之前,需要对其进行处理。

处理表单数据的方式有多种,常用的包括客户端验证和服务器端验证。

2.1 客户端验证客户端验证是指通过客户端浏览器对输入的数据进行初步验证。

这种验证方法可以提供一定的用户体验,但并不可靠,因为客户端验证可以被绕过。

常见的客户端验证方法包括使用HTML5表单验证属性和JavaScript脚本。

2.2 服务器端验证服务器端验证是指在将表单数据提交到服务器之前,在服务器端对数据进行验证。

这种验证方法更加可靠,因为无论用户如何操作,数据都会经过服务器端的验证。

服务器端验证可以使用服务器端脚本语言(如PHP、Python等)进行处理,通过编写脚本逻辑实现对数据的验证。

3. 表单数据提交表单数据提交有两种主要的方法,分别是GET方法和POST方法。

3.1 GET方法GET方法将表单数据附加在URL的末尾,并以查询字符串的形式传递给服务器。

这种方法适合传递小量数据,如搜索关键字等。

通过GET方法提交的数据可以在浏览器地址栏中看到。

使用GET方法提交表单数据的示例代码如下:```html<form action="process.php" method="get"><input type="text" name="username" placeholder="请输入用户名"><input type="password" name="password" placeholder="请输入密码"><input type="submit" value="提交"></form>```在服务器端,可以使用相应的脚本语言(如PHP)来获取GET方法传递的数据。

简述使用html创建表单的基本步骤

简述使用html创建表单的基本步骤

简述使用html创建表单的基本步骤创建表单是一种常见的网页设计需求,表单可以让用户输入数据或提交表单数据。

下面是创建HTML表单的基本步骤:步骤1:HTML标签在HTML中,表单需要使用<form>标签来创建。

该标签包含多个子标签,如<label>标签用于显示表单输入字段的名称</label>,<input>标签用于定义表单输入字段,<button>标签用于创建提交按钮。

例如:```<form><label for="name">姓名:</label><input type="text" id="name" name="name" required><button type="submit">提交</button></form>```步骤2:标签属性表单中的每个输入字段和提交按钮都需要指定属性,以便在服务器端正确地处理它们。

这些属性包括:- `<input>`标签的属性:type(输入类型),id(标识符),name(用于在服务器端查找属性值的名称),required(是否是必须的),value(输入值),pattern(正则表达式)。

- `<button>`标签的属性:type(提交类型),name(用于在服务器端查找属性值的名称),value(提交值),background(背景颜色),color(颜色),hover(hover 状态),优惠政策(是否在浏览器缓存中保留按钮)。

例如:```<form><label for="name">姓名:</label><input type="text" id="name" name="name" required><button type="submit" name="submit" value="提交">提交</button> </form>```步骤3:表单数据表单数据通常通过<input>标签中的type属性指定,例如:```<form><label for="name">姓名:</label><input type="text" id="name" name="name" required><input type="password" id="password" name="password" required> <input type="submit" value="提交"></form>```步骤4:提交表单数据当用户完成表单并单击提交按钮时,浏览器将向服务器发送表单数据。

html表单模板代码

html表单模板代码

html表单模板代码HTML表单是一种用于收集用户输入信息的交互性组件,一般来说表单都由多个表单元素组成,这些表单元素包括文本框,单选框,多选框,下拉框等。

HTML表单模板代码旨在为广大开发者提供模板化的HTML表单代码,方便开发者使用表单进行数据收集。

HTML表单模板代码的基本格式如下:<form action="submit-url" method="post"><label for="input-1">文本框:</label><input type="text" id="input-1" name="input-name"><label>单选框:</label><br><input type="radio" id="radio-1" name="radio-name" value="1"> <label for="radio-1">选项1</label><br><input type="radio" id="radio-2" name="radio-name" value="2"> <label for="radio-2">选项2</label><br><label>多选框:</label><br><input type="checkbox" id="check-1" name="check-name" value="1"><label for="check-1">选项1</label><br><input type="checkbox" id="check-2" name="check-name" value="2"><label for="check-2">选项2</label><br><label>下拉框:</label><br><select id="select-1" name="select-name"><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option></select><br><label for="submit-btn"></label><input type="submit" id="submit-btn" value="提交"></form>上述代码包括了文本框,单选框,多选框和下拉框等常用表单元素的演示。

HTML5+CSS3网页设计基础-第九章-表单(2024版)

HTML5+CSS3网页设计基础-第九章-表单(2024版)

HTML5+CSS3网页设计基础
第9章 表单
第6页
9.1 表单标签
autocomplete:指定表单是否有自动完成功能。取值为on 时,表单有自动完成功能,即将表单控件输入的内容记录下来, 当再次输入时,会将输入的历史记录显示在一个下拉列表中, 以实现自动完成输入。取值为of时表单无自动完成功能。 参考示例:9-1-1.html
HTML5+CSS3网页设计基础
第9章 表单ຫໍສະໝຸດ 第15页9.2.3 其他表单元素
2. select元素 select元素用于创建单选或多选列表,当提交表单时,浏 览器会提交选定的项目。网页上经常看到的城市、出生年月等 下拉列表框就是用select定义的。下拉列表框需要使用 select 标签和option标签定义,格式如下。 <select name="下拉框名" size="行数"
HTML5+CSS3网页设计基础
第9章 表单
第21页
表单的技术。
HTML5+CSS3网页设计基础
第9章 表单
第9页
9.2.2 input元素及其属性
<input>元素是表单中最常见的元素,它必须嵌套在表单 标签中使用,用于定义一个用户的输入项。网页中常见的单 行文本框、单选按钮、复选框等都是通过它定义的
<input>元素的基本语法格式如下。 <input type=“输入类型” name=“控件名” value=“ 默认值” ……> type属性:指定 input元素的输入类型。 name属性:属性的值是相应程序中的变量名。 value属性:属性的值是默认输入值。
HTML5+CSS3网页设计基础

html中的表单标签及表单元素

html中的表单标签及表单元素

html中的表单标签及表单元素1、表单标签<form action="提交地址" method="提交⽅式"></form>表单边框标签:fieldset2、表单元素分为三类:(1)⽂本类型: ⽂本框:text 属性有:disabled(不可操作)、readonly(只读)、placeholder(默认提⽰⽂字)账号:<input type="text"> 密码框:password密码:<input type="password"> 隐藏域:hidden 多⾏⽂本(特殊格式):textarea<textarea name="" id="" ></textarea>(2)选择类型: 单选:radio 属性有:disabled(不可操作)、checkbox(默认选中的)性别:<input type="radio">男 <input type="radio">⼥ 多选:checkbox爱好:<input type="checkbox">打游戏 <input type="checkbox">看电视 <input type="checkbox">看书 下拉(特殊格式):select option 属性(option的属性):selected(默认选中)、multiple(全部显⽰)属性(select的属性):size(显⽰⼏条)<select name="" id=""><option value="">汉族</option><option value="">满族</option><option value="">壮族</option><option value="">回族</option></select>(3)按钮类型: 普通:button<input type="button" value="点我试试"> 提交:submit <input type="submit" value="提交按钮"> 复位:reset<input type="reset" value="清空">其他:1、autofocus属性(聚焦)实例:2、optgroup定义选项组实例:注意:methon:get传值(键值对,显⽰在⽹页的路径上,路径后⾯加数据)post(⽹络传值) ⼀般都⽤post 格式:<form action="#" method="post" enctype="multipart/form-data"> Html5新增:<input type="color"><br><input type="date"><br><input type="search"><br><input type="week"><br><input type="text" name="" list="list"><datalist id="list"><option value="aaa"></option><option value="vvv"></option><option value="ddd"></option></datalist>。

HTML table、form表单标签的介绍

HTML table、form表单标签的介绍
2.3 示例
<form enctype="multipart/form­data" action="ashx/login.ashx" method="post"> <table> <tr> <td><label for="txtname">账号:</label></td> <td><input type="text" id="txtname" name="login_username" /></td> </tr> <tr> <td><label for="txtpswd">密码:</label></td> <td><input type="password" id="txtpswd" name="login_pswd" /></td>
</tr> <tr>
<td colspan=2> <input type="reset" /> <input type="submit" />
</td> </tr> </table> </form>
2.4 应用场景
表单主要用于向服务器传输数据;如常见的登录、注册页面。
3. form 表单提交方式
3.rm> 标签

html中submit的用法

html中submit的用法

html中submit的用法1. HTML中的表单与提交按钮在HTML中,表单是一种常见的元素,用于收集用户输入的数据。

提交按钮是表单中的一个重要组成部分,它允许用户将填写好的表单数据发送到服务器进行处理。

本文将深入探讨HTML中submit按钮的用法,并介绍一些相关技巧。

2. submit按钮的基本用法在HTML中,使用submit按钮可以将表单数据发送到服务器。

要使用submit按钮,需要在form元素内部添加一个input元素,并将其type属性设置为"submit"。

例如:```html<form action="/process" method="POST"><input type="submit" value="提交"></form>```上述代码创建了一个简单的表单,并添加了一个提交按钮。

当用户点击该按钮时,浏览器会将表单数据发送到服务器上指定处理该请求的URL。

3. submit按钮与form属性配合使用除了直接在form元素内添加submit按钮外,我们还可以通过form属性与其他元素关联提交操作。

通过为其他元素设置form属性为对应form元素的id值,可以实现点击该元素时触发相关表单的提交操作。

```html<form id="myForm" action="/process" method="POST"><input type="text" name="name"><button type="submit">提交</button></form><button form="myForm">点击我触发表单提交</button>```上述代码中,在第一个button元素内设置了form属性为对应表单的id值"myForm",这样当用户点击该按钮时,会触发与该id关联的表单的提交操作。

html中form的用法

html中form的用法

HTML中form的用法一、HTML中form的作用和概述HTML中的<form>元素用于创建包含表单控件(如文本框、复选框、下拉列表等)的区域,用户可以在这些控件中输入数据并提交给服务器进行处理。

表单是Web开发中非常常见的组件,它提供了与用户交互和收集信息的基本手段。

二、<form>元素的基本语法和属性在HTML中,元素使用以下语法来定义:<form action="action_page.php" method="post"><!-- input controls --></form><form>元素通常包含一个或多个表单控件和一个提交按钮。

它的常用属性包括:•action:定义表单提交的目标URL地址。

可以是相对URL或绝对URL。

•method:指定表单提交的HTTP方法,常用的有get和post。

•target:指定了将处理并显示响应的窗口、框架或IFrame。

•enctype:指定了表单的编码类型,常见的有application/x-www-form-urlencoded和multipart/form-data。

三、表单控件及其使用1. 文本框()文本框用于接收用户输入的短文本。

它的基本语法如下:<input type="text" name="fname">属性name用于和服务器端代码进行交互,获取用户输入的值。

如果需要指定输入的最大长度,可以使用maxlength属性。

2. 密码框()密码框用于接收用户输入的密码,输入内容会被隐藏。

它的语法类似于文本框,如下所示:<input type="password" name="password">3. 单选框()单选框用于用户在几个选项中选择一个。

复杂表单例题html

复杂表单例题html

复杂表单例题html在Web开发中,表单是用户与网站进行信息交互的重要组成部分。

复杂表单通常包含多个字段、选项和验证规则。

以下是一个HTML复杂表单的例题,包含了常见的表单元素和一些基本的验证需求。

1. 表单基本结构:<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, initial-sc ale=1.0"><title>复杂表单示例</title><link rel="stylesheet"href="styles.css"><!--样式表链接--></head><body><form id="complexForm"action="submit.php"method="post"> <!--姓名--><label for="name">姓名:</label><input type="text"id="name"name="name"required><!--邮箱--><label for="email">邮箱:</label><input type="email"id="email"name="email"required><!--电话--><label for="phone">电话:</label><input type="tel"id="phone"name="phone"pattern="[0-9] {3}-[0-9]{3}-[0-9]{4}"placeholder="123-456-7890"required><!--性别--><label>性别:</label><input type="radio"id="male"name="gender"value="mal e"checked><label for="male">男性</label><input type="radio"id="female"name="gender"value="fe male"><label for="female">女性</label><!--兴趣爱好--><label>兴趣爱好:</label><input type="checkbox"id="reading"name="interests"val ue="reading"><label for="reading">阅读</label><input type="checkbox"id="traveling"name="interests"val ue="traveling"><label for="traveling">旅行</label><input type="checkbox"id="sports"name="interests"value ="sports"><label for="sports">运动</label><!--下拉框--><label for="country">选择国家:</label><select id="country"name="country"><option value="china">中国</option><option value="usa">美国</option><option value="uk">英国</option></select><!--文本域--><label for="message">留言:</label><textarea id="message"name="message"rows="4"cols="5 0"></textarea><!--提交按钮--><button type="submit">提交</button></form></body></html>2. 说明与解析:•<form>标签:包裹整个表单,定义了表单的基本属性,如action 和method。

html form submit session

html form submit session

html form submit session在HTML中,表单(form)是用于收集用户输入的主要工具。

当用户填写表单并点击提交按钮时,表单的数据会被发送到服务器进行处理。

在这个过程中,session起到了非常重要的作用。

HTML FormHTML表单通常包含输入元素(如文本框、复选框、单选按钮等)和一个提交按钮。

下面是一个简单的HTML表单示例:html<form action="/submit" method="post"><label for="username">用户名:</label><br><input type="text" id="username" name="username"><br><label for="password">密码:</label><br><input type="password" id="password" name="password"><br><input type="submit" value="提交"></form>在这个例子中,action="/submit"指定了表单数据提交到的URL,而method="post"指定了HTTP请求方法(在这种情况下是POST)。

Sessionsession是一种在服务器端存储用户信息的机制。

当用户首次访问网站时,服务器会为用户创建一个唯一的session ID,并将其存储在用户的浏览器(通常是通过cookie)中。

HTML表单模板

HTML表单模板

HTML表单模板 1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>登录表单</title>6</head>7<body>8<!-- get post 区别 -->9<form method="post" action="地址">10<table border="1px" cellspacing="0" width="600px">11<tbody>12<tr height="40px">13<td rowspan="4" align="center">总体信息</td>14<td colspan="2"></td>1516</tr>17<tr height="40px">1819<td align="right">⽤户名:</td>20<td>21<input type="text" name="username"/>22</td>23</tr>24<tr height="40px">2526<td align="right">密码:</td>27<td>28<input type="password" name="userpasswd">29</td>30</tr>31<tr height="40px">3233<td colspan="2" align="center">34<input type="submit" value="提交"/>35<input type="reset" value="重置"/>36</td>3738</tr>3940</tbody>41</table>42</form>43</body>44</html>。

html问卷调查表单

html问卷调查表单
<optionvalue="male">男</option>
<optionvalue="female">女</option>
</select><br><br>
<labelfor="country">国家:</label>
<inputtype="text"id="country"name="country"><br><br>
<labelfor="comments">意见和建议:</label><br>
<textareaid="comments"name="comments"rows="4"cols="50"></textarea><br><br>
<inputtype="submit"value="提交">
</form>
</body>
</html>
这个表单包括姓名、邮箱、年龄、性别、国家和意见和建议等字段。当用户填写完表单后,可以点击提交按钮将表单数据提交到服务器的"/submit_survey"处理程序。请注意,这只是一个简单的示例,实际应用中可能需要更多的表单字段和验证逻辑。
html问卷调查表单示例如下:
<!DOCTYPEhtml>

htmltable表单用法

htmltable表单用法

HTML表格(table)是一种用于显示数据的数据结构,它可以包含行(tr)和列(td)。

以下是一个简单的HTML表格表单用法示例:```html<!DOCTYPE html><html><head><title>HTML表格表单</title></head><body><h2>简单的HTML表格表单</h2><table border="1"><tr><th>姓名</th><th>年龄</th><th>城市</th></tr><tr><td>张三</td><td>25</td><td>北京</td></tr><tr><td>李四</td><td>30</td><td>上海</td></tr><tr><td>王五</td><td>28</td><td>深圳</td></tr></table></body></html>```在这个示例中,我们创建了一个包含3列(姓名、年龄、城市)的表格。

每行表示一个人的信息,包括他们的姓名、年龄和所在城市。

我们还为表头添加了`<th>`标签,以区分表头和表格内容。

HTML表单

HTML表单

HTML表单⽬录HTML表单HTML表单是⽤户和web站点或应⽤程序之间交互的主要内容之⼀。

它们允许⽤户将数据发送到web站点。

⼤多数情况下,数据被发送到web服务器,但是web 页⾯也可以⾃⼰拦截它并使⽤它;HTML表单是由⼀个或多个⼩部件组成的。

这些⼩部件可以是⽂本字段(单⾏或多⾏)、选择框、按钮、复选框或单选按钮;HTML表单和常规HTML⽂档的主要区别在于,⼤多数情况下,表单收集的数据被发送到web服务器;form表单所有的HTML表单都是以⼀个<form>标签开始的;form表单:获取⽤户的数据并发送给后端(服务端)<form></form>标签<form action="/my-handling-form-page" method="post"></form>这个元素正式定义了⼀个表单,就像<div>和<p>标签,它是⼀个容器元素,但它也⽀持⼀些特定的属性来配置表单的⾏为⽅式。

它的所有属性都是可选的,但实践中最好⾄少要设置action属性和method属性。

action 属性定义了在提交表单时,应该把所收集的数据送给谁(地址)(URL)去处理,.action="URL"method 属性定义了发送数据的HTTP⽅法(它可以是“get”或“post”),method="数据的提交⽅式"提交⽅式:get post put delete patchinput标签获取⽤户数据最为常⽤的标签就是<input>标签并且该标签是⾏内标签;直接编写input标签会出现黄⾊阴影,原因在于input需要结合lable标签⼀起使⽤;⽅式1:lable包裹input并绑定id<label for='input标签id值'>input标签</label><!--案例--><p><label for="d1">name:<input type="text" id="d1"></label></p>⽅式2:label与input单独出现并绑定id<label for="d1">username:</label><input type="text" id="d1"><!--案例--><p><label for="d1">name:</label><input type="text" id="d1"></p>input标签通过type指定不同的参数来修改表现形式(变形⾦刚)type指定的参数参数说明text普通⽂本password密⽂密码date⽇历展⽰radio 单选 ->多个选项标签需要有相同的name属性默认选中需要额外配置checked='checked'当属性名与属性值相等的时候可以简写checkedcheckbox多选,相当于复选框,默认选中参数也是checkedemail邮箱格式file上传⽂件(单个)file添加multiple参数上传多个⽂件submit提交按钮button普通按钮(本⾝没有任何功能,需要绑定js)reset重置按钮按钮组的提⽰信息可以通过value属性⾃定义,如果不⾃定义那么不同的浏览器可能会展⽰出不同的提⽰信息,尤其是submit按钮select标签下拉框<!--select下拉框,默认单选,多选需要指定参数multiple--><select name="province" id="" ><option value="北京">Beijing</option><option value="上海">Shanghai</option><option value="天津">Tianjin</option></select>进度条标签<progress max="100" value="30">30/100</progress>textarea标签⽂本框<p>textbox:<!-- ⽂本框 --><textarea name="info" cols="30" rows="10"></textarea></p>案例:前后端交互flask框架写后端,可以⽤过后端框架来达到TCP服务端的⽬的from flask import Flask,requestapp = Flask(__name__)@app.route('/index/',methods=['GET','POST'])def index():print(request.form) # 获取普通数据print(request.files) # 获取⽂件数据# print(request.form.get('name'))file_obj = request.files.get('file') # 获取⽂件对象file_obj.save('xxx.md') # 保存⽂件return '提交成功'app.run()HTML表单写提交数据<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><h2>信息页⾯</h2><!--表单--><form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data"> <!--利⽤块级标签分⾏显⽰ --><!--lable绑定id--><p><label for="d1">name:</label><input type="text" id="d1" name="name"></p><!-- 密⽂密码 --><!-- lable标签包裹input --><p><label>pwd:&nbsp;&nbsp;<input type="password" name="pwd"></label></p><p><label>birthday:<input type="date" name="data"></label></p><!--性别单选框--><p>gender<!--如果想要实现单选的功能,name指定同⼀个参数 --><!--checked默认选中,参数名和参数值相同可以简写为checked--><input type="radio" name="gender" checked="checked" value="男">male<input type="radio" name="gender" value="⼥">female<input type="radio" name="gender" value="其他">others</p><!--爱好--><p>hobby:<!-- 复选框 --><input type="checkbox" checked="checked" name="hobby" value="篮球">baskball<input type="checkbox" name="hobby" value="⾜球" >football<input type="checkbox" name="hobby" value="乒乓">pingpang<p>others hobby:<input type="text" name="hobby" value="其他爱好"><p><p>email:<input type="email" name="email" value="please input Email"></p></p><p>province:<!--select下拉框,默认单选,多选需要指定参数multiple--><select name="province" id="" ><option value="北京">Beijing</option><option value="上海">Shanghai</option><option value="天津">Tianjin</option></select></p><p>idol:<!--多选multiple--><select name="idol" id="" multiple><option value="dzj">邓紫棋</option><option value="zjl">周杰伦</option><option value="cyx">陈奕迅</option></select></p><p>textbox:<!-- ⽂本框 --><textarea name="info" id="" cols="30" rows="10"></textarea></p><p>File:<!--上传单个⽂件--><input type="file" name="file"></p><p>MultFile:<!--上传多个⽂件,⽂件夹不可以--><input type="file" multiple name="files"></p><p><!-- 按钮组 --><!-- 添加value可以指定字段,不添加value参数⾃动渲染系统默认的字段 --><input type="submit" value="注册" ><input type="button" value="返回"><input type="reset" value="重置"></p></form></body></html>注意事项:前端通过标签获取⽤户数据发送给后端的过程中标签需要有name属性,相当于字典的key;⽤户输⼊的数据会存储到标签的value属性中,相当于字典的value;如果是选择型标签需要⾃⾏加上name和value;数据的提交地址由form表单的action参数来控制action="URL"# 不写默认朝当前页⾯所在的地址提交method="数据的提交⽅式"⽅式:get post put delete patchform表单在提交数据的时候,如果含⽂件则需要指定两个固定参数:method='post'enctype="multipart/form-data"案例2:简易表单<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Hammer</title><style>form {/* 居中表单 */margin: 0 auto;width: 400px;/* 显⽰表单的轮廓 */padding: 1em;border: 1px solid #af2c2c;border-radius: 1em;}ul {list-style: none;padding: 0;margin: 0;}form li + li {margin-top: 1em;}label {/* 确保所有label⼤⼩相同并正确对齐 */display: inline-block;width: 90px;text-align: right;}input, textarea {/* 确保所有⽂本输⼊框字体相同textarea默认是等宽字体 */font: 1em sans-serif;/* 使所有⽂本输⼊框⼤⼩相同 */width: 300px;box-sizing: border-box;/* 调整⽂本输⼊框的边框样式 */border: 1px solid #999;}input:focus, textarea:focus {/* 给激活的元素⼀点⾼亮效果 */border-color: #000;}textarea {/* 使多⾏⽂本输⼊框和它们的label正确对齐 */vertical-align: top;/* 给⽂本留下⾜够的空间 */height: 5em;}.button {/* 把按钮放到和⽂本输⼊框⼀样的位置 */padding-left: 90px; /* 和label的⼤⼩⼀样 */}button {/* 这个外边距的⼤⼩与label和⽂本输⼊框之间的间距差不多 */margin-left: .5em;}</style></head><body><form action="/my-handling-form-page" method="post"><div><label for="name">Name:</label><input type="text" id="name" name="user_name"></div><div><label for="mail">E-mail:</label><input type="email" id="mail" name="user_email"></div><div><label for="msg">Message:</label><textarea id="msg" name="user_message"></textarea></div><div class="button"><button type="submit">Send your message</button></div><div><!-- <textarea>by default this element is filled with this text</textarea>--> </div></form></body></html>。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
语法
<form action="" method="">
input标记
非input标记
</form>
action:由那个程序来处理表单的内容
method:表单用那种方式提交
input标记
.body 与显示内容有关
<a> 链接、<table> 表格、<ul>列表、<form>表单、<img>图像
3.重点标记
3.1 链接
语法
<a href="地址"></a>
<a href="#"></a>
<a href="" target="_blank"></a>
3.1.2邮件
<a href="mailto:123@">mail to me</a>
3.2 表格
语法
<table>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
</table>
常用的属性
border :设置表格边框
width :60% 占父标记的百分比
bgcolor:背景色
cellpadding:内边距,单元格内容离单元格的距离
cellspacing:外边距,单元格和单元格之间的距离
合并行 rowspan
合并列 colspan
3.3 列表
有序列表 <ol></ol>
无序列表<ul></ul>
3.4 表单
.收集用户信息
frameset 不能有body
/soft/24766.html
target:已什么样的方式打开页面
_blank:在新窗口中打开
_self:在本窗口打开(默认)
3.1.1 使用图片作为链接
<a href=""&4;0"></a>
input type="text"/"password"/"radio"/"checkbox"/"button"/"file"
非input标记
select 下拉框
textArea 文本域
Hale Waihona Puke .5框架 将一个窗口划分为多个窗口,没个窗口都是一个页面
知识点
1.什么是HTML
.hypertext markyup language,超级文本标记语言。
.html文件后缀一般是html/htm。
.由浏览器解释执行,会生成一个显示页面。
2.HTML基本结构
.由标记和标记内容组成
.标记有属性
.html根标记
.head 与显示无关
相关文档
最新文档