html input标签 单行文本框 多行文本框

最新推荐文章于 2024-06-17 18:26:02 发布
最新推荐文章于 2024-06-17 18:26:02 发布
阅读量10w+ 收藏 103
点赞数 41
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42265536/article/details/85215271
版权
input type属性
text单行文本框
passworld密码文本框
button按钮

reset

重置按钮
image图像形式的提交按钮
radio单选按钮
checkbox复选框
hidden隐藏字段
file

文件上传

语法：    <input type="表单类型">

单行文本框

语法：    <input type="text">

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>

    <form name="my_Form" method="POST">
        姓名：<input type="text">
    </form>

</body>
</html>

text 几个重要属性

value ： 定义文本框的默认值，也就是文本框内的文字

siae : 定义文本框的长度，以字符为单位

maxlength : 设置文本框中最多可以输入的字符数

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>

    <form name="my_Form" method="POST">
        姓名：<input type="text" value="zql" size="15" maxlength=""><br>
        年龄：<input type="text" value="18" size="15" maxlength="3">
    </form>

</body>
</html>

多行文本框：

语法：

<textarea cols="行数" rows="列数">内容</textarea>

实例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>

    <form name="my_form" method="POST">
        <textarea cols="8" rows="20">介绍一下自己</textarea>
    </form>

</body>
</html>

 

eerieShadow
关注
  • 41
    点赞
  • 踩
  • 103
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
Vue 处理表单input单行文本框的实例代码
10-17
主要Vue 处理表单input单行文本框的实例代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
js实现多行文本框textarea自适应
qq_41821874的博客
03-11 2094
实现思路：获取元素内容高度scrollHeight（滚动高度），当元素状态改变时调用 函数（当需求高度大于实际高度时，更新实际高度为内容高度） <textarea name="textArea" id="t1"></textarea> var textArea1 = document.getElementById('t1'); function activeGo() {...
C#实现制作多行文本框（附完整源码）
最新发布
希望我的博客，能帮上你解决学习中工作中所遇到的问题
06-17 158
C#实现制作多行文本框（附完整源码）
Input文本框随着输入内容多少自动延伸的实现
08-31
下面小编就为大家带来一篇Input文本框随着输入内容多少自动延伸的实现。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
input表单如何制作多行文本输入框？一篇文章教你学会使用input标签
web前端入门基础进阶教程-htmlcssjs
06-09 8705
本篇文章主要的为大家讲述了HTMLinput标签如何制作一个登陆界面的介绍，有文本框、密码框、单选框、多选框、提交和重置按钮的使用说明，完全的解释了HTML表单input标签的使用详情了。现在让我们来看看这篇文章吧 一、首先我们来看看如何制作文本框： <form action="url地址" method=“get/post” name="表单名称"> <p>这是文本框</p> 用户名：<input type="text" name="username">
关于el-input的多行文本框textarea固定多行不可拖拽
qq_22187895的专栏
04-12 3352
的textarea属性下的多行文本框，我真是用一次讨厌一次，我也不知道为什么每次那个autosize的属性用着没效果，rows也是没有用，怎么都是一行，真是烦的我（后面有时间我得去看看是为什么了）。将:resize属性设置为none，不可拖拽，同时:autosize=设置成自己想要的行数。因为我试了一下没有效果，组合:resize没有效果，单独用也没有效果。不要问我问什么不使用:rows=“4”，所以就是要按上面那样这么设置了。
【HTML】input&多行文本
weixin_45532220的博客
06-27 1万+
input实现上传文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>input实现文件上传</title> </head> <body> <form action="XXX" method="post" enctype="multipart/form-data"> &
HTML 文本域元素详解：如何使用属性创建多行输入框
a451319296的博客
12-16 6004
文本域介绍HTML 的文本域（Textarea）元素是一种创建多行文本输入框的简单方法。通过使用不同的属性，可以为文本域添加各种功能和行为，以提高用户的交互和表单填写体验。常用的属性包括 autofocus、disabled、form、maxlength、name、placeholder、readonly、required 和 wrap 等。除此之外，还有诸如 cols、rows、formaction、formenctype、formmethod 和 formtarget 等属性，可以进行更细致的控制。
input输入多行文字
weixin_73675558的博客
08-17 1859
如果你想输入多行文字，并在每次复制粘贴后保存，可以使用一个循环来实现。那input输入多行文字。第二复制粘贴进input。
HTML，多行文本输入框textarea
Dorothy_L的博客
09-16 1万+
HTML 标签 textarea 在大部分浏览器中只要指定行（rows）和列（cols）属性，就可以规定 textarea 的尺寸，但大小在浏览器中（firefox、chrome）还是可以调节的，在他的右下角会有一个拖动标志。 可以通过以下两种方式控制大小 textarea style=”height: 50px;width: 70px;resize: none;” textarea ro...
HTML中input参数,多行文本textarea说明,以及获取和设置的方法
fanlei5458的博客
05-02 2万+
input 的所有类型和属性说明 (本文是使用的Jquery实现的) 除了特别说明: 获取和设置属性和样式的值可以统一用: 属性如: name,value,type,id等 获取: $("#text").attr('属性名') 设置: $("#text").attr({属性:"值",属性:"值"}) 获取和设置在css里面的属性: 属性如: color...
文本框自动换行
03-15
1. **多行文本框**：与单行文本框不同，多行文本框允许用户输入多行文本。在HTML中，我们可以使用`<textarea>`标签来创建一个多行文本框；在Windows Forms或WPF中，对应的是`TextBox`控件，并需设置`Multiline`属性...
JavaScript文本框脚本编写的注意事项
11-29
对于`<input>`，通常使用`type="text"`来创建单行文本输入，而`<textarea>`用于多行文本输入。 1. **属性设置** - `type`: 对于`<input>`，设置`type="text"`来创建文本框。 - `size`: 指定`<input>`文本框中能...
多行文本框（Text.MultiLine）问题
王华春_Jason
05-25 1万+
概述 机房收费系统中的充值窗体本身的难度不是很大，关键是有时候真的细心了吗！今天我就有幸遇到了这样的问题，并通过自己的努力把它发现并解决了。虽然很简单，但是我还是分享给大家。 问题 今天敲机房的时候，在充值窗体代码都敲完了以后Text本文框能够显示内容，但是只有一行。我在经过核对后，发现不是代码上的问题，那是哪里出了问题呢？下面看具体问题。 毕竟这样的显示还是非常的不合理的。经过多次的不断...
单行文本框与多行文本框
热门推荐
ShingEven的专栏
12-05 2万+
单行文本框即type属性设为text的input标签，多行文本框即textarea，它们除了与其它input标签一样具有的value属性处，还具有defaultValue属性表示文本框中的默认文本，即在HTML里所指定的value值的 文本框还有一个方法：select,可以使文本框中的文字呈选中状态。 Select对象 表单元素中最复杂的就算是select对象了。select是一复合对象，它
input输入多行；字符串按固定长度截取
qq_39245526的博客
04-06 2080
使用input输入多行 1、先定义空字符串 text 用来存储数据 2、输入字符串的行数lines 3、使用for循环 输入字符串 并换行拼接 text = '' lines = int(input("请输入行数：")) for i in range(lines): text += input("请输入第%d行：" %(i+1) ) + '\n' print(text) ...
html多行文本框_前端面试集锦 HTML篇
weixin_39638012的博客
12-01 904
HTML1、语义化何为语义化，字面意思就是根据html语言做一个让代码变得有意义的转化。emmm 大家都知道，html标签有很多，<h1> <p> <div> <span>等等等。看看这些可爱的标签，有什么想说的？咱们先看一个语义化的页面布局，如下：1、<header> <header>定义文档或者文档的部分区域的页眉，...
【多行文本输入框--文本域】(html,css)
m0_70684059的博客
03-23 900
【多行文本输入框--文本域】(html,css)
HTML-form表单
weixin_47782618的博客
04-03 2052
1. 什么是表单 表单是由窗体和控件组成的，一个表单一般应该包含用户填写信息的输入框，提交按钮等，这些输入框、按钮叫做控件。表单很像容器，它能容纳各种各样的控件。 <form action="url" method="get|post" name="myform"></form> name：表单提交时的名称 action：表单提交到的地址 method：提交方式，默认值为get post和get的区别： ① url可以看到通过get提交的数据，而通过post的则不能。
input 多行文本框
12-14
可以使用`<textarea>`标签来创建多行文本框，也可以使用`<input>`标签的`type`属性设置为`textarea`来创建多行文本框。下面是一个使用`<textarea>`标签创建多行文本框的例子： ```html <textarea rows="4" cols="50"> 在这里输入文本... </textarea> ``` 其中`rows`属性设置文本框的行数，`cols`属性设置文本框的列数。 如果使用`<input>`标签的`type`属性设置为`textarea`来创建多行文本框，可以使用`resize`属性设置文本框是否可调整大小，使用`v-model`绑定数据，使用`:autosize`属性设置文本框的自动调整大小的最小行数和最大行数。下面是一个使用`<input>`标签创建多行文本框的例子： ```html <el-input type="textarea" resize="none" :autosize="{ minRows: 4, maxRows: 4 }" placeholder="请输入意见" v-model="shyj"></el-input> ``` 其中`:autosize="{ minRows: 4, maxRows: 4 }"`表示设置文本框的自动调整大小的最小行数和最大行数都为4行。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值