HTML基础学习——表单和文本输入框

一.表单

1.表单简介

是网站与用户进行交互的时候非常重要的一步。

  • 注册表单


    注册表单
  • 登录表单


    登录表单
2.表单的基本使用

<form> 标签用于为用户输入创建 HTML 表单。
表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含 menustextareafieldsetlegendlabel 元素
表单用于向服务器传输数据。

使用

  • 属性说明:
    action:规定当提交表单时向何处发送表单数据。这个属性的值是一个URL地址.
    method:规定用于发送 form-data 的 HTTP 方法。可选值为get或post。默认值为get.
    enctype:规定在发送表单数据之前如何对其进行编码。(设置定表单数据在发送到服务器之间应该如何编码)
    代码示例:


    代码示例

    结果显示

    随便输入一组用户和密码

    找不到此页面
  • 当method值设置为get时的传输原理:


    URL地址

    关系图
将method的值设为get时:表单的数据通过URL地址的方式发送给后台

二.文本输入框

  • 1.<textarea>
    <textarea> 标签定义多行的文本输入控件。
    文本区中可容纳无限数量的文本,其中的文本的默认字体是等宽字体(通常是 Courier)。
    可以通过 cols 和 rows 属性来规定 textarea 的尺寸,不过更好的办法是使用 CSS 的 height 和 width 属性。
    注释:在文本输入区内的文本行间,用 "%OD%OA" (回车/换行)进行分隔。
  • 2.<input>标签的type属性值可以设置为以下值:
    text,password(密码输入框),date(日期输入框),number(数字输入框),color,email,range,search,url(url地址输入框)
    <input> 标签用于搜集用户信息。
    根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
1.单行文本框
单行文本框

代码示例

结果如下

代码如下

结果如下
2.多行文本框
多行文本框

代码如下

结果如下
3.密码框
密码框
4.HTML5新增文本输入类型

https://www.w3school.com.cn/html5/html_5_form_input_types.asp
在这个网址对于新增文本输入类型有着详细介绍~

示例代码

结果如下

示例代码

结果如下
结果如下

(此文章仅作为个人学习笔记使用,如有错误欢迎指正~)

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、表单基础知识 在 JavaScript 中,表单对应的是 HTMLFormElement 类型。 HTMLFo...
    LemonnYan阅读 4,461评论 0 3
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 9,856评论 0 0
  • 本人做php的,最近发现JS真的是博大精深啊,比PHP难.在HTML中,表单是由form元素来表示的,但是在jav...
    linfree阅读 6,630评论 3 17
  • <input>标签 标签用于搜集用户信息,根据不同的type属性值,输入字段拥有很多种形式。输入字段可以是文本字段...
    _空空阅读 9,513评论 0 3
  • 金蟾 三只脚 背北斗七星 嘴衔两穿铜钱 嘴中含一枚铜钱
    Lilyes阅读 3,795评论 0 1

友情链接更多精彩内容