首页 > 其他分享 >前端学习之html(三)

前端学习之html(三)

时间:2023-01-18 15:02:22浏览次数:45  
标签:前端 元素 表单 学习 html 单选 按钮 文本 列表

html表单

HTML 表单是一个包含表单元素的区域,用于搜集不同类型的用户输入。表单是网页中提供的一种交互式手段操作,生活中我们很容易接触到表单,比如网上注册一个账号,或者我们去银行开户让我们填的表。

创建表单

<form> 标签用于创建 HTML 表单,常见的表单格式为:

<form name="" method="" action=""></form>
  • name:定义表单的名字。
  • method:定义表单结果从浏览器传送到服务器的方式,默认参数为:get 。post 安全性更高,因此常用作传输密码等,而 get 安全性较低,一般用于查询数据。
  • action:发送数据要去的地址。它的值必须是一个有效的 URL,可以是相对 URL 也可以是绝对 URL。如果没有提供此属性或者 action="#",则数据将被发送到包含表单的页面的 URL。

插入表单对象

网页中的表单由许多不同的表单元素组成,这些表单元素包括文字字段、单选按钮、复选框、按钮等。
文字字段
在网页中最常见的表单元素就是文字字段,用户可以在文字字段内输入字符或者单行文本。 语法:

<input
  type="text"
  name="控件名称"
  value="文字字段的默认取值"
  size="控件的长度"
  maxlength="最长字符数"
/>

该语法包含了许多参数,除了 type 参数以外,其他的参数都是可选的,大家可以自行选择。举个例子:

<form name="formBox" method="post" action="">
  姓名:<input type="text" name="name" size="20" /><br />
  年龄:<input type="text" name="age" size="40" value="10" maxlength="3" />
</form>

可以尝试给年龄输入值,如果文本字段长度超过了 3,就不能再输入了。
密码输入框
密码输入框是一种特殊的文字字段,他的各个属性和文字字段是相同的,但是输入进密码输入框的字符全部是“*”表示,保证周围人看不见输入的文本。

<input type="password" name="pwd" />

单选按钮
单选按钮可以使用户从选择列表中选择一个选项。

<form name="formBox" method="post" action="">
  <input type="radio" name="sex" value="male" checked />男<br />
  <input type="radio" name="sex" value="female" />女
</form>

value 后面的checked 表示用户一打开该页面该项就被选中了
几个单选按钮可以连接在一起,只需要把它们的 name 值设置为相同的。同一组中只有一个按钮可以同时被选。如果没有选中任何一个,那么整个单选按钮池就被认为处于未知状态,且不会随表单提交。

复选框
复选框可以让用户从一个选项列表中选择超出一个的选项。

<form name="formBox" method="post" action="">
  <input type="checkbox" name="music" checked />音乐<br />
  <input type="checkbox" name="art" />美术<br />
  <input type="checkbox" name="math" />数学<br />
</form>

复选框可以拥有自己的名字,并不需要属于一个组。

按钮

HTML 表单中,有三种按钮:提交按钮,重置按钮,匿名按钮。我们可以使用 <button> 元素或者 <input> 元素来创建一个按钮。type 属性的值指定显示什么类型的按钮。

提交按钮(submit)

用于发送表单数据给服务器。

语法:

<form name="formBox" method="post" action="">
  <input type="text" value="输入的内容" />
  <button type="submit">This a submit button</button>

  <!--or-->

  <input type="submit" value="This is a submit button" />
</form>

按钮可以用input标签来写,将type值设为"submit" 即可,此时value的值指的是按钮上的文本内容

重置按钮(reset)
重置按钮用来清除用户在页面中输入的信息。

语法:

<form name="formBox" method="post" action="">
  <input type="text" />
  <button type="reset">This a reset button</button>

  <!--or-->

  <input type="reset" value="This is a reset button" />
</form>

在文本框中输入内容,点击按钮即可清除。

匿名按钮(button)
没有自动生效的按钮,但是可以使用 JavaScript 代码进行定制。如果你省略了 type 属性,那么这就是默认值。

语法:

<button type="button">This a anonymous button</button>

<!--or-->
<button>This a anonymous button</button>

<!--or-->
<input type="button" value="This is a anonymous button" />

不管使用的是 <button> 元素还是 <input> 元素,按钮的行为都是一样的。它们的不同点在于:

  • 从前面的例子中也可以看出 <button> 元素允许你使用 HTML 内容作为其标记内容,但 <input> 元素只接受纯文本内容。
  • 使用 <button> 元素,可以有一个不同于按钮标签的值(通过将其设置为 value 属性)。(但是在 IE 8 之前的版本中是不行的)。

菜单和列表

菜单和列表主要是用来选择给定答案中的一种,这类选择中往往答案比较多。

下拉菜单

下拉菜单能够节省页面空间,正常状态下显示一个选项,单击展开所以选项。

<form name="formBox" method="post" action="">
  <select name="select">
    <option value="成都">成都</option>
    <option value="广州">广州</option>
    <option value="四川">四川</option>
    <option value="上海">上海</option>
  </select>
</form>

img
注意:下拉菜单的宽度是由 <option> 标记中包含的最长文本的宽度决定的。

列表项
在页面中列表项可以显示出几条信息,一旦超出这个信息量,在列表项右侧会出现滚动条,拖动滚动条可以看到所有选项。

<form name="formBox" method="post" action="">
  <select name="select" size="2" multiple="multiple">
    <option value="成都">成都</option>
    <option value="广州">广州</option>
    <option value="四川">四川</option>
    <option value="上海">上海</option>
  </select>
</form>

img
size="2" 表示一次显示 2 条数据。

当用户想要填入多行文本时,就应该使用文本域而不是文本字段。文本域使用 <textarea> 标记。

<form name="formBox" method="post" action="">
    <p>留下您的联系方式:</p>
    <textarea name="textarea" cols="35" rows="5"></textarea>
</form>

img
cols 代表列数,rows 代表行数。

实例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <form action="" method="get">
      <p>姓名:<input type="text" name="username" /></p>

      <p>密码:<input type="password" name="password" /></p>

      <p>
        性别:
        <input type="radio" name="gender" value="0" /> 男
        <input type="radio" name="gender" value="1" /> 女
      </p>
      <p>
        爱好:
        <input type="checkbox" name="like" value="sing" /> 唱歌
        <input type="checkbox" name="like" value="run" /> 跑步
        <input type="checkbox" name="like" value="swimming" /> 游泳
      </p>
      <p>
        照片:
        <input type="file" name="person_pic" />
      </p>
      <p>
        个人描述:
        <textarea name="about"></textarea>
      </p>
      <p>
        籍贯:
        <select name="select">
          <option value="成都">成都</option>
          <option value="广州">广州</option>
          <option value="四川">四川</option>
          <option value="上海">上海</option>
        </select>
      </p>
      <p>
        <input type="submit" name="" value="提交" />
        <input type="reset" name="" value="重置" />
      </p>
    </form>
  </body>
</html>

img

标签:前端,元素,表单,学习,html,单选,按钮,文本,列表
From: https://www.cnblogs.com/lazarus235/p/17059805.html

相关文章

  • The Missing Semester - 第一讲 学习笔记
    TheMissingSemester-第一讲学习笔记第一讲 课程概览与shell课程视频地址:https://www.bilibili.com/video/BV1Eo4y1d7KZ/?vd_source=87f9cb5d00dc916a8f510966777......
  • 前端大文件上传控件
    ​ 前言:因自己负责的项目(jetty内嵌启动的SpringMvc)中需要实现文件上传,而自己对java文件上传这一块未接触过,且对Http协议较模糊,故这次采用渐进的方式来学习文件上传的......
  • 前端和后端对比总结表格(全方位、多角度)
     前端和后端概述前端什么是前端开发?Frontend前端开发主要涉及网站和App,用户能够从App屏幕或浏览器上看到东西。简单地说,能够从App屏幕和浏览器上看到的东......
  • Vue学习笔记
     Vue基础前置知识HTML+CSS+JavaSricpt+WebAPI(DOM+BOM)+Ajax创建Vue<script>newVue({  el:'#app',  data:{    message:'<h1>菜鸟教程<......
  • 前端框架对比总结(表格):React、Angular、Vue.js(国产)等
    前端框架对比前端框架优点缺点ReactReact是由Facebook开发和创建的开源框架。根据StackOverflowDeveloper的2021年调查,该框架是2022年最好的UI......
  • 【TypeScript】学习笔记
    一.环境搭建安装Node.jsnpmi-gtypescript创建ts文件test.ts,编译:tsctest.ts二.基本类型1.类型声明语法:let变量:类型;let变量:类型=值;functionfn(参数:类型,参数:......
  • 前端Linux部署命令与流程记录
    以前写过一篇在Linux上从零开始部署前后端分离的Vue+Springboot项目,但那时候是部署自己的个人项目,磕磕绊绊地把问题解决了,后来在公司有了几次应用到实际生产环境的经验,发......
  • Django一个“高质量”小白的学习之路
    人类的思维倾向于直白、视觉和线性,还有好奇心,这是祖先遗传下来的思维习惯。如果论结果,显然我是一个计算机学习的失败者。因为我作为一个已经刚到不惑之年的中年男子,还在......
  • VUEX 使用学习四 : action
    转载请注明出处:action用于处理异步任务;action,可以操作任意的异步操作,类似于mutations,但是是替代mutations来进行异步操作的。首先mutations中必须是同步方法,如果使用......
  • 学习笔记——AOP-代理模式
    2023-01-18一、AOP前奏-代理模式1、手动实现动态代理环境搭建(1)基于接口实现动态代理:JDK动态代理(2)基于继承实现动态代理:Cglib、javassist动态代理2、实现动态代理的步......