html基础学习（表单）（三）

最新推荐文章于 2024-04-18 05:00:00 发布
最新推荐文章于 2024-04-18 05:00:00 发布
阅读量114 收藏
点赞数
分类专栏： 前端html css js学习 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36802214/article/details/107086883
版权

基本代码如下 

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>表单select</title>
</head>
<body>
	
 <h1 align="center">注册信息</h1> 
 <hr color="#336699"/> 
 <!--action 定义表单数据提交地址-->
 <form action="action.php" method="post" target="_blank">
  <table width="600px" bgcolor="#f2f2f2" align="center" >
       <tr>
       	   <td align="right">姓名：</td>
       	   <td align="left"><input type="text" name="username" size="25" maxlength="6" placeholder="请输入姓名"/></td>
       </tr>
       <tr>
       	   <td align="right">邮箱：</td>
       	   <td align="left"><input type="text" name="email" value="@163.com"/></td>
       </tr>
       <tr>
       	   <td align="right">密码：</td>
       	   <td align="left"><input type="password" name="paw" size="25" maxlength="6" placeholder="请输入密码"/></td>
       </tr>
       <tr>
       	   <td align="right">确认密码：</td>
       	   <td align="left"><input type="password" name="paw_confirm" size="25" maxlength="6" placeholder="请再输入密码"/></td>
       </tr>
       <tr>
       	   <td align="right">上传照片：</td>
       	   <td align="left"><input type="file" name="file"/></td>
       </tr>
       <tr>
       	   <td align="right">性别：</td>
       	   <td align="left">男<input type="radio" name="sex" value="man"/>
               女<input type="radio" name="sex" value="woman"/>
               保密<input type="radio" name="sex" value="bm" checked/>
       	   </td>
       </tr>
       <tr>
       	   <td align="right">爱好：</td>
       	   <td align="left">读书<input type="checkbox" name="dx1" value="read" checked/>
       	       跳舞<input type="checkbox" name="dx1" value="dance"/>
       	       唱歌<input type="checkbox" name="dx1" value="sing"/></td>
       </tr>
       <tr>
       	   <td align="right">爱好的运动：</td>
       	   <td align="left">跑步<input type="checkbox" name="dx2" value="1" checked/>
       	       篮球<input type="checkbox" name="dx2" value="2"/>
       	       跳绳<input type="checkbox" name="dx2" value="3"/></td>
       </tr>
         <tr>
       	   <td align="right">城市：</td>
       	   <td align="left">
       	   	   <select name="city">
       	   	      <option value="xz">--请选择--</option>
       	   	   	  <option value="bj" selected>北京</option>
       	   	   	  <option value="tj">天津</option>
       	   	   	  <option value="hb">河北</option>
       	   	   	  <option value="sh">上海</option>
       	   	   	  <option value="fj">福建</option>
       	   	   	  <option value="xm">厦门</option>

       	   	   </select>

       	   	   <select name="city" size="6" multiple>
       	   	   	  <option value="bj">北京</option>
       	   	   	  <option value="tj">天津</option>
       	   	   	  <option value="hb">河北</option>
       	   	   	  <option value="sh">上海</option>
       	   	   	  <option value="fj">福建</option>
       	   	   	  <option value="xm">厦门</option>

       	   	   </select>

       	   	    <select name="city">
       	   	      <option>--请选择--</option>
       	   	      <optgroup label="华北">
       	   	   	  <option value="bj" selected>北京</option>
       	   	   	  <option value="tj">天津</option>
       	   	   	  <option value="hb">河北</option>
                  </optgroup>
                  <optgroup label="华东">
       	   	   	  <option value="sh">上海</option>
       	   	   	  <option value="fj">福建</option>
       	   	   	  <option value="xm">厦门</option>
                  </optgroup>
       	   	   </select>

       	   	    <select name="city" size="5" multiple>
       	   	      <option>--请选择--</option>
       	   	      <optgroup label="华北">
       	   	   	  <option value="bj" selected>北京</option>
       	   	   	  <option value="tj">天津</option>
       	   	   	  <option value="hb">河北</option>
                  </optgroup>
                  <optgroup label="华东">
       	   	   	  <option value="sh">上海</option>
       	   	   	  <option value="fj">福建</option>
       	   	   	  <option value="xm">厦门</option>
                  </optgroup>
       	   	   </select>

       	   </td>
       </tr> 
       <tr>
       	  <td align="right">简介:</td>
       	  <td align="left"><textarea name="jj" rows="6" cols="50" placeholder="请输入个人介绍"></textarea></td>
       </tr>          
       <tr >
       	   <td colspan="2" align="center"><input type="button" value="来点我" name="button"/>
       	   <input type="submit" value="submit" name="submit"/>
       	   <input type="reset" value="reset" name="reset"/>
       	   <input type="image" name="image_button" src="image/image-button.png"/>
       	   </td>
       	   
       	   
       </tr>
       <tr>
       	  <td><input type="hidden" name="hidden" value="这是一个用户注册信息"/></td>
       	  <td></td>
       </tr>       

  </table>
 </form>   	
</body>
</html>

网页效果

 

 

 

罗罗诺亚丶索隆
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html学习----表单（二）
weakbirdfarmer的博客
04-21 102
文章目录1.表格标签一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 1.表格标签 1.表格的主要作用:显示、展示数据 <table> <tr><td>姓名</td><td>性别</td><td>年龄</td></tr> <tr><td>艾伦</td><td>小丑</td><td
HTML基础(二)表单
Cocksuck的博客
05-25 465
目录 第二章 HTML第二天 本章要点： 一、Html表单 1. 表单 二、Html框架(frameset) 三、Html内嵌框架 四、项目实战 项目需求分析 项目需求分析 页面设计 编码 测试 维护 项目功能模块实现 第二章 HTML第二天 本章要点： Html表单 Html 框架(frameset) Html内嵌框架。 一、Html表单 1. 表单 表单用于搜集不同类型的用户输入，表单由不同类型的标签组成，实现一个特定功能的表...
【前端学习笔记】HTML 基础
最新发布
2401_84304834的博客
04-18 1717
HTML（HyperText Markup Language，超文本标记语言）是一种用于创建网页的标准标记语言。它允许用户通过结合文本、图像、链接、格式等元素来构建网页，并通过浏览器进行解析和显示。HTML文件通常以.html或.htm为扩展名，包含一系列的标签（tags），这些标签用于定义网页的结构、样式和内容。
HTML基础之表单制作
热门推荐
TangJing_的博客
05-14 2万+
一、知识点 1、表单的作用： 信息的收集 数据的验证 在线考试 调查问卷 2、表单的构成 提示性文字：提示用户如何操作（一般由placeholder属性完成） 表单域：相当于一个容器，包含若干表单控件 表单控件：具体的功能项（按钮，下拉列表，输入框等） 3、表单域 <form action="远程服务器的URL(存放地址)" method="信息的提交方式" name="表单名"> 表单内容 </form> 4、表单控件 （1）input：输入框。都有val
HTML学习之路-04Html表单
weixin_63204687的博客
08-20 2061
完成了表单部分的学习
前端学习 FreeCodeCamp html 注册表单
03-20
本教程将聚焦于FreeCodeCamp提供的HTML注册表单的学习，旨在帮助初学者掌握创建交互式用户输入界面的核心技术。 首先，我们来看`index.html`文件。这个文件是网页的主要源代码，包含了所有HTML标记。一个基本的HTML...
HTML基础回顾前端设计王者荣耀
02-13
在“HTML基础回顾前端设计王者荣耀”这个主题中，我们重点探讨的是如何利用HTML来构建与王者荣耀游戏相关的网页内容。HTML允许开发者通过标签来定义文档结构和内容，使得浏览器能够正确地解析和展示这些内容。 首先...
Flask框架学习笔记之表单基础介绍与表单提交方式
09-18
本篇文章将深入探讨Flask中的表单基础和两种主要的提交方式——GET和POST。 首先，让我们了解表单的基本概念。在HTML中，表单是由`<form>`标签定义的，它包含了各种表单元素，如文本框、密码框、文本区域、单选按钮...
HTML基础学习基础认知，适合小白玩
05-12
第一个网页文档 主体背景设置 设置网页的背景图片 为网页添加背景声音 换行标签 ...表单 ...表单元素 ...表单属性与表单提交 ...WEB基础 外边距 内边距 尺寸 溢出 定位 层叠顺序 对齐方式 CSS布局 清除浮动
JavaEE学习日志(三十九): HTML表单，CSS引入方式
01-08
在JavaEE的学习过程中，了解和掌握HTML表单与CSS的使用是至关重要的。HTML表单是用户与网页交互的主要手段，而CSS则是用于美化和控制网页样式的关键技术。本篇日志将深入探讨这两个主题。 首先，我们来看HTML表单。...
html基础学习（基础标签）（一）
qq_36802214的博客
11-05 1038
近期学习的html记录一下 1、标题标签 &lt;h1&gt;标题标签&lt;/h1&gt; &lt;h2&gt;标题标签&lt;/h2&gt; &lt;h3&gt;标题标签&lt;/h3&gt; &lt;h4&gt;标题标签&lt;/h4&gt; &lt;h5&gt;标题标签&lt;/h5&gt; &lt;h6&gt;标题标
CSS3基础学习（弹性盒子）（八）
qq_36802214的博客
08-19 545
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。 弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。 弹性容器内包含了一个或多个弹性子元素。 属性 描述 display 指定 HTML 元素盒子类型。 flex-direction 指定了弹性容器中子元素的排列方式 justify-content 设置弹性盒子元素在主轴（横轴）方向上的对齐方式。 align-items
CSS基础学习（盒子模型、display）（三）
qq_36802214的博客
07-03 450
盒子模型图 盒子代码学习 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> .p1 { back.
javascript 基础学习（DOM）（四）
qq_36802214的博客
08-11 413
DOM简介 1、DOM树 文档：一个页面就是一个文档，DOM中使用document表示元素：页面中的所有标签都是元素，DOM 中使用element表示节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用node表示 DOM把以上内容都看做是对象 2、获取元素 2.1、HTML5获取元素的方法 //2009 发布的ECMASCRIPT的标准 //通过标签名称获取多个元素 var h1...
CSS基础学习（定位、链接）（四）
qq_36802214的博客
07-10 408
背景 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ width: 100%
CSS基础学习（选择器）（一）
qq_36802214的博客
07-03 289
CSS样式选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> /*标签选择器*/ /* p,h1,h2,h
CSS3基础学习（多列、按钮）（七）
qq_36802214的博客
08-19 280
一、多列 属性 说明 CSS column-count 指定元素应分为的列数 3 column-fill 指定如何填充列 3 column-gap 指定列之间差距 3 column-rule 一个用于设置所有列规则的简写属性 3 column-rule-color 指定的列之间颜色规则 3 column-rule-style 指定的列之间的样式规则 3 column-rule-width
javascript 基础学习（ES6）（二）
qq_36802214的博客
08-06 189
一、let和const let 特性： 用来声明变量，只在它所在的代码块中有效，所以在此块级作用域中不可重复声明； 不存在变量提升，声明后必须使用； 块级作用域中未声明就是用会报错（暂时性死区）；； // var 存在变量提升，undefined是一种数据类型 console.log(foo); // 输出undefined var foo = 2; // let 不声明就使用会报错 console.log(bar); // 报错ReferenceError let bar = 2; cons
javascript 基础学习（BOM）（五）
qq_36802214的博客
08-12 185
DOM与BOM比较： 1、open location 1.1、a标签 跳转界面和界面内部位置跳转的方法 <a href="http://www.baidu.com" target="_blank">百度</a> <a href="#abc">内部锚点跳转</a> <div id="abc"> abc的内容 </div> 1.2、open open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值