表单常用标签 和 属性

最新推荐文章于 2022-02-10 13:38:45 发布
最新推荐文章于 2022-02-10 13:38:45 发布
阅读量143 收藏
点赞数
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/benjamin77/p/9156043.html 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <form action="#" method="get">
            <!--name属性随意写，一般见名知意-->
            <!--size属性输入框的宽度，maxlength最多输入的字符数-->
            <!--readonly不允许输入修改-->
            <!--palceholder输入提示-->
            <!--单选框，复选框，选择框中的 value属性，当选中时候提交会返回value的值-->
            <!--单复选框中的checked属性被设置，表示默认选项-->
            <!--选择框中的selected被设置 表示默认选项-->
            <!--required属性被设置，如果该输入框不填写内容将无法提交-->
            隐藏字段：<input type="hidden" name="id"/><br />
            用户名：<input type="text" name="username" size="40px" maxlength="5" 
                readonly="" placeholder="请输入用户名"/><br />
            密码：<input type="password" name="password" required="required"/><br />
            确认密码：<input type="password" name="repassword"/><br />
            性别：<input type="radio" name="sex" value="男"/>男
            <input type="radio" name="sex" value="女" checked="checked"/>女<br />
            爱好：<input type="checkbox" name="hobby" value="钓鱼" checked="checked"/>钓鱼
            <input type="checkbox" name="hobby" value="打电动" checked="checked"/> 打电动
            <input type="checkbox" name="hobby" value="泡妞"/> 泡妞 <br />
            头像：<input type="file" name="file"/><br />
            籍贯：<select name="province" id="" name="province">
                <option >----请选择-----</option>
                <option value="北京">北京</option>
                <option value="上海" selected="selected">上海</option>
                <option value="广州">广州</option>
                <option value="深圳">深圳</option>
            </select><br />
            自我介绍：<textarea name="zwjs" rows="" cols=""></textarea><br />
            提交按钮：<input type="submit" /><br />
            注册：<input type="submit" value="注册"/><br />            
            普通按钮：<input type="button" value="普通按钮"/><br />
            重置按钮: <input type="reset" />
        </form>
    </body>
</html>

 

转载于:https://www.cnblogs.com/benjamin77/p/9156043.html

【前端基础篇】快速学习HTML常用标签和属性
前端知识分享喵
06-12 1713
WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure-html）、表现（Presentation-css）和行为（Behavior-javascript）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。
form表单常用属性
落叶
06-20 1660
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单提交</title> </head> <body> <!--需求1:创建一个个人信息注册的表单界面。包含用户名，密码，确认密码。性别（单选），兴趣爱好（多选），国籍（下拉列表）。 隐藏域，自我评价（多行文本域）。重置，提交。--> <
表单中的标签及其常用属性汇总
王龙楷
04-06 5385
    表单是HTML中非常重要的一环，而且内容也不算少，所以在这里就简单的汇总了常用的表单标签，至于它们的属性就列举的很少了，如果想要详细学习属性，推荐到w3cschool去查看学习。这是w3cschool中关于表单一节的链接：点击打开链接 下面是我用HTML文档列举的表单标签，可拷到本地跑一下，直观感受一下。&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt...
target属性值
weixin_34301132的博客
12-31 343
有 4 个保留的目标名称用作特殊的文档重定向操作： _blank 浏览器总在一个新打开、未命名的窗体中加载目标文档。 _self 这个目标的值对全部没有指定目标的 &lt;a&gt; 标签是默认目标，它使得目标文档加载并显示在同样的框架或者窗体中作为源文档。这个目标是多余且不必要的。除非和文档标题 &lt;base&gt; 标签中的 target 属性一起使用。...
<form>表单常用属性
weixin_30653097的博客
03-10 786
<form>表单常用属性有以下几种: name:用来标识这个表单,在javascript中可以通过 document.表单名 来取得这个表单 action:表示这个表单提交时的跳转路径 method:表示提交方式,可以选择post和get,默认为get方式.两种方式的区别: post:所有提交的参数都会隐藏,没有参数的大小限制,建议使用该方式 get:所有提交...
form表单中几种属性
weixin_44001985的博客
05-02 9256
表单的主要功能是收集信息，一般分两部分：1.体现表单元素的HTML代码；2.客户端脚本 ，或是服务器用来处理用户所填写信息的程序。 action就是你表单要提交的地址。地址可以是请求后台的地址，如Servlet,Struts 等；也可以是提交到另一个页面的地址，如HTML，jsp等。 method是将表单的数据从浏览器传送到服务器的方法。即开始时浏...
HTML常用标签及属性.doc
最新发布
06-13
表单标签的action属性指定了表单数据提交到的URL，而type属性定义了输入控件的类型。页面布局中常用的属性还包括margin、padding、display、position、float等。 在HTML文档中使用这些标签和属性，可以创建结构良好...
HTML常用标签及属性.pdf
10-05
HTML常用标签及属性 HTML是HyperText Markup Language的缩写，用于描述网页的结构和布局。下面是常用的HTML标签和属性： 结构标签 * `<html>`：HTML文档的根元素，定义了整个HTML文档的结构。 * `<head>`：定义了...
整理HTML5中表单的常用属性及新属性
11-30
标签添加了几个新属性.<form>新属性：autocompletenovalidate<input>新属性：autocompleteautofocusformformactionformenctypeformmethodformnovalidateformtargetheight and widthlistmin and ...
HTML：form表单域的作用和三个常用属性
weixin_46682277的博客
12-02 3380
我们收集到的用户信息怎么传输给后台服务器，form表单域可以帮我们做到。 form标签被定义于表单域，相当于一个大的容器，包含在form表单域中的内容都会提交给服务器。 <form action="url地址" method="提交方式 name="表单名称"> 各种表单控件 table tr td等 </form> 只要是在form表单域中的内容，都会提交给后台服务器。 form有三个常用的属性： action，他的属性值是url地址，用于指定接收并处理表单数据的服务器程序的ur
表单标签基本属性
zheng_pika的博客
12-22 2098
表单区域是由来定义的 首先来看一段代码： Star1: Star2: Star3: Province1: Province2: Province3: Province4: 标签的属性常用的有： method="get/post";该属性表明该表单的发送方式是get（从服务器获取数据）还是post（向服务器传送数据）； action="url";该属性表明表单的数据发送给谁，就
【HTML基础】form表单常用的7种属性和9种元素详解（含在线练习网址）
Fighting_hawk的博客
02-10 2万+
1. 掌握form表单的作用：提交数据。 2. 掌握form表单7种常用属性的作用与语法。 3. 掌握form表单9种常用元素的作用与语法。
HTML中的form表单的标签、属性、属性值； CSS以及HTML5新增属性、属性值
热门推荐
CAINIAOQIANDUAN的博客
08-11 2万+
form表单HTML5、CSS3标签及属性、属性值 form表单HTML标签、属性、属性值： （单行文本输入框） （密码输入框） （单选框） （多选框） （提交按钮） （重置按钮） 或者按钮（空按钮） （下拉框选） （多行文本框） （1） 是表单的标签，所有的需要写在f...
form(表单)标签常用标签及属性
weixin_30603633的博客
09-07 2475
1.表单标签语法： <form method="传送方式" action="服务器文件"></form> (1)<form>标签成对出现, (2)两种数据传送方式（get/post） 2.文本框,密码框： 语法： <form> <input type="text/password...
form表单标签常见的属性
小熙的进化史
07-20 3034
form表单标签常用属性 <form action="server.html" method="get" > <label for="Q_name">姓名：</label> <input type="text" id="Q_name" name="Q_name" value="" required placeholder="请输入" /> ...
表单form标签的属性、值以及描述
请叫我二狗哥
03-28 4301
属性 值 描述 action URL 提交表单时，向何处发送表单数据 method get、post 设置表单以何种方式发送到表单页面 name form_name 表单的名称 target _blank、_self _parent、_top 在何处打开action URL enctype ...
form表单以及input标签里的属性。
weixin_33816300的博客
04-29 6122
form表单： form表单里的标签有：input,（输入框，这里是要有属性的）select（下拉菜单）option(嵌套在select标签里的，这个是表示下拉菜单里的选项)textarea(表示多行文本框)label(label标签是与input产生联系的)method（提交方式）action(提交地址)placeholder(input中的提示信息，下面会有placeholde...
FORM表单的几大属性
static_coder的博客
12-28 1万+
FORM表单的几大属性问题引入 在做一个活动支付项目的时候，提交订单（form表单）跳转支付页面发现没有反应。经过断点排查发现断点也进了，不报错。但是返回的就是空白页，让人很纠结。 进过反复测试，才发现是杀毒软件拦截了form表单的请求。如何来解决这个问题呢？下来我们来看看Form表单的属性就会明白了。 FORM的属性 method属性：规定用于发送 form-data 的 HTTP
web day02 表格 表单及HTML常用的表单控件
LYRZ优快云的博客
09-03 1184
一、 表格的标签及属性 table属性 Width、height 宽高（单位是像素或百分比） align 对齐 border 外边框 bgcolor 背景色 background 背景图片 Cellspacing 单元格间距(单元格和单元格的距离) 一般情况写0 Cellpadding ...
html css常用标签及属性
03-15
<think>嗯，用户想学习HTML和CSS中常用的标签和属性，需要做一个总结。首先，我得回忆一下HTML和CSS的基础知识，然后整理出最常用的部分。用户可能刚开始学习，所以内容需要简明扼要，重点突出。 首先，HTML常用标签。结构标签肯定是必须的，比如`<!DOCTYPE html>`、`<html>`、`<head>`、`<body>`这些。然后是文本相关的标签，比如标题`<h1>`到`<h6>`，段落`<p>`，加粗`<strong>`，斜体``，链接`<a>`。列表方面，无序列表`<ul>`<em>和有序列表`<ol>`，每个列表项用`<li>`。表格标签`<table>`、`<tr>`、`<td>`，表单相关的`<form>`、`<input>`、`<textarea>`、`<select>`和`<button>`。媒体标签比如图片`<img>`，视频`<video>`，音频`<audio>`。还有语义化标签，如`<header>`、`<nav>`、`<section>`、`<article>`、`<footer>`。这些标签的属性也要提到，比如`href`、`src`、`alt`、`class`、`id`、`style`等。 接下来是CSS部分。要涵盖选择器，比如元素选择器、类选择器、ID选择器、后代选择器、伪类。然后是常用属性，字体相关的`font-family`、`font-size`、`font-weight`，颜色`color`和`background-color`，文本属性`text-align`、`text-decoration`、`line-height`，盒子模型相关的`width`、`height`、`padding`、`margin`、`border`，布局属性`display`、`position`、`float`、`flex`，还有响应式设计中的`@media`查询。 要注意用户可能对引用方式不太清楚，所以需要说明CSS的三种引入方式：内联样式、内部样式表、外部样式表。特别是外部样式表的`<link>`标签，要给出例子。可能用户容易混淆这些方法，所以例子要明确，比如外部样式表的链接方式。 然后，用户提供的引用资料中有提到一些不常用的标签和属性，但用户需要的是常用内容，所以不需要深入那些不常见的部分。比如引用[2]中的例子，外部样式表的使用，需要展示正确的代码结构。引用[3]中的`white-space`和`display`属性在布局中可能用到，可以提到如何处理元素不换行的情况。 需要确保所有HTML标签和CSS属性都用正确的格式，比如使用反引号包裹代码片段。数学表达式这里可能用不上，但用户的问题里没有涉及，所以可以忽略。注意不要使用Markdown格式，但用户允许使用代码块，所以Python示例中的代码块可以用，但这里应该用HTML和CSS的代码示例。 可能用户需要实际例子来理解，所以在总结每个部分时，附上简短的代码示例会更好。比如在讲`<a>`标签时，展示一个链接的例子；在讲CSS选择器时，展示如何应用样式。 最后，生成的相关问题要围绕用户可能进一步想了解的内容，比如常用布局技巧、响应式设计、选择器优先级等。这些问题应该帮助用户深入下一步学习。</think>以下是对HTML和CSS常用标签及属性的系统总结，按功能分类呈现： ### 一、HTML常用标签与属性 1. **基础结构标签** - `<!DOCTYPE html>`：文档类型声明 - `<html lang="zh-CN">`：根元素（lang属性定义语言） - `<head>`：元数据容器 - `<body>`：网页内容容器 2. **文本内容标签** - 标题：`<h1>`到`<h6>` - 段落：`<p>` - 强调文本：`<strong>`（加粗）、`<em>`（斜体） - 超链接：`<a href="url" target="_blank">`（target属性控制打开方式）[^4] 3. **列表与表格** - 无序列表：`<ul>` + `<li>` - 有序列表：`<ol>` + `<li>` - 表格结构： ```html <table border="1"> <tr><th>表头</th></tr> <tr><td>数据</td></tr> </table> ``` 4. **表单元素** - `<form action="/submit" method="post">` - 输入框：`<input type="text|password|email">` - 多行文本：`<textarea rows="4">` - 下拉选择：`<select>` + `<option>` 5. **媒体元素** - 图片：`<img src="image.jpg" alt="描述">`（alt为必要属性）[^4] - 视频：`<video controls><source src="movie.mp4"></video>` ### 二、CSS核心属性分类 1. **选择器类型** - 元素选择器：`p { ... }` - 类选择器：`.classname { ... }` - ID选择器：`#idname { ... }` - 后代选择器：`div p { ... }` 2. **布局属性** ```css .container { display: flex; /* 弹性布局 */ position: relative; /* 定位基准 */ margin: 0 auto; /* 水平居中 */ padding: 20px; /* 内边距 */ } ``` 3. **文本样式** ```css h1 { font-family: "Arial"; /* 字体 */ color: #333; /* 文字颜色 */ text-align: center; /* 对齐方式 */ line-height: 1.5; /* 行高 */ } ``` 4. **响应式设计** ```css @media (max-width: 768px) { .menu { display: none; } /* 移动端隐藏菜单 */ } ``` ### 三、CSS引用方式对比 | 方式 | 语法示例 | 适用场景 | |--------------|-----------------------------------|------------------| | 行内样式 | `<p style="color:red">` | 快速测试 | | 内部样式表 | `<style>body{margin:0}</style>` | 单页面小项目 | | 外部样式表 | `<link rel="stylesheet" href="style.css">` [^2] | 多页面项目 |
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值