HTML中的表单

最新推荐文章于 2023-02-26 16:23:58 发布
最新推荐文章于 2023-02-26 16:23:58 发布
阅读量566 收藏 4
点赞数 1
文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52571040/article/details/124800184
版权

HTML表单

什么是表单（form）

表单在web开发中使我们能够输入信息，在我们日常的上网中，登录、注册都是表单的一部分

表单的格式

在HTML中，我们可以利用标签来定义表单

<body>//表单同其他的一样，是写在body中的
	<form action = ""></form>//其中action为表单要提交到的地址
</body>

例如这边写了一个提交的html文件：
<body>
    提交成功！
</body>

随后放入action中
<body>
    <form action="./提交.html"></form>
</body>

在提交后跳转

在这里插入图片描述

文本输入框

<input type="text">

例如：
用户名：<input type="text"><br>//<br>为换行符

在这里插入图片描述

同时我们可以利用placeholder来对输入者进行提示，例如
用户名：<input type="text" placeholder="请输入你的姓名"><br>

在这里插入图片描述

而如果我们需要将用户名传递给需要提交到的地址，则需要用到name属性，例如
用户名：<input type="text" placeholder="请输入你的姓名" name="1"><br>
可以看到提交后显示出了1的姓名

在这里插入图片描述

密码输入框

虽然我们可以用文本输入来输入密码，但是这样一来输入的密码就会摆在明面上，所以我们需要使用password来定义密码：
<input type="password">
例如：
密码：<input type="password"><br>

在这里插入图片描述

单选框

在进行单选的操作时，我们需要用到name来进行多选一的操作
例如没有写name时
性别：<input type="radio">男<input type="radio">女<br>
我们发现无论男女都能被选中

在这里插入图片描述

而我们加上name时，便可以做出多选一的操作
性别：<input type="radio" name="sex">男
<input type="radio" name="sex">女<br>
即radio只是定义了前边的选框，而真正实现单选操作的是name属性

在这里插入图片描述

同时我们可以使用checked来定义默认选中
性别：<input type="radio" name="sex">男
<input type="radio" name="sex" checked>女<br>

在这里插入图片描述

多选

有了单选那肯定会存在着多选
多选使用checkbox来设定前边的选择框，name属性设定为一致，使用value属性来区分不同
例如：
爱好：<input type="checkbox" name="test" value="1">体育
     <input type="checkbox" name="test" value="2">旅游
     <input type="checkbox" name="test" value="3">读书
     <input type="checkbox" name="test" value="4">音乐<br>

在这里插入图片描述

同样的，多选也可以通过checked来设定预选值

下拉列表

使用
<select name="" id="">
	<option value=""></option>
	<option value=""></option>
	<option value=""></option>
</select>
可以定义一个下拉列表，其中的name，id，value在运用中可以不去理会
同时可以使用selected来定义预选值，使用disable来定义无法选中（失效）
例如：
省份：<select name="select">
	<option disabled selected>--省份选择--</option>
	<option>陕西</option>
	<option>山西</option>
	<option>广东</option>
	<option>河南</option>->
</select><br>

在这里插入图片描述

数字输入框

<input type="number" min="" max="" step=""><br>
其中，
number用来定义只能输入数字
min表示能输入的最小的数字
max表示能输入的最大的数字
step表示输入数字的间隔
例如
<input type="number" min="1" max="20" step="2"><br>

日期输入

<input type="date">
例如：
生日：<input type="date">

在这里插入图片描述

文件输入

<input type="file">
例如：
上传照片：<input type="file">

在这里插入图片描述

重置按钮

<input type="reset">
点击重置按钮时，可以将输入的信息进行重新书写

在这里插入图片描述

上传按钮

开头说过，action中存放的是要将表单上传的地址，即使用上传按钮来将表单上传
<input type="submit">
而使用value可以改变按钮的名称
例如：
<input type="submit" value="登录">

按钮

可以通过value改变按钮的名称
<input type="button" value="正在加载">

在这里插入图片描述

可拖动式文本框

<textarea cols="" rows=""></textarea>
textarea定义多行文本域
cols定义文本域的宽（每行的字符数）
rows定义文本域的高（显示的行数）
例如：
<textarea cols="50" rows="30"></textarea>

在这里插入图片描述

总结

<body>
    <form action="../3、2 target.html">
        用户名：<input type="text"><br>
        密码：<input type="password" id="a"><br>
        密码确认：<input type="password" id="b"><br>
        邮箱：<input type="text"><br>
        邮箱确认：<input type="text"><br>
        性别：<input type="radio" name="sex">男
        <input type="radio" name="sex">女<br>
        你来自：<select name="省份" id="">
            <option value="" selected>内蒙古</option>
            <option value="">甘肃</option>
            <option value="">山西</option>
            <option value="">陕西</option>
            <option value="">新疆</option>
        </select><br>
        兴趣爱好：<input type="checkbox" name="test" value="1">音乐
        <input type="checkbox" name="test" value="1">篮球
        <input type="checkbox" name="test" value="1">读书
        <input type="checkbox" name="test" value="1">足球<br>
        <input type="checkbox" name="test" value="1">游泳
        <input type="checkbox" name="test" value="1">打乒乓球
        <input type="checkbox" name="test" value="1">看电视
        <input type="checkbox" name="test" value="1">画画<br>
        功能实现：<input type="submit">
        <input type="reset">
    </form>
</body>

在这里插入图片描述

weixin_52571040
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML实例之表单
qq_43131852的博客
09-25 299
参考https://www.w3school.com.cn/html/index.asp 文本域(Text fields) <html> <body> <form> 名： <input type="text" name="firstname"> <br /> 姓： <input type="text" name="lastnam...
什么是表单-表单组成-表单原理-表单实例-表单实例解析
程金鹏（程利鹏）
01-12 1万+
什么表单：组成：　　一个表单有三个基本组成部分： 1） 表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 2） 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 3） 表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处
HTML知识点04-表单
m0_65208646的博客
02-25 1507
一、表单组成部分 一个表单有三个基本组成部分： 表单标签：这里面包含了处理表单数据所用程序的URL以及数据提交到服务器的方法。 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮：包括提交按钮、复位按钮和一般按钮 二、表单语法 <form method="post" action="result.html"> <p> 用户名：<input type="text" name="username" p
React中受控与非受控组件
weixin_39782183的博客
03-09 89
参考链接 受控组件 <input type="text" value={this.state.value} onChange={(e) => { this.setState({ value: e.target.value }); }} /> <input>或<select&...
什么是表单？
m0_55832273的博客
03-16 8747
表单 表单：收集不同类型的用户输入信息。 输入框，密码框，文本域 下拉菜单，单选，多选。 from标签： 作用：定义一个表单。 一个表单是由表单元素组成的。 标签：只是说开始标签与结束标签。 元素：在HTML中，从开始标签到结束标签的所有代码统称为一个元素。 表单元素：不同类型的input元素 以及 单选框，提交按钮等。 格式： <form action=""> 传输的数据 </form&
html中表单提交的实现
09-22
表单提交是常见的一种操作，这篇文章主要介绍了html中表单提交的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
纸箱预订表单HTML模板
04-08
纸箱预订表单HTML模板是一款简洁的客户信息填写表单网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
HTML 表单组件实例代码
12-14
HTML 表单用于搜集不同类型的用户输入。下文通过代码给大家分享html 表单... 如果要给服务端提交数据 表单中的组件必须有name和value属性 用于给服务端获取数据 --> 输入名称:<input type="text" name="user" v
深入理解html表单输入监听
09-28
下面小编就为大家带来一篇深入理解html表单输入监听。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Html的表单
wenqi1的博客
08-21 3万+
一、表单基础内容： 表单一般使用form标签包裹，每一个表单选项都用input表示 text表示明文文本框， password表示暗文文本框， radio表示单选， checkbox表示复选框， check = "chcked"表示默认选择，应用于单选和复选 button表示按钮，value表示按钮的名字 reset表示重置按钮 image表示图片 submit表示提交，value表示提交键的名字 date表示日期 email表示邮箱 number表示数字 &nbsp;表
HTML---表单详解
gaoqiandr的博客
11-17 3625
在前端网页开发中，HTML的基础知识讲解，本文对于用户与网页的交互做出了详细讲解，具体包括用户输入数据，具体点就是用户输入数据的格式，文本，按钮，复选框等等。
HTML --- 表单
naoguoteng的博客
10-12 1862
1.表单的用途2.表单的工作原理3.表单中的各种标签 表单标签 form、输入标签 input、文本文框标签 textarea、下拉框标签 select、按钮标签 button 4.表单实例 表单在网页上用来给访问者填写信息的，从而获得用户信息，使用网页进行交互的功能。就像日常生活中统计信息的信息表一样。一般是将表单设计在一个html页面中，当用户填写信息后做提交操作，于是表单的内容就会从客户端的浏览器上发送给服务器，经过服务器上的jsp或者ASP或者Cgi等处理后，再将用户所需的信息传送给客户端的
初始HTML----表单表格
俯κǎń迗倥
03-20 347
初始HTML----表格表单 HTML 表格 表格由 < table > 标签来定义。每个表格均有若干行（由 < tr > 标签定义），每行被分割为若干单元格（由 < td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 表格实例 <!DOCTYPE ht...
form表单
热门推荐
JiuMeilove的博客
09-02 4万+
form表单详解form表单form表单简介form表单属性acceptaccept-charsetactionautocompleteenctypemethodnamenovalidatetargetHTML 表单输入元素文本域（Text Fields）密码字段单选按钮（Radio Buttons）复选框（Checkboxes）提交按钮(Submit Button)fieldset标签 标签 form表单 表单在Web网页中用以让访问者输入数据，当提交表单时，表单中输入的数据被打包传递给Web服务器端的程
HTML表单
dongdaxiaopenyou的博客
02-19 6801
一、form标签两个最重要的属性：action 和 methodinput的type类型有很多，这里有text和password两种button的type类型默认为submit，另外还有button, reset类型=================================================================二、GET 和 POST的区别：1.GET就是从服务器...
前端 HTML body标签相关内容 常用标签 表单标签 form
weixin_30730053的博客
04-02 199
表单标签 form 表单是一个包含表单元素的区域表单元素是允许用户在表单中输入内容，比如：文本域(textarea)、输入框(input)、单选框（） 表单的作用 form标签作用是把用户输入数据信息提交到服务端。 表单用于向服务器传输数据，从而实现用户与Web服务器的交互 表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。 表单还可以...
表单（非常非常重要）
weixin_47414034的博客
08-28 1522
input标签里type=”passwordt“，就是一个密码框，密码框和文本框长得很像，区别在于你在密码框里输入密码，会用点来代替。当type=button的时候，表示普通按钮（type=”submit“表示提交按钮，type=”reset“表示重置按钮)当type=radio时，还需要name一样，这样表示在一个组内，就只能选中一个。input标签里type=”text“，就是一个可以输入文字的文本框。input标签里type=”submit“表示提交按钮。后面多带了一一些参数：用户名和密码。.....
html表单包含哪些,HTML表单的属性有哪些
weixin_42518008的博客
07-15 279
HTML表单的属性有哪些发布时间：2020-11-09 11:47:26来源：亿速云阅读：78作者：小新HTML表单的属性有哪些？这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容，让我们一起来看看吧！HTML 表单用于搜集不同类型的用户输入。 元素HTML 表单用于收集用户输入。 元素定义 HTML 表单：.form elements.HT...
什么是表单
最新发布
m0_74759905的博客
02-26 236
表单
html中表单居中属性
02-07
HTML 表单的居中属性可以通过为表单元素设置 `...要想将表单中的元素居中，可以使用其他方法，例如使用 `text-align: center` 来居中文本、使用 `display: flex` 和 `justify-content: center` 来居中块级元素等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值