JavaScript 程序设计基础(02) -- 表单，常用的表单类型介绍，外部样式表

最新推荐文章于 2022-05-12 15:21:42 发布
最新推荐文章于 2022-05-12 15:21:42 发布
阅读量930 收藏
点赞数
分类专栏： 初级
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Anubies/article/details/42131635
版权

 JavaScript中表单的属性 作用，常用的表单类型介绍，外部样式表等介绍

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="description" content="提供百万部免费电影下载">
    <meta name="keywords" content="手机特卖 低价手机 低价iPhone">
    <!--网页搜索时，的关键字，不会显示在网页内容中-->
    <title>表单</title>
    <!--外部样式链接 所有样式都写在另外的外部样式文件中-->
    <link href="css/global.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <!-- action属性：处理表单的服务器程序 -->
    <!-- method属性: 提交表单的方式 (get / post / put* / delete*)-->
    <div id="myform" align="center">
        <form action="aa" method="get">
            <!-- 隐式表单域(隐藏域) -->
            <input type="hidden" name="a" value="b" />
            <fieldset>
                <legend>用户注册</legend>
                <table>
                    <tr>
                        <td class="ra">用户名:</td>
                        <!--表单控件的name属性对服务器很重要-->
                        <td><input type="text" name="user"/></td>
                    </tr>
                    <tr>
                        <td class="ra">密码:</td>
                        <td><input type="password" name="pass" /></td>
                    </tr>
                    <tr>
                        <td class="ra">确认密码:</td>
                        <td><input type="password" name="repass" /></td>
                    </tr>
                    <!--加了checked 就是提前直接选定。自动单选分组了-->
                    <tr>
                        <td class="ra">性别:</td>
                        <td>
                            <input type="radio" name="sex" />男
                            <input type="radio" name="sex" checked/>女
                        </td>
                    </tr>
                    <tr>
                        <td class="ra">爱好:</td>
                        <td>
                            <input type="checkbox" name="fav" />吃饭
                            <input type="checkbox" name="fav" checked/>睡觉<br/>
                            <input type="checkbox" name="fav" />旅游
                            <input type="checkbox" name="fav" />看书
                        </td>
                    </tr>
                    <tr>
                        <td class="ra">所在地区:</td>
                        <td>
                            <select name="prov">
                                <option>四川省</option>
                                <option>广东省</option>
                                <option>河南省</option>
                                <option selected>北京市</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td class="ra">出生日期:</td>
                        <td>
                            <input type="date" name="birthday"/>
                        </td>
                    </tr>
                    <!--使用邮箱类型，客户端在输入时，输入法会有相应的改变（比如多出.com快捷按钮之类的-->
                    <!--其实和一般的输入框差不多-->
                    <tr>
                        <td class="ra">邮箱: </td>
                        <td>
                            <input type="email" name="email"/>
                        </td>
                    </tr>
                    <tr>
                        <td class="ra">头像: </td>
                        <td>
                            <input type="file" name="photo" />
                        </td>
                    </tr>
                    <tr>
                        <td class="ra">自我介绍: </td>
                        <td>
                            <textarea rows="5" cols="30" name="intro"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" class="ca">
                            <input type="image" src="images/login.gif" />
                        </td>
                    </tr>
                </table>
            </fieldset>
        </form>
    </div>
</body>
</html>

外部样式表简单使用 

.ra {text-align: right; color:blue;}
.ca {text-align: center;}
tr {line-height: 35px;}
#myform {width: 600px; background-color: antiquewhite;}
textarea {resize: none;}
input[type="text"], input[type="email"] { border:1px solid blue; }
input[type="password"] { border: 1px solid red; }


Anubies
关注
专栏目录
HTML中几种常见的表单类型举例
qq_51735681的博客
05-06 2818
HTML中几种常见的表单类型举例： 带边框的表单 在数据周围绘制一个带标题的框，主要用到<fieldset> </fieldset>标签和<legend> </legend>标签。其中<fieldset> </fieldset>标签是用来形成表格，<legend> </legend>标签是用来定义边框的标题。 举例代码如下： <!DOCTYPE html> <html lang="en">
Javascript学习笔记（详）（六）——表单
Snowzhao的博客
08-03 490
表单脚本 表单的基础知识 在javascript中，表单对应的是HTMLFormElement类型，继承自HTMLELement类型。独特的属性与方法： acceptCharset：服务器能够处理的字符集；等价于HTML 中的accept-charset 特性。 action：接受请求的URL；等价于HTML 中的action 特性。 elements：表单中所有控件的集合（HTMLCollection）。 enctype：请求的编码类型；等价于HTML 中的enctype 特性。 length：表单中控
1. 常用表单类型
大头鱼
07-25 562
常用的h5表单类型
HTML表单
qq_56515781的博客
05-12 193
HTML表单
表单
cqzdmm的博客
11-15 891
可以收集用户的信息和反馈意见，是网站管理者与浏览者之间沟通的桥梁。 有两个部分一种是一部分是HTML源代码用于描述表单（例如，域，标签和用户在页面上看见的按钮）另一部分是脚本或应用程序用于处理提交的信息 表单分为三大类 一 文本类 文本类又包括文本域框 input type = “text” / 密码框input type = “password” 隐藏域input type = “hidden...
常见的表单元素有哪些？各有什么属性？
热门推荐
天心天地生的博客
10-07 1万+
常用的表单元素 form: 定义供用户输入的表单。 fieldset: 定义域。即输入区加有文字的边框。 legend：定义域的标题，即边框上的文字。 label：定义一个控制的标签。如输入框前的文字，用以关联用户的选择。 input: 定义输入域，常用。可设置type属性，从而具有不同功能。 textarea: 定义文本域(一个多行的输入控件)，默认可通过鼠标拖动调整大小...
HTML---CSS----基础知识及代码----各种小程序网页设计
04-09
在HTML和CSS结合使用时，可以通过内联样式、内部样式表（放在`<head>`中的`<style>`标签内）或外部样式表（链接到`.css`文件）来引入CSS。为了实现响应式设计，可以使用媒体查询（@media rule），使得网页可以根据...
JavaScript-Quiz-Application-:使用HTML，CSS和JavaScriptJavaScript测验应用程序
05-04
JavaScript测验应用程序是一种交互式的学习工具，它利用HTML（超文本标记语言）、CSS（层叠样式表）和JavaScript这三种核心技术来创建动态的、用户友好的界面，供学习者检验和提升自己的JavaScript知识。在这个项目...
表单建模 表单引擎 表单可视化的技术选型实现方案.docx
最新发布
11-18
3. **k-form-design** - 这是一个基于Vue 2和ant-design-vue的表单设计器，使用less进行样式定义，旨在简化表单开发流程。它允许用户通过简单的操作生成配置表单，然后将这些配置保存为JSON，以便之后的渲染。 4. *...
elite-web-demo:产业新尖兵Web基础程序设计课程
03-09
"elite-web-demo:产业新尖兵Web基础程序设计课程"是一个针对Web开发初学者的实践项目，旨在提升学员在Web编程领域的技能。这个项目可能是由"精英网"提供，一个可能的教学平台或在线学习资源，专注于高质量的Web开发...
form表单常用的媒体类型
RainSun
06-15 2396
在HTTP请求中，把请求分为请求行，请求头请求体，其中在请求头中，Content-Type主要是让服务器知道请求体是用何种方式编码，该如何去解析请求数据。 form表单提交媒体类型 1.application/x-www-form-urlencoded 这应该是最常见的 POST 提交数据的方式了。浏览器的原生 表单，如果不设置 enctype 属性，那么最终就会以 applica...
CSS入门二：常用选择器之类选择器（其中，示例程序包括：简单的背景色，字号设置）（示例程序是内部样式表）
小枯林的博客
12-18 771
1.什么是选择器 其中，类选择器就是class选择器 2.选择器示例：主要是类选择器： （1）类选择器使用class="p1"；标识，使用时使用：.p1的方式； <!DOCTYPE html> <html> <head> <title>内部样式表演示</title> <style type="text/css"> p{ background-color: red; font-size: 30px;
form表单元素类型
asxxf的博客
11-24 835
form表单元素类型
form表单二之几种常见的表单
xvzhengyang的博客
03-05 515
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;几种常见的表单&lt;/title&gt; &lt;!-- 文本输入 提交输入 单选按钮输入 复选框输入 1.文本输入: text &lt;ipnu
使用table表格设计调查表
huzijia888的博客
11-17 548
#table1{ } #table1{ background-color:#B0C4DE; } .td1{ border-top:1px solid; border-right:1px solid; text-align:right; } .td2{ width:500px; border-top:1px solid; }
第二节点习题
晴天下的大头娃娃
11-25 9760
 HTML第2阶段实训前的测验 选择题 1. 实现背景平铺效果，对应的CSS为( A  )(选择一项)         A. div{backgroud-image:url
JavaScript DOM操作与CSS样式详解
3. 连接外部样式表：通过`<link>`标签引用外部CSS文件，提高代码可维护性，例如： ```html ``` 4. 导入外部样式表：在CSS文件中使用`@import`规则导入其他CSS文件，如： ```css @import 'styles2.css'; ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值