HTML & CSS 基本入门【8】表单-天涯论坛

qzmjef 发表于 2024-6-30 08:40:36

HTML & CSS 基本入门【8】表单

<h2 style="color: black; text-align: left; margin-bottom: 10px;">前面</h2>
前面咱们已然熟悉了网页上有些平常的元素，如在网页上表示一段文字、一张照片、一个列表、一张表格等等。这些东西都是事先编辑好表示在页面上只供给给用户看的，实质上，咱们能够把这般的页面叫作之为静态页面。有“静”就有”动”，自然亦就有了动态页面，所说动态页面便是在页面上能供给与用户产生交互的元素，例如：我们想注册作为某个网站的会员，就要填写注册信息提交给网站后台；咱们在网上发布评论；咱们在网上填写有些调查问卷等等。
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-6127acf9ea13b35156649f328fe226b4_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
上图的163邮箱注册页面便是一个表单，在表单中有文本框、下拉列表、按钮等元素，咱们能够经过这些元素完成数据的输入。那样，输入的数据该怎样收集呢？这个就不是HTML所讨论的问题了，属于后台开发，倘若您感兴趣，咱们得另开一栏。这儿咱们先认识一下表单上的平常元素。
<h2 style="color: black; text-align: left; margin-bottom: 10px;">表单元素</h2>
 <form> 标签：用于创建一个表单，表单里面能够包括文本框、按钮、下拉列表等元素。
<input> 元素（输入元素）：是表单里面最常用的元素，它有多种区别的类型（例如：单行文本框、暗码框、单选按钮、复选框等等），能够经过【type】属性来设置。下表列出了平常的类型及说明。
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-f90351b8deb56167688a2c193aaa0700_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
示例代码：
<div style="color: black; text-align: left; margin-bottom: 10px;"><!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title></title>
 </head>
 <body>
 <form>
 账号：<input type="text"/>
 <br />
 暗码：<input type="password"/>
 <br />
 
 性别：<input type="radio" name="sex" value="male"/>男
 <input type="radio" name="sex" value="female"/>女
 <br />
 
 兴趣：<input type="checkbox" name="interest" value="ah1" />游泳
 <input type="checkbox" name="interest" value="ah2" />篮球
 <input type="checkbox" name="interest" value="ah3" />跑步
 <br />
 简历：<input type="file" />
 <br />
 <input type="submit" />
 </form>
 </body>
 </html>
</div>
重视：单选按钮【radio】和复选框【checkbox】里的【name】属性必要为同一值，显示这些选项归属于同一组。
<div style="color: black; text-align: left; margin-bottom: 10px;">
 <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/v2-0afdb3e25f635a100c1518d1008298d0_b.jpg" style="width: 50%; margin-bottom: 20px;"></div>
</div>
 <select> 元素（下拉元素）：下拉列表能有效节约页面的表示空间，可在多个选项里选择其中一个。下拉列表由两个标签构成：
 <select>标签用于定义了一个下拉列表；
<option>标签定义了一个下拉列表里的选项；
示例代码：
<div style="color: black; text-align: left; margin-bottom: 10px;"><!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title></title>
 </head>
 <body>
 <form>
 请选取您的专业：
 <select>
 <option>计算机应用技术</option>
 <option>计算机软件与理论</option>
 <option>计算机体系结构</option>
 <option>软件工程</option>
 </select>
 </form>
 </body>
 </html>
</div>
<div style="color: black; text-align: left; margin-bottom: 10px;">
 <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic4.zhimg.com/v2-dbb2c7a098e3568c5008115bb666ef2b_b.jpg" style="width: 50%; margin-bottom: 20px;"></div>
</div>
<textarea> 元素（多行文本）：咱们能够利用<textarea>元素创建一个文本块输入控件，用于输入多行文本，可输入的字数不受限制。能够经过【rows】和【cols】属性来规定 textarea 的行数和列数（尺寸体积），亦能够运用 CSS 的 height 和 width 属性。
 示例代码：
<div style="color: black; text-align: left; margin-bottom: 10px;"><!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title></title>
 <style type="text/css">
 #textarea2
 {/*设置ID为textarea2的多行文本框的宽、高尺寸*/
 width:200px;
 height:80px;
 }
 </style>
 </head>
 <body>
 <form>个人简介：<br />
 <textarea rows="5" cols="30">请介绍一下你自己</textarea>
 <br />
 学习心得：<br />
 <textarea id="textarea2">学习心得（不少于400字）</textarea>
 </form>
 </body>
 </html>
</div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic3.zhimg.com/80/v2-8d688684ba2d88d710beec5c78512b86_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">小结一下</h2>
小结一下：表单元素的标签咱们初步记住三个就可：
1、输入元素<input>：这个里面包含了非常多区别类型的标签，例如：单行文本框、暗码框、按钮、单选按钮、多选框等等，它们用【type】属性加以区分。
2、下拉列表< select >：便是个下拉列表框，无其它类别。由两部分构成：定义标签< select >和选项标签< option >，
3、多行文本< textarea >：便是多行文本框，亦无其它类别。
其实倘若咱们学习后台研发，例如利用微软的VS平台，在它的工具箱里有所有的标签控件，咱们能够直接拉到编辑窗口直接运用。
-------------------------- END --------------------------

4lqedz 发表于 2024-10-31 07:07:17

论坛的成功是建立在我们诚恳、务实、高效、创新和团结合作基础上，我们要把这种精神传递下去。

b1gc8v 发表于昨天 16:21

百度seo优化论坛 http://www.fok120.com/

页: [1]

天涯论坛's Archiver

HTML & CSS 基本入门【8】表单