HTML Form表单元素介绍

最新推荐文章于 2022-02-13 17:58:09 发布
最新推荐文章于 2022-02-13 17:58:09 发布
阅读量1.5k 收藏
点赞数
分类专栏： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/limlimlim/article/details/8506341
版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>注册表单</title>
</head>
<body>
    <form action="DoFormAction.htm">
        <fieldset style="width=800px">                                                              <!--套住注册表格的边框-->
        <legend>请输入如下的信息然后进行注册</legend>
        <table cellspacing="0px" cellpadding="6px" border="1px" bordercolor="black" align="center" width="600px">
            <tr>
                <td align="right">用户名:</td>                                   <!--文本框-->
                <td><input type="text" size="20" style="width:150px" /></td>
            </tr>
            <tr>
                <td align="right">密码:</td>                                     <!--密码框-->
                <td><input type="password" size="20" style="width:150px" /></td>
            </tr>
            <tr>
                <td align="right">确认密码:</td>
                <td><input type="password" size="20" style="width:150px" /></td>
            </tr>
            <tr>
                <td align="right">性别:</td>                                      <!--单选框-->
                <td>
                    <input type="radio" checked="checked" name="sex1" value="男" />男&nbsp;
                    <input type="radio" name="sex1" value="女" />女
                </td>
            </tr>
            <tr>
                <td align="right">性别(可以点文字选择):</td>
                <td>
                    <fieldset style="width:150px">                              <!--表单外框，也可以通过css设置宽度-->
                    <legend>请选择性别</legend>
                        <input type="radio" checked="checked" name="sex2" value="男" id="man" />
                        <label for="man">男</label>
                        <input type="radio" name="sex2" value="女" id="woman" />
                        <label for="woman">女</label>
                    </fieldset>
                </td>
            </tr>
            <tr>
                <td align="right">城市:</td>                                    <!--下拉框-->
                <td>
                    <select name="city">
                        <option value="北京">北京</option>
                        <option value="深圳">深圳</option>
                        <option value="上海">上海</option>
                        <option value="南昌" selected="selected">南昌</option>  <!--默认选择南昌-->
                    </select>
                </td>
            </tr>
            <tr>
                <td align="right">城市所在区域:</td>
                <td>
                    <select name="area">        
                        <optgroup label="北京">                                <!--下拉框分组显示-->
                            <option value="朝阳区">朝阳区</option>
                            <option value="海淀区">海淀区</option>
                            <option value="其他区">其他区</option>
                        </optgroup>
                        <optgroup label="南昌">
                            <option value="东湖区">东湖区</option>
                            <option value="西湖区">西湖区</option>
                            <option value="青山湖区">青山湖区</option>                           
                        </optgroup>
                    </select>
                </td>
            </tr>
            <tr>
                <td align="right">交友目标:</td>
                <td>
                    <select name="target" size="3" multiple="multiple">        <!--列表框-->     
                        <option value="同行" selected="selected">同行</option>
                        <option value="普通朋友">普通朋友</option>
                        <option value="爱人">爱人</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td align="right">爱好:</td>
                <td>
                                                                            <!--复选框,注意name属性设置一样，分组-->  
                    <input type="checkbox" name="love" value="足球" />足球
                    <input type="checkbox" name="love" value="蓝球" />蓝球
                    <input type="checkbox" name="love" value="乒乓球" />乒乓球
                </td>
            </tr>
            <tr>
                <td align="right">照片上传:</td>
                <td>
                                                                            <!--文件选择框-->  
                    <input type="file" name="myPic" />
                </td>
            </tr>
            <tr>
                <td align="right">自我介绍:</td>
                <td>
                                                                            <!--多行文本框-->  
                    <textarea rows="5" cols="50">
                    </textarea>
                </td>
            </tr>
            <tr>
                <td align="center" colspan="2">
                    <input type="submit" value="确定" />
                    <input type="reset" value="清空" />                   
                    <input type="image" src="../images/btnreg.png" οnclick="alert('hello')" />      <!--演示图片按钮(会提交数据，类似submit)
                                                                                                    -->
                </td>
            </tr>
        </table>
        </fieldset>
    </form>
</body>
</html>

永远爱好写程序
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML Form表单元素全面了解
09-28
下面小编就为大家带来一篇HTML Form表单元素全面了解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
HTML里的form表单元素总结
qq_52016943的博客
05-25 1万+
1.<form>元素 HTML中用于创建表单的标签是<form>,表单以<from>开头，以</from>结尾. 2.<form>元素的基本属性 <from>元素通常是用来采集用户输入信息的表单控件，也可以包含其他元素，如段落、标题等。但是，不能包含另一个<from>元素，即<from>元素不能嵌套。 补充：method属性--------method属...
form表单元素
qq_42223479的博客
05-28 2948
                                     form表单元素1.form表单元素：常见的表单元素有输入框，单选框，复选框，文本域，密码框等2.其基本样式为&lt;input  type="类型" name="名字"&gt;3.input 为输入框，其因type不同而类型不同4.type类型：（1）checkbox：多选框（2）radio：单行单选框（3）text：文本...
HTML Form元素
歪脖先生的博客
04-11 559
Form元素form元素用来创建表单，它包含多个属性，分别是action属性、method属性、enctype属性、onSubmit属性、onReset属性，接下来对这些属性进行简要介绍：action属性action 属性用来规定访问者提交表单后，服务器端处理脚本的URL。它可以是绝对URL，也可以相对URL。这个URL一般指向服务器端的一个程序，这个程序可以是任何动态网页或 servlet 或C...
form表单的基础了解
Miracle_ze的博客
05-26 1207
form表单的基础了解一、表单作用二、from表单涉及到的基础表单元素1.input元素1.1html5之前的input元素的相关属性1.2补充html5对input中type属性的补充：2.select标签3.textarea标签（初步了解）总结 一、表单作用 表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分： 表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表
html中＜form＞标签的基础知识
fang_my的博客
02-13 3427
form表格的基础理解
JavaScript实现动态添加Form表单元素的方法示例
10-19
在JavaScript中，动态添加Form表单元素是一种常见的需求，特别是在用户需要输入不确定数量的数据时，如上传文件、填写多条信息等。本文将详细介绍如何利用JavaScript实现动态添加表单元素，并提供一个具体示例，涉及...
JS document form表单元素操作完整示例
10-15
在JavaScript中，对HTML表单元素的操作是网页交互的核心部分。`document.form` 提供了访问和操作页面中表单的途径。以下是对标题和描述中提到的知识点的详细解释： 1. **获取表单对象**： - **方法一**：通过ID...
HTML中Form表单的method属性使用介绍
09-28
HTML中的`<form>`元素是创建用户交互表单的核心，用于收集用户输入的数据，并将其发送到服务器进行处理。`method`属性是`<form>`标签的一个关键属性，它定义了如何将这些数据发送到服务器。在HTML中，`method`属性有...
html5+css3实现酷炫的form表单
11-10
HTML5和CSS3是现代网页开发的两大核心技术，它们为创建功能强大且视觉效果丰富的form表单提供了无限可能。在本教程中，我们将探讨如何利用这两者的优势来设计和实现酷炫的form表单。 首先，HTML5引入了新的表单元素...
HTML基础form表单元素
weixin_45387820的博客
07-13 215
表单元素 它是一系列元素 表单对于用户而言是数据的录入和提交的界面； 表单对于网站而言是获取用户信息的途径。 表单基本结构 <form action=""> <input type="text"> <input type="radio"> <input type="checkbox"> <textarea name="" id="" cols="30" rows="10">
HTML form元素
张大一的蜕变之路
10-01 362
分析&lt;form&gt;元素 &lt;form action="http://rb.com/hfhtmlcss/contest.jsp" method="POST"&gt; 表单所有的内容都放在这里.... &lt;/form&gt; action属性是包含Web服务器的URL method属性确定表单数据如何发送到服务器。有两种方法：POST 和 GET。 POST 和 GET ...
HTML自我介绍表格代码制作
weixin_54862883的博客
04-19 8541
<html> <head> <title>张三</title> <mate name="keywords" content="个人简历"/> <mate name="description" content="张三的个人简历"/> </head> <body> <table border=5 bordercolor=red align=center> <tr height=70 bgcol.
html5关于form元素的介绍
wjc_hbu的博客
03-25 3788
众所周知，在web编程中，表单主要用于收集用户输入的数据。HTML5在保留原有HTML表单控件，属性的基础上，大大增强了表单，表单控件的功能。下面我将介绍一些HTML5表单及其控件的知识。 #form     form元素用于生成输入表单，该元素不会可视化，它除了包含像id,class等基本属性和像onclick等事件属性外，还包含了action,meth...
html的FORM元素
很累很累的小魏
08-14 1405
Table 15-1. HTML form elements ObjectHTML tagtype propertyDescription and eventsButton type="button"> or type="button"> "button"A push button; onclick. Checkbox type="checkbox">"checkbox"A toggle but
form基本元素
qq_36470686的博客
09-18 660
&lt;form/&gt;元素用于生成输入表单，该元素不会生成可视化部分。 注：在HTML5规范以前，表单控件都需要放在&lt;form/&gt;元素之内。 &lt;form/&gt;元素可以指定id、style、class等核心属性，还可以指定onclick等事件属性。除此之外还可以指定如下几个属性: action：指定当单击表单内的“确认”按钮时，该表单被提交到哪个地址，可以是绝对地址...
HTML5中的form表单
IBLiplus的博客
07-15 7988
&lt;form&gt; 元素用于生成输入表单，该元素不会生成可视化部分，它除了通用属性id、style、class外，还可以指定onclick事件，除此之外，还有以下几个属性：        Action： 指定当单击表单内的确认按钮时，该表单被提交到那个地址。该属性既可以指定一个绝对地址，也可以指定一个相对地址，该属性必填，非常重要！        method：指定提交表单时发送何种请求，该...
表单基本元素
newtelcom的专栏
06-24 677
注册表单 编 &nbsp号:             用户名:             密 &nbsp码:             性 &nbsp别:男                             女             部 &nbsp门:                    技术部 销售
HTML个人简历表制作
热门推荐
flyljg的专栏
04-01 2万+
简历 <-- h2{text-align:center} --> 个人简历 个人资料 姓名   年龄   政治面貌   性别   身高   婚姻情况   民族   籍贯   健康状况
HTML5表单元素详解与验证实践
- `<form>`: 是HTML5中的核心表单元素，用于定义一组输入控件和提交处理逻辑。`<form>`标签包含了`method`属性，其默认值是GET，但也可以设置为POST，用于指定数据提交的方式。`action`属性定义了表单数据的接收...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值