form表单常见控件应用,实例讲解注册页面的开发【2020网页综合笔记03】

简介: form表单常见控件应用,实例讲解注册页面的开发【2020网页综合笔记03】

应用标签控件理解:

1.form表单标签  <form name="form1" method="post" action="#">

2.表格标签 <table>,行使用<tr>标签,列使用<td>标签

3.输入普通文本框 <input type="text" name="username" />

4.输入密码框 <input type="password" name="password" />

5.下拉框应用<select name="sex">,对应的选项使用option标签,类似<option value="1"></option>

6.单选框使用<input name="daxue" type="radio" checked/>  这里的checked标识这个选项默认被选中

7.无序列表的使用<ul>每一个子项使用<li>标签

8.复选框(多选框)使用标签对应类型是checkbox,类似案例<input name="hobby[]" type="checkbox" value="1" />唱歌 </li>

9.这里的name写成hobby[]这里多了中括号[],是为了后台接收数据的时候可以方便地将数据整合到一起。

10.多行输入框,使用标签textarea,使用案例<textarea name="jianjie" cols="25" rows="10">我的简介</textarea>这表可以通过 cols 和 rows 属性来规定 textarea 的尺寸,不过更好的办法是使用 CSS 的 height 和 width 属性。

11.提交按钮类型使用submit,这个类型的好处就是可以和form标签的提交行为进行联动 ,使用这个按钮的标签案例:<input type="submit" value="提交" />

12.重置按钮可以从来重置form标签内的所有输入控件,实际上就是讲输入的内容自动清空,按钮使用举例: <input type="reset" value="重置" />

13.普通按钮的使用标签button,使用举例<button type="button">现在去登录</button>这个标签的按钮有很多种类型,这里我们使用button可以使得按钮是一个普通按钮,我们可以通过js控制来将其联动其它行为。

网页设计界面:

2c63850934f4dc5b5f5a98f140c838d4.png

源代码分享:

<html>
   <head>
     <title>注册账号,刘金玉编程</title>
     <style>
        form{
          margin:0 auto;
          width:400px;
        }
</style>
   </head>
   <body>
      <div style="text-align:center"><h1>注册账号</h1></div>
      <form name="form1" method="post" action="#">
         <table>
             <tr><td>账号:</td><td><input type="text" name="username" /></td></tr>
             <tr><td>密码:</td><td><input type="password" name="password" /></td></tr>
             <tr>
                 <td>性别:</td>
                 <td>
                     <select name="sex">
                        <option value="1">男</option>
      <option value="2">女</option>
                     </select>
           </td>
             </tr>
             <tr>
                 <td>是否上过大学:</td>
                 <td>
                     <input name="daxue" type="radio" checked/>是 
         <input name="daxue" type="radio" />否
                 </td>
             </tr>
             <tr>
                 <td>兴趣爱好:</td>
                 <td>
                    <ul>
                       <li><input name="hobby[]" type="checkbox" value="1" />唱歌 </li>
                       <li><input name="hobby[]" type="checkbox" value="2" />跳舞 </li>
                       <li><input name="hobby[]" type="checkbox" value="3" />编程 </li>  
                    </ul>
                 </td>
             </tr>
             <tr>
                 <td>简介:</td>
                 <td><textarea name="jianjie" cols="25" rows="10">我的简介</textarea></td>
             </tr>
             <tr>
                 <td>
                   <input type="submit" value="提交" /> 
                   <input type="reset" value="重置" />
                 </td>
                 <td>
                   <button type="button">现在去登录</button>
                 </td>
             </tr>
         </table>
      </form>
   </body>
</html>

如果你已经学会以上表单的开发,那么结合css样式,来尝试制作以下表单注册页面看看吧!

5dcc0cb57fab39af8f60b304bd8c77e8.png

相关文章
|
前端开发 开发工具 iOS开发
初识MVVM·关于启动页、引导页、登录页的设计细节和交互逻辑(1)
初识MVVM·关于启动页、引导页、登录页的设计细节和交互逻辑
311 0
|
1月前
|
数据采集 Python
数据爬取技术进阶:从表单提交到页面点击的实现
本文介绍了如何使用 Python 和代理 IP 技术,从表单提交到页面点击,实现动态网页的数据爬取。以百度贴吧为例,详细讲解了登录、发帖和数据采集的实现流程,并提供了完整的代码示例。通过代理 IP 确保数据获取的稳定性和安全性。
|
3月前
|
前端开发 数据安全/隐私保护
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
本文档详细介绍了HTML表单的多种元素及其用法,包括下拉菜单(`&lt;select&gt;` 和 `&lt;option&gt;`)、文本域(`&lt;textarea&gt;`)、标签解释(`&lt;label&gt;`)、各类按钮(`&lt;button&gt;`)及表单重置功能、无语义布局标签(`&lt;div&gt;` 和 `&lt;span&gt;`)以及字符实体的应用。此外,还提供了一个完整的注册信息表单案例,涵盖个人信息、教育经历和工作经历等部分,展示了如何综合运用上述元素构建实用的表单。
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
|
7月前
|
小程序
微信小程序实现不同按钮跳转同一个页面显示不同内容
微信小程序实现不同按钮跳转同一个页面显示不同内容
152 0
|
5月前
|
小程序 开发工具 开发者
【微信小程序-原生开发】实用教程02-添加全局页面配置、页面、底部导航
【微信小程序-原生开发】实用教程02-添加全局页面配置、页面、底部导航
70 0
|
5月前
|
小程序 JavaScript 前端开发
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表(含Tdesign升级,切换调试基础库,设置全局样式,配置组件按需注入,添加图片素材,wx:for,生命周期 onLoad)
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表(含Tdesign升级,切换调试基础库,设置全局样式,配置组件按需注入,添加图片素材,wx:for,生命周期 onLoad)
178 0
|
容器
会议OA项目-首页->flex弹性布局,轮播图后台数据获取及组件使用(后台数据交互mockjs),首页布局
会议OA项目-首页->flex弹性布局,轮播图后台数据获取及组件使用(后台数据交互mockjs),首页布局
86 0
|
前端开发 开发工具 iOS开发
初识MVVM·关于启动页、引导页、登录页的设计细节和交互逻辑(2)
初识MVVM·关于启动页、引导页、登录页的设计细节和交互逻辑
97 0
|
前端开发 数据处理 Swift
初识MVVM·关于启动页、引导页、登录页的设计细节和交互逻辑(3)
初识MVVM·关于启动页、引导页、登录页的设计细节和交互逻辑
138 0
|
JavaScript 小程序
微信小程序-页面访问组件数据和方法
好了,结构搭建的差不多了,接下来就是来看关键的内容了,首先我们来看一下如何拿到一个自定义组件的实例,有两种方式,这两种方式的前提条件是,给这个组件设置一个标识,设置标识的方式可以是通过类名或者ID进行设置,然后通过这个标识得到组件实例。
342 0