表单实例

最新推荐文章于 2022-02-28 21:49:07 发布
最新推荐文章于 2022-02-28 21:49:07 发布
阅读量2.4k 收藏 11
点赞数
CC 4.0 BY-SA版权
分类专栏： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_40196539/article/details/82694821

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表单</title>
    <!-- 表单的主要目的就是为了收集用户信息，在我们的网页中，我们也需要和用户进行交互，收集用户资料，这时候需要表单。在html当中通常由表单控件，提示信息和表单域三个部分构成 -->
</head>
<body>
    <form action="">
    <!-- input控件：<input/> 标签是一个单标签，type是最基本的一个属性-->
    <table width="600" border="0" cellpadding="0" cellspacing="0" align="center">
        <caption><h4>青春不常在，抓紧谈恋爱</h4></caption>
        <tr>
            <td>性别</td>
            <td>
                <!-- 给两个input标签的name属性设置一个相同的值，就可以实现单选 -->
                <!-- checked="checked"设置默认选择项 -->
                男<input type="radio" name="sex" checked="checked"/>
                女<input type="radio" name="sex"/>
            </td>
        </tr>
        <tr>
            <td>生日</td>
            <td>
                <!-- select:下拉菜单 -->
                <select name="" id="">
                <!-- option：选择项 -->
                <option value="">请选择年</option>
                <option value="">2018</option>
                <option value="">2017</option>
                <option value="">2016</option>
                </select>
                <!-- select:下拉菜单 -->
                <select name="" id="">
                <!-- option：选择项 -->
                <option value="">请选择月</option>
                <option value="">9</option>
                <option value="">10</option>
                <option value="">11</option>
                </select>
                <!-- select:下拉菜单 -->
                <select name="" id="">
                <!-- option：选择项 -->
                <option value="">请选择日</option>
                <option value="">6</option>
                <option value="">16</option>
                <option value="">26</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>所在地区</td>
            <td>
                <input type="text" value="北京">
            </td>
        </tr>
        <tr>
            <td>婚姻状况</td>
            <td>
                未婚<input type="radio" name="status" checked="checked"/>
                离婚<input type="radio" name="status"/>
                丧偶<input type="radio" name="status"/>
            </td>
        </tr>
        <tr>
            <td>学历</td>
            <td>
                <input type="text" value="小学">
            </td>
        </tr>
        <tr>
            <td>月薪</td>
            <td>
                <input type="text" value="5000-10000">
            </td>
        </tr>
        <tr>
            <td>手机号</td>
            <td>
                <input type="text" maxlength="11">
            </td>
        </tr>
        <tr>
            <td>密码</td>
            <td>
                <input type="password" maxlength="8">
            </td>
        </tr>
        <tr>
            <td>昵称</td>
            <td>
                <input type="text" size="20">
            </td>
        </tr>
        <tr>
            <td>上传图片</td>
            <td>
                <input type="file" value="上传图像">
            </td>
        </tr>
        <tr>
            <td>喜欢的类型</td>
            <td>
                妩媚<input type="checkbox">
                柔美<input type="checkbox">
                可爱<input type="checkbox">
                小鲜肉<input type="checkbox">
                型男<input type="checkbox">
                气质<input type="checkbox">
            </td>
        </tr>
        <tr>
            <td>自我介绍</td>
            <td>
                <!-- 文本域 ：cos：设置可以写多少列。rows：设置可以写多少行-->
                <textarea cols="30" rows="10">
                </textarea>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="image" src="../素材/btn.png">
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="checkbox" >我同意注册条款和会员加入标准
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <a href="#">我是会员，立即登录</a>
            </td>
        </tr>
    </table>
    </form>
</body>
</html>

结果：

简单的表单示例
qq_45866940的博客
10-24 1241
简历表单 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h3 align="center">个人简历</h3> <table border="1" align="center" cellspacing="0"> <tr&g
HTML5 from表单实例
sun_smile1的博客
04-01 1339
form action="跳转路径" method="get" id="qun"> --> fieldset>边框线--> legend>用户注册legend>边框标题--> table> tr> td>会员名：td> td>input type="text" name
VFP表单实例
12-23
VFP表单实例。里面包含了很多上课可以用得到的例子。不过因为年代久远。恩恩，都是按照书上的顺序来的，所以需要一个个看。
表单例子
磨镜台的博客
04-19 348
<form class="box" action="填写url" method="get"> <h2>个人信息登记表</h2> <!-- 用户名和密码 --> <p> <label>用户名:</label> &l...
表单具体示例
m0_65208646的博客
02-28 216
<form action="" method="post"> 账号：<input type="text" name="un" maxlength="10" placeholder="账号输入不能 超过10个字符"/><br><br> <!-- maxlength限制输入的最大字符长度 ；placehoder文本框提示信息--> 密码：<input type="password" name="pw" placeh.
form表单案例
xiangwangdeshenghuo的博客
03-27 1416
做了一个表单，是在VSCode里写的 应用的表单元素 单行输入框—input 单选按钮------radio 下拉框---------select 多选按钮------checkbox 文本域---------textarea 上传文件------input type=“file” 元素说明 div是块级元素，自动换行 span标签被用来组合文档中的行内元素，通过样式来格式化它们。 opti...
javascript实现自动填写表单实例简析
10-23
在这个实例中，使用了name属性来定位表单元素。例如，通过`document.getElementsByName('thisFnameField')[0].value`可以直接获取到名为`thisFnameField`的输入框的值。在实际开发中，根据具体情况选择最适合的元素...
Vue表单实例代码
10-21
在本篇文章中，我们将详细介绍Vue表单实例代码，并对相关知识点进行阐述。 1. Vue.js基本概念 Vue.js采用MVVM（Model-View-ViewModel）模式，开发者只需关注业务逻辑的处理和数据的处理，而无需过多关注DOM操作。...
PHP 完整表单实例
01-03
PHP 完整表单实例 本章节将介绍如何让用户在点击”提交（submit）”按钮提交数据前保证所有字段正确输入。 PHP – 在表单中确保输入值 在用户点击提交按钮后，为确保字段值是否输入正确，我们在HTML的input元素中...
JavaScript DOM学习第六章 表单实例
10-29
在本章的JavaScript DOM学习中，我们主要探讨了表单实例，特别是如何使用JavaScript来检测用户输入。本章的核心知识点主要集中在以下几个方面： 1. 检测用户在表单中输入内容的实现方法。 2. JavaScript中的表单...
vfp表单实例100
06-21
供初学者下载参考，希望对大家学习vfp有帮助。
html的form表单实例介绍
12-23
html的form表单中button等实例介绍
基本表单实例
weixin_30292843的博客
06-25 182
基本实例 单独的表单控件会被自动赋予一些全局样式。所有设置了.form-control类的<input>、<textarea>和<select>元素都将被默认设置宽度属性为width: 100%;。 将label元素和前面提到的控件包裹在.form-group中可以获得最好的排列。 <form> <div cla...
Django之强大的Form功能
weixin_30781775的博客
08-25 164
Form Form的验证思路 前端：form表单 后台：创建form类，当请求到来时，先匹配，匹配出正确和错误信息。 Django的Form验证实例： 创建project，进行基础配置文件配置 STATIC_URL = '/static/' STATICFILES_DIRS = ( os.path.join(BASE_DIR,"static"), ) s...
完整的一个表单例子
huochequan888的博客
12-13 1707
完整的一个表单例子 .error {color: #FF0000;} // 定义变量并默认设置为空值 $nameErr = $emailErr = $genderErr = $websiteErr = ""; $name = $email = $gender = $comment = $website = ""; if ($_SERVER["REQUEST_M
表单综合案例
little_spice的博客
04-02 2281
html学了有一段时间了，感觉内容很简单但是很杂很多，需要记忆，学完表单结合那几个东西随便写了个案例复习一下。 <!doctype html> <html> <head> <title>表单综合案例</title> </head> <body> <form action='#' ...
html表单整理，实例
热门推荐
chen983234416的博客
11-16 1万+
    首先通过一个实例来表明表单的一些基本的使用，然后详细讲解表单里面的属性，最后再做出总结。   接下来解析上面的例子  1、表单的作用：用来搜集不同类型的用户输入 2、&lt;form action="#" method="get"&gt; &lt;/form&gt; : form标签表示表单。action="#"：设置数据的提交地址，就是提交给 哪一个页面。method="get...
表单的案例
海阔天空
02-22 153
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> form div { height: 40px; line-height: 40px; } form div:nth-child(4) { height
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值