web前端：html_html/css_WEB-ITnose-HTML Tutorial-php.cn

Table of Contents

标题

Home

Web Front-end

HTML Tutorial

web前端：html_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:38 AM

一、理解表单的作用

1、web 应用程序不仅仅是给用户显示数据，还应该给用户提供一个可以输入数据的图形用户界面。表单的主要作用在于在网页上提供一个图形用户界面，已采集和提交用户输入的数据。

2、html表单元素和属性可以分为两种类型：

（1）定义表单整体结构，使浏览器知道如处理表单数据的元素；

(2) 创建输入控件的元素。

3、最小的表单格式

）

4、http cet协议

(http：//www.example.com/forums.cgi?id=1234&data=guest)

5、使用输入控件

1 inpu：该元素使用type属性定义不同的控件，包括文本和口令字段、复选框、单选框、提交和重置按钮、隐藏域和图像

2 select和option：二者组合使用，创建一个下拉列表

3 textarea：创建一个多行输入的文本框

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body> <table border="1"> <tr> <th colspan="4" bgcolor="aqua" >机票信息查询</th> </tr> <tr> <td bgcolor="#7fffd4">查询年份：</td> <td style="width: 400px" bgcolor="#a9a9a9"> <select name="year" id="year"> <option value="">2014</option> <option value="">2015</option> <option value="">2016</option> <select> 机票状态 <select name="year" id="year" style="width: 100px"> <option value=""></option> </select> </td> <td bgcolor="#7fffd4">模糊查询：</td> <td style="width: 400px" bgcolor="#a9a9a9"> <input type="text" id="firstname"> </td> </tr> <tr> <td bgcolor="#7fffd4">支付方式：</td> <td bgcolor="#a9a9a9"> <select name="food" id="food" style="width: 150px"></select></td> <td bgcolor="#7fffd4">航空公司：</td> <td bgcolor="#a9a9a9"> <select name="food" id="food" style="width: 200px"></select></td> </tr> <tr> <td bgcolor="#7fffd4">机票经手：</td> <td bgcolor="#a9a9a9"> <select name="food" id="food" style="width: 250px"></select></td> <td bgcolor="#7fffd4">未尽事宜：</td> <td bgcolor="#a9a9a9"> <input type="checkbox" name="city" id="sh" style="width: 20px" /> <input type="text" id="firstname"/></td> </tr> <tr> <td bgcolor="#7fffd4">证件状态：</td> <td bgcolor="#a9a9a9"> 寄票日期 </td> <td bgcolor="#7fffd4">出票机构：</td> <td bgcolor="#a9a9a9"> <select name="food" id="food" style="width: 200px"></select></td> </tr> <tr> <td bgcolor="#7fffd4">订票日期：</td> <td bgcolor="#a9a9a9"> <input type="text" id="good" style="width: 50px" /> <input type="text" style="width: 50px" /></td> <td bgcolor="#7fffd4">出发日期：</td> <td bgcolor="#a9a9a9"> <input type="text" id="good" style="width: 50px" /> <input type="text" style="width: 50px" /></td></td> </tr> <tr> <td bgcolor="#7fffd4">出票日期：</td> <td bgcolor="#a9a9a9"> <input type="text" id="good" style="width: 50px" /> <input type="text" style="width: 50px" /></td></td> <td bgcolor="#7fffd4">应收结清：</td> <td bgcolor="#a9a9a9"> <select name="good" id="good" style="width: 250px"></select></td> </tr> <tr> <td bgcolor="#7fffd4">订票号码：</td> <td bgcolor="#a9a9a9"> <input type="text" style="width: 200px"/></td> <td bgcolor="#7fffd4">事故状态：</td> <td bgcolor="#a9a9a9"> <select name="good" style="width: 100px"></select></td> </tr> <tr> <td bgcolor="#7fffd4">所在国家：</td> <td bgcolor="#a9a9a9"> <select name="good" style="width: 150px"></select></td> <td bgcolor="#7fffd4">王朝号码：</td> <td bgcolor="#a9a9a9"> <input type="text" style="width: 200px"/></td> </tr> <tr> <td bgcolor="#7fffd4">机票号码：</td> <td bgcolor="#a9a9a9"> <input type="text" style="width: 200px"/></td> <td bgcolor="#7fffd4">价格代码：</td> <td bgcolor="#a9a9a9"> <input type="text" style="width: 70px"/> <button>每页行数：</button> <input type="text" style="width: 50px"/></td> </tr> <tr> <td bgcolor="#7fffd4">成都收款：</td> <td bgcolor="#a9a9a9"> <input type="checkbox" name="city" id="sh" style="width: 20px"/> 已收出票经手 <select name="food" style="width: 50px"></select> </td> <td bgcolor="#7fffd4">对账核实：</td> <td bgcolor="#a9a9a9"> <select name="food" style="width: 70px" ></select></td> </tr> <tr> <td bgcolor="#7fffd4">利润限定：</td> <td bgcolor="#a9a9a9"> <input type="checkbox" style="width: 20px"/>仅显示利润小于10</td> <td bgcolor="#7fffd4">指定列表：</td> <td bgcolor="#a9a9a9"> <input type="radio" id="gender" value="male" >出票</input> <input type="radio" id="gender" value="male" >收款</input> <input type="radio" id="gender" value="male" >地址</input> <input type="radio" id="gender" value="male" >联系</input> <input type="radio" id="gender" value="male" >销售</input> <input type="radio" id="gender" value="male" >收款2</input> </td> </tr> <tr> <th colspan="4" bgcolor="aqua">退款选项</th> </tr> <tr> <td bgcolor="#7fffd4">退票清单：</td> <td bgcolor="#a9a9a9"> <input type="checkbox" style="width: 20px"/>只显示退款信息 </td> <td bgcolor="#7fffd4">入账未到：</td> <td bgcolor="#a9a9a9"><input type="checkbox" style="width: 20px"/></td> </tr> <tr> <td bgcolor="#7fffd4">出账未到：</td> <td bgcolor="#a9a9a9"><input type="checkbox" style="width: 20px"/></td> <td bgcolor="#7fffd4">退款经手：</td> <td bgcolor="#a9a9a9"><select name="food" style="width: 200px" ></select> </td> </tr> <tr> <th colspan="4" bgcolor="#ff7f50"><button>确定</button> <button>退出</button></th> </tr> </table></body></html>

Copy after login

1	`<h1 id="标题">标题</h1>`

Copy after login

1	`<p>段落</p>`

Copy after login

1	`<blockquote>引用</blockquote>`

Copy after login

1	`<ul>无序列表</ul>`

Copy after login

1	`<ol>有序列表</ol>`

Copy after login

1	`<dl>定义列表</dl>`

Copy after login

1	`<pre` `class="brush:php;toolbar:false">预定义标签</per>`

Copy after login

1	`<div>相当于区域块</div>`

Copy after login

1	`<span>针对一段文字</span><a>行内元素</a>`

Copy after login

1	`<strong>块级元素与内嵌元素</strong>`

Copy after login

1	<strong>【块级元素：div，blockquote，列表元素（dl，ol，ul），fiekdset，from，h1-h6，hr，p，pre，table 等】</strong><strong>【内嵌元素：span，a，img，label，所有的表单输入元素，iframe，object 等】1 如果是内嵌元素，下一个元素就显示在该元素同一行上的后续位置。2 如果是块级元素，下一个元素就在浏览器下一行显示。3 元素中的文本按照元素的级别，浏览器使用不同大小的默认字体表示。</strong>

Copy after login

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Assassin's Creed Shadows: Seashell Riddle Solution

4 weeks ago By DDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues

3 weeks ago By DDD

Where to find the Crane Control Keycard in Atomfall

4 weeks ago By DDD

Roblox: Dead Rails - How To Complete Every Challenge

1 months ago By DDD

Atomfall guide: item locations, quest guides, and tips

1 months ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7700

Java Tutorial

1640

CakePHP Tutorial

1393

Laravel Tutorial

1287

PHP Tutorial

1230

Related knowledge

Is HTML easy to learn for beginners? Apr 07, 2025 am 12:11 AM

HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.

The Roles of HTML, CSS, and JavaScript: Core Responsibilities Apr 08, 2025 pm 07:05 PM

HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.

What is an example of a starting tag in HTML? Apr 06, 2025 am 12:04 AM

AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.

Understanding HTML, CSS, and JavaScript: A Beginner's Guide Apr 12, 2025 am 12:02 AM

WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors? Apr 04, 2025 pm 11:54 PM

GiteePages static website deployment failed: 404 error troubleshooting and resolution when using Gitee...

How to implement adaptive layout of Y-axis position in web annotation? Apr 04, 2025 pm 11:30 PM

The Y-axis position adaptive algorithm for web annotation function This article will explore how to implement annotation functions similar to Word documents, especially how to deal with the interval between annotations...

HTML, CSS, and JavaScript: Essential Tools for Web Developers Apr 09, 2025 am 12:12 AM

HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.

How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking? Apr 05, 2025 am 06:15 AM

To achieve the effect of scattering and enlarging the surrounding images after clicking on the image, many web designs need to achieve an interactive effect: click on a certain image to make the surrounding...

See all articles