、表单在网页中的应用:登录、注册常用到表单
2、表单的语法:
<form method="post" action="result.html">
<p> 名字:<input name="name" type="text" > </p>
<p> 密码:<input name="pass" type="password" > </p>
<p>
<input type="submit" name="Button" value="提交"/>
<input type="reset" name="Reset" value="重填“/>
</p>
</form>
3、表单元素说明:
type:指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button,默认为 text.
name:指定表单元素的名称.
value:元素的初始值。type 为 radio时必须指定一个值.
size:指定表单元素的初始宽度。当 type 为 text 或 password时,表单元素的大小以字符为单位。对于其他类型,宽度以像素为单位.
maxlength:type为text 或 password 时,输入的最大字符数.
checked:type为radio或checkbox时,指定按钮是否是被选中.
4、示例:
<html >
<head>
<title>表单元素</title>
</head>
<body>
<!-- 表单 -->
<form method="POST" action="#">
<!-- 标签 -->
<label for="username">姓名:</label>
<!-- 文本框 value属性是设置默认显示的值-->
<input id="username" value="songzetong" />
<!-- 密码框 -->
<br/><label for="pwd">密码:</label>
<input type="password" id="pwd">
<br/>
<!-- 单选框 -->
<label for="sex">性别:</label>
<input type ="radio" name ="sex" checked/>男
<input type ="radio" name ="sex"/>女
<!-- 复选框 -->
<br/>
<label for="hobby">爱好:</label>
<input type="checkbox" name ="hobby" id="hobby"/>听音乐
<input type="checkbox" name ="hobby"/>旅游
<input type="checkbox" name ="hobby"/>游泳
<br/>
<!-- 下拉列表 -->
<label for="month">月份:</label>
<select id="month"/>
<option>1月</option>
<option>2月</option>
<option>3月</option>
</select>
<br/>
<!-- 按钮 -->
<input type="reset" value="重置按钮"/>
<input type="submit" value="提交按钮"/>
<input type="button" value="普通按钮"/>
<br/>
<!-- 图片按钮 -->
<input type="image" src="one.jpg" width="200px" heigth="200px"/>
<br/>
<button type="submit">提交</button>
<button type="reset">重置</button>
<br/>
<label for="profile">
个人简介:
</label>
<!-- 多行文本域 -->
<textarea >本人已同意什么条款</textarea>
<br/>
<br/>
<br/>
<!-- 文件域 -->
<label for="upload">上传头像:</label>
<input type="file"/>
<!-- 邮箱 -->
<br/>
<label for="QQ邮箱">邮箱:</label>
<input type="email"/>
<br/>
<!-- 网址 -->
<label for="ur">网址:</label>
<input type="url"/>
<!-- 数字 -->
<br/>
<label for="shuzi">数字:</label>
<input type="number" name="shuzi" min="0" max="100" step="10"/>
<br/>
<label for="huakuai">滑块:</label>
<input type="range" />
<!-- 搜索框 -->
<br/>
<label for="sousuo">搜索</label>
<input type="search"/>
<!-- 隐藏域 -->
<br/>
<input type="hidden"value="1">
<!-- 只读:只能看不能修改,禁用:不能用 -->
<input value="我是只读的" readonly/>
<input type="button" value="我是禁用的" disabled/>
<!-- palceholder默认提示 -->
<br/>
<input placeholder="默认提示框"/>
<br/>
<!-- 文本框内容提示不能为空,否则不允许用户提交表单(网页上的必填项) -->
<input required="必填项"/>
<button type="submit">提交</button>
<br/>
<!-- 用户输入的内容必须符合正则表达式所指的规则,否则就不能提交表单-->
<input required pattern="^1[3578]\d{9}"/>
<button type="submit">提交</button>
</form>
</body>
</html>
效果图链接:file:///D:/ruanjian/VS/wenjianxiangmu/htmlThree/form.html
学会这个VS Code技巧,摸鱼的时间又变多了
---
**引子:提升编码效能,解锁更多闲暇时光**
在竞争激烈的Web前端开发领域,如何更高效地运用工具至关重要。本文将揭示一项被低估的VS Code核心技巧,它将大幅提高你的编码速度,进而释放出更多属于你自己的“摸鱼”时间(这里指有效率地休息和自我提升的时间)。
---
**【第一部分】巧用Emmet插件,瞬间构建HTML结构**
**标题:打造HTML的乐高积木**
**实例1:一键生成HTML5基础骨架**
只需在VS Code编辑器中输入`html:5`,然后按下Tab键,即可生成完整的HTML5基本结构:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
```
**实例2:快速生成复杂的HTML元素集合**
使用Emmet表达式可以迅速构造复杂的HTML列表,例如输入`ul>li.item$*5`并按Tab键,将生成:
```html
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>
```
---
**【第二部分】JavaScript神器:IntelliSense助力智能编程**
**标题:智能提示,让JS编写如虎添翼**
在VS Code中,内置的IntelliSense特性提供了强大的代码提示与自动补全功能:
```javascript
// 实例:智能提示与自动补全
let arr = ['apple', 'banana', 'cherry'];
arr.f // IntelliSense此时会列出所有数组方法,如filter、forEach等
// 自动导入模块
import React from 'react'; // 在使用React组件时,编辑器会自动识别并提示导入语句
```
---
**【第三部分】实时错误检查与快速修复——ESLint的魅力**
**标题:告别手动排查,迎接即时纠错时代**
安装并配置ESLint插件后,VS Code能实时检查JavaScript代码中的错误并提供修复建议:
```javascript
// 错误示例及即时反馈
function add(a, b) {
return a + b;
}
add('2', 3); // 这里的类型错误会被ESLint立刻捕捉并标注
// 只需点击错误提示,编辑器便会提供可能的修复方案
```
---
**【第四部分】无缝集成终端与Git版本控制**
**标题:一站式解决方案,无需跳出IDE**
- **集成终端**: 直接在VS Code内开启集成终端,执行诸如启动本地服务器、运行npm脚本等各种命令行任务。
- **内置Git支持**: VS Code具备完善的Git功能,无需离开编辑器界面就能查看差异、提交更改、切换分支等,大大简化了版本控制流程。
---
**尾声:掌握高效之道,悠享“摸鱼”之乐**
熟练应用以上VS Code高效开发技巧,不仅能提升你的编程效率,还将无形中拓宽你的时间维度。把节省下来的时间用于拓展知识边界、调整工作状态或是纯粹的放松,都是明智之举。记住,“摸鱼”的真谛在于劳逸结合,持续优化自己的工作与生活质量。现在就开始行动吧,用技术的力量为自己赢得更多的自由时间!
isual Studio 2019重磅来袭!
Visual Studio 2019在一些领域改进了Visual Studio 2017。新版可以通过简化克隆Git仓库或打开现有项目或文件夹来帮助您更快地进入代码。它还引入了对模板选择屏幕的改进,使其更容易启动新项目。
在编写代码时,我们会注意到Visual Studio 2019改进了代码导航并添加了许多重构,以及文档运行状况指示器和一键式代码清理以应用多个重构规则。调试体验也有所改进,包括.NET Core应用程序的数据断点,它们可以帮助您仅仅打破您正在寻找的价值变化,还包括使用Visual Studio IntelliCode获取AI辅助代码。
Visual Studio 2019的目标是从开发,测试,调试甚至部署支持这些项目,同时最大限度地减少您在不同应用程序、门户和网站之间切换的需要。
安装
IDE
性能
常规调试和诊断
源代码管理和团队资源管理器
扩展性
编程语言——C#
编程语言——C++
编程语言——F#
编程语言——JavaScript/TypeScript
编程语言——Python
Web 技术
通用 Windows 平台 (UWP)
使用 Xamarin 进行移动开发
SQL Server Data Tools
想要获取更多Visual Studio 2019教程资源,可在评论区留言哦。
*请认真填写需求信息,我们会在24小时内与您取得联系。