Html表单Form

最新推荐文章于 2024-07-15 17:03:25 发布
最新推荐文章于 2024-07-15 17:03:25 发布
阅读量193 收藏 1
点赞数 4
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ChucK_57/article/details/117468618
版权

表单标签

定义和用法

<form> 标签用于为用户输入创建 HTML 表单。

表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含 menus、textarea、fieldset、legend和 label 元素。

表单用于向服务器传输数据。

提示和注释

注释：form 元素是块级元素，其前后会产生折行。

 

 

文本域（Text Fields）

文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

<form>

First name: <input type="text" name="firstname"><br>

Last name: <input type="text" name="lastname">

</form>

注意:表单本身并不可见。同时，在大多数浏览器中，文本域的默认宽度是 20 个字符。

 

密码字段

密码字段通过标签<input type="password"> 来定义:

<form>

Password: <input type="password" name="pwd">

</form>

注意:密码字段字符不会明文显示，而是以星号或圆点替代。

 

单选按钮（Radio Buttons）

<input type="radio"> 标签定义了表单单选框选项

<form>

<input type="radio" name="sex" value="male">Male<br>

<input type="radio" name="sex" value="female">Female

</form>

 

复选框（Checkboxes）

<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

 

<form>

<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>

<input type="checkbox" name="vehicle" value="Car">I have a car

</form>

 

提交按钮(Submit Button)

<input type="submit"> 定义了提交按钮.

 

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:

<form name="input" action="html_form_action.php" method="get">

Username: <input type="text" name="user">

<input type="submit" value="Submit">

</form>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form</title>
</head>
<body>
    <form action="#" method="POST">
        <table border = "1" >
            <caption><h2>个人简历</h2></caption>
            <tbody>
                <tr>
                    <td width="100px" style="text-align: center;">姓名</td><td width="100px"><input style="width: 100px;" type="text" name="username"></td>
                    <td width="100px" style="text-align: center;">性别</td> <td width="100px"><input style="width: 100px;" type="text" name="sex"></td>
                    <td width="100px" style="text-align: center;">出生年月</td> <td width="100px"><input style="width: 100px;" type="text" name="birthday"></td>
                    <td rowspan="4" valign="top" ><input type="button" value="选择文件">未..</td>
                </tr>
                <tr>
                    <td width="100px" style="text-align: center;">民族</td><td width="100px"><input style="width: 100px;" type="text" name="nation"></td>
                    <td width="100px" style="text-align: center;">政治面貌</td><td width="100px"><input style="width: 100px;" type="text" name="political"></td>
                    <td width="100px" style="text-align: center;">身高</td><td width="100px"><input style="width: 100px;" type="text" name="height"></td>
                </tr>
                <tr>
                    <td width="100px" style="text-align: center;">学制</td><td width="100px"><input style="width: 100px;" type="text" name="educational"></td>
                    <td width="100px" style="text-align: center;">学历</td><td width="100px"><input style="width: 100px;" type="text" name="education"></td>
                    <td width="100px" style="text-align: center;">户籍</td><td width="100px"><input style="width: 100px;" type="text" name="householdRe"></td>
                </tr>
                <tr>
                    <td width="100px" style="text-align: center;">专业</td><td width="100px"><input style="width: 100px;" type="text" name="speciality"></td>
                    <td colspan="2" width="100px" style="text-align: center;">毕业学校</td><td colspan="2"><input style="width: 200px;" type="text" name="school"></td>
                </tr>
                <tr>
                    <td colspan="7"  style="text-align: center;"><b>技能、特长或爱好</b></td>
                </tr>
                <tr>
                    <td width="100px" style="text-align: center;">外语等级</td><td colspan="2"><input style="width: 208px;" type="text" name="foreignLanguageLevel"></td>
                    <td width="100px" style="text-align: center;">计算机</td><td colspan="3" ><input style="width: 308px;" type="text" name="computer"></td>
                </tr>
                <tr>
                    <td colspan="7"  style="text-align: center;">个人履历</td>
                </tr>
                <tr>
                    <td width="100px" style="text-align: center;">时间</td>
                    <td colspan="2" style="text-align: center;">单位</td>
                    <td colspan="4" style="text-align: center;">经历</td>
                </tr>
                <tr>
                    <td width="100px" ><input style="width: 100px;" type="text" name="time1"></td>
                    <td colspan="2" ><input style="width: 208px;" type="text" name="unit1"></td>
                    <td colspan="4" ><input style="width: 422px;" type="text" name="experience1"></td>
                </tr>
                <tr>
                    <td width="100px" ><input style="width: 100px;" type="text" name="time2"></td>
                    <td colspan="2" ><input style="width: 208px;" type="text" name="unit2"></td>
                    <td colspan="4" ><input style="width: 422px;" type="text" name="experience2"></td>
                </tr>
                <tr>
                    <td width="100px" ><input style="width: 100px;" type="text" name="time3"></td>
                    <td colspan="2" ><input style="width: 208px;" type="text" name="unit3"></td>
                    <td colspan="4" ><input style="width: 422px;" type="text" name="experience3"></td>
                </tr>
                <tr>
                    <td colspan="7"  style="text-align: center;">联系方式</td>
                </tr>
                <tr>
                    <td width="100px" style="text-align: center;">通信地址</td><td colspan="2"><input style="width: 208px;" type="text" name="address"></td>
                    <td width="100px" style="text-align: center;">联系电话</td><td colspan="3" ><input style="width: 308px;" type="text" name="telephone"></td>
                </tr><tr>
                    <td width="100px" style="text-align: center;">E-mail</td><td colspan="2"><input style="width: 208px;" type="text" name="e-mail"></td>
                    <td width="100px" style="text-align: center;">邮编</td><td colspan="3" ><input style="width: 308px;" type="text" name="Postcode"></td>
                </tr>
                <tr>
                    <td colspan="7"  style="text-align: center;">自我评价</td>
                </tr>
            </tbody>
        </table>
    </form>
</body>
</html>

实现效果：

 

ChucK_57
关注
  • 4
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
html之form表单
Jerry_0728的博客
11-04 487
目标： form表单标签 form表单属性 #1，form表单标签 什么是form？ form表单，用于采集用户的信息，提交到后台 语法： <form action="后台的地址" method=“get/post”> form表单的标签 </form> ##form表单标签： #1，input输入框 语法：<input type="类型" /> 文本框 type=“text” 密码框 type=“password” 提交按钮 type=“subm
html的form表单详解
秃头的博客
02-23 5026
这里写目录标题Form表单介绍表单元素单选按钮复选框文件隐藏域提交按钮重置按钮按钮图像图片按钮下拉列表多行文本框(文本域)HTML5新增type类型HTML5新增属性 Form表单介绍 表单在 Web 网页中用来给访问者填写信息，从而能采集客户端信息，使网页具有交互的功能。一般是将表单设计在一个Html 文档中，当用户填写完信息后做提交(submit)操作，于是表单的内容就从客户端的浏览器传送到服务器上，经过服务器上的 ASP 或 PHP 等处理程序处理后，再将用户所需信息传送回客户端的浏览器上，这样网页就
form标签的作用
z2431435的博客
05-12 3464
form标签用于为用户输入创建 HTML 表单 表单用于向服务器传输数据。 action通过设置submit按钮可以将表单数据传输到指定文件 规定当提交表单时向何处发送表单数据。 form 元素是块级元素 method表单数据可以作为 URL 变量（method="get"）或者 HTTP post （method="post"）的方式来发送 采用 POST 方法：浏览器将与 action 属性中指定的表单处理服务器建立联系 一旦建立连接之后，浏览器就会按分段传输的方法将数据发送给服务器。 .
html中form表单标签的使用
qq_44009317的博客
05-25 1444
在html中，表单是经常用到的，用来与用户交互并提交数据。今天要介绍的就是表单标签form标签 “form”作为英文单词有“表格”的意思 1.定义和用法 标签是使用来创建供用户输入的html表单，在网页中很常见，比如：注册和登录页面就是用表单实现的。 标签中通常会有很多子元素，用来定义各种交互控件（文本字段、复选框、单选框、提交按钮等等），比如< input>、< button>、< select>、< textarea>等标签。 2.语法格式 <for
HTML里的form表单元素总结
qq_52016943的博客
05-25 1万+
1.<form>元素 HTML中用于创建表单的标签是<form>,表单以<from>开头，以</from>结尾. 2.<form>元素的基本属性 <from>元素通常是用来采集用户输入信息的表单控件，也可以包含其他元素，如段落、标题等。但是，不能包含另一个<from>元素，即<from>元素不能嵌套。 补充：method属性--------method属...
HTML中Form表单的使用
热门推荐
pan_junbiao的博客
06-20 5万+
1、form表单标记 表单标记以<form>标记开头，以</form>标记结尾。在表单标记中可以定义处理表单数据程序的URL地址等信息。 <form>标记的基本语法如下： <form action="url" method="get | post" name="formName" onsubmit="" target=""> </for...
HTML——form表单标签
qq_43243728的博客
11-06 2287
上一个说了一下标签初识！这次说一下form标签！ form标签：表单标签，是用户和服务器进行数据交互的渠道和手段。<form> 标签用于为用户输入创建 HTML 表单。表单能够包含input 元素，比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含menus、textarea、fieldset、legend和label 元素。表单用于向服务器传输数据。 简单的简单的...
多种实例解析HTML表单form的使用方法
09-28
本文将通过多个实例深入解析HTML表单`<form>`的使用方法。 首先，`<form>`标签是创建表单的基础，用于定义一个用户输入区域。它的基本语法如下： ```html <form method="传送方式" action="服务器文件"> <!-- ...
HTML的form表单和django的form表单
09-18
HTML的form表单和Django的form表单是Web开发中的两种重要概念，它们在构建交互式用户界面中起着核心作用。HTML的form表单主要用于收集用户输入的数据，而Django的form表单则是一种更高级的抽象，用于处理这些数据的...
HTML Form表单元素全面了解
09-28
下面小编就为大家带来一篇HTML Form表单元素全面了解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Form 动态表单demo
09-13
1. **HTML**：表单的基础结构是由HTML代码构建的，如`<form>`、`<input>`、`<select>`等元素，用于定义表单的布局和输入控件。 2. **JavaScript/jQuery**：为了实现动态性，通常需要使用JavaScript或者库如jQuery来...
form和table的区别
huang9012的专栏
06-22 3846
form和table的区别  (2010-07-16 10:48:43) 转载 标签：  动画   name   tr   td   表单   it 分类： html 标签： 作用： 标签用于为用户输入创建 HTML 表单。 1.表单能够包含  标签" href="http://www.w3school.
HTML ＜form＞标签
wwqwwqwwq352的博客
05-28 977
<form>标签定义 <form>标签用于创建供用户输入的 HTML 表单。 而表单在网页中主要的的功能是数据收集。 表单一般分为三个部分：表单标签，表单域，表单按钮； 表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域：包含文本框，密码域，多行文本框，复选框，单选框，下拉选择框和文件上传框等等，用来收集用户填写的数据，由<inout>来实现。 表单按钮：提交按钮，复位按钮，和一般按钮。 表单标签 使用...
表单属性问题readonly、disabled、checked，prop的使用
weixin_30772261的博客
10-12 797
获取在匹配的元素集中的第一个元素的属性值。 随着一些内置属性的DOM元素或window对象，如果试图将删除该属性，浏览器可能会产生错误。jQuery第一次分配undefined值的属性，而忽略了浏览器生成的任何错误 我一般用在 $("input[type='checkbox']").prop("disabled", false); $("input[type='checkbox']...
form表单的作用php,HTML中的form标签有什么作用？HTML form标签的用法解释
weixin_39647186的博客
03-10 747
本篇文章主要的介绍了关于HTML中的form标签的作用和用法，还有form标签的实例和定义，接下来就让我们来看看本篇文章吧。一、先看看HTML中form标签的定义： 标签用于为用户输入创建 HTML 表单。表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。表单用于向服务器传...
form用法 html,HTML中form表单的用法
weixin_33212575的博客
06-21 165
标签用于为用户输入创建 HTML 表单。表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。表单用于向服务器传输数据。常见的表单元素type="text"，用于对文本域进行文本的输入type="password",用户进行密码的输入，隐藏输入内容type="checkbox...
html中什么标签用于网页中创建表单,html中表单的标签是什么
weixin_36315943的博客
06-11 7038
在html中，表单的标签是form，语法“表单内容”；form标签用于为用户输入创建HTML表单，包含input、label、select等其他元素。本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。标签定义及用法在html中，标签是使用来创建供用户输入的html表单，在网页中很常见，比如：注册和登录页面就是用表单实现的。标签中通常会有很多子元素，...
html 关闭信息窗口
cuisidong1997的博客
07-14 338
如果你想要通过点击favicon来关闭一个窗口，你需要添加一个监听器来监听favicon的点击事件，但是由于favicon通常不支持JavaScript事件监听，你可能需要使用一些特殊的技巧，例如监听鼠标移动到favicon上的事件，并通过这种方式触发窗口关闭。如果你是指的是一个favicon（网页标题前的小图标），并且你想要通过点击这个图标来关闭一个信息窗口，那么你需要使用JavaScript来监听favicon的点击事件，并在事件处理函数中执行关闭窗口的操作。html 关闭信息窗口 ico。
HTML-VUE页面调用android 客户端网络请求并返回数据
最新发布
weixin_42504805的博客
07-15 207
确保WebView的设置允许JavaScript接口，并且WebView加载的页面有权限调用这些接口。这样，当用户在Vue页面中点击按钮时，会通过WebView调用Android客户端的网络请求方法，然后将结果回调到Vue页面中显示。在Html-- Vue页面调用Android客户端网络请求并返回数据，通常需要通过WebView与Android客户端的JavaScript接口进行交互。2.在WebView中设置该接口。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值