HTML入门教程:输入标记<INPUT>详解

需积分: 9 2 下载量 137 浏览量 更新于2024-08-21 收藏 1.16MB PPT 举报
本文档主要介绍了HTML的基本概念和常用标记,特别是输入标记`<INPUT>`在制作课件中的应用。HTML是一种超文本标记语言,用于创建网页内容和结构。`<INPUT>`标记用于创建交互式的表单元素,如文本输入框和密码框。 在HTML中,`<INPUT>`标记用于定义用户在网页上输入数据的字段。它的基本格式是`<INPUT name="field_name" type="type_name">`,其中`name`属性定义了字段的名称,服务器通过这个名字来获取用户输入的数据,而`type`属性定义了输入字段的类型。 常见的`type`属性值包括: 1. `Text` - 用于创建单行文本输入框,例如`<INPUT type="text" maxlength="value" size="value" value="field_value">`,`maxlength`限制了用户输入的最大字符数,`size`指定了输入框的宽度,`value`则是默认显示的文本。 2. `Password` - 创建密码输入框,输入的字符会被替换为星号或圆点,如`<INPUT type="password" maxlength="value" size="value">`,同样有`maxlength`和`size`属性。 文档中还涵盖了HTML的其他关键部分,包括: - HTML概述,讲解了HTML的发展历史和基本概念。 - 文本格式标记,如段落`<P>`、标题`<H1>`至`<H6>`等。 - 表格标记,如`<TABLE>`、`<TR>`、`<TD>`和`<TH>`用于创建和布局表格。 - 图像与多媒体标记,如`<IMG>`引入图片,`<AUDIO>`和`<VIDEO>`处理音频和视频。 - 超链接标记`<A>`,用于创建页面间的链接。 - 表单标记,包括`<FORM>`、`<INPUT>`以及其他的表单元素如`<SELECT>`、`<TEXTAREA>`等。 - 框架标记`<FRAMESET>`和`<FRAME>`,用于创建多窗口或分页布局的网页。 - CSS(Cascading Style Sheets)用于美化和控制HTML元素的样式。 - HTML的综合实例,提供实际操作的例子来加深理解。 - 其他网页设计语言简介,可能包括JavaScript、PHP等。 通过学习这些内容,读者可以掌握基础的HTML语法,创建简单的网页,并能够理解如何使用`<INPUT>`标记创建用户交互式表单。这对于网页设计和开发是至关重要的。
2023-07-15 上传

<view class="top-box"> <view>Hi</view> <view class="next-text">欢迎使用!</view> </view> <view class="center-box"> <view class="nav"> <view class="left {{current==1?'select':''}}" bindtap="click" data-code="1"> <text>登录</text> </view> <view class="right {{current==0?'select':''}}" bindtap="click" > <text>注册</text> </view> </view> <view class="input-box" hidden="{{current==0}}"> <view class="wei-input"> <icon type="waiting" color="#44ADFB" size="16"></icon> <input class="input" auto-focus placeholder="请输入手机号/登录名"/> </view> <view class="wei-input"> <icon type="success" color="#44ADFB" size="16"></icon> <input class="input" auto-focus placeholder="请输入登录密码"/> </view> <view class="forget"> <text>忘记密码?</text> </view> </view> <view class="input-box" hidden="{{current==1}}"> <view class="wei-input"> <icon type="waiting" color="#44ADFB" size="16"></icon> <input class="input" auto-focus placeholder="请输入手机号"/> </view> <view class="wei-input"> <icon type="waiting" color="#44ADFB" size="16"></icon> <input class="input" auto-focus placeholder="请输入6位验证码"/> <text class="input-code" bindtap="getCode">{{codeText}}</text> </view> <view class="wei-input"> <icon type="success" color="#44ADFB" size="16"></icon> <input class="input" auto-focus placeholder="请输入密码"/> </view> <view class="wei-input"> <icon type="success" color="#44ADFB" size="16"></icon> <input class="input" auto-focus placeholder="请确认密码"/> </view> </view> <view class="sumbit-btn"> <button class="button" style="background-color: #33ccff;font-size: 30rpx;" type="primary">立即{{current==1?'登录':'注册'}}</button> </view> </view> <view class="shadow shadow-1"></view><view class="shadow shadow-2"></view> 这段代码怎么实现注册页面和登陆页面的切换,如果不能,给出解决代码

2023-05-24 上传