html - 多行文本标签

标签 html css

atm 有两件事困扰着我......
第一:
我正在尝试创建一个包含几个简单文本输入标签的联系人部分,其中一个标签显示了几行。那将是“信息” ofc。 问题是我无法找到在哪里以及如何添加这些行并限制每行中可以输入的列数。
第二:
我怎样才能使它们可点击/可编辑?当我将它们添加到网站时,它们有占位符,但我无法单击并在其中输入文本(比如填写表格)...

代码片段如下,感谢您帮助我学习这些东西......

.kontakt {
	display: block;
	padding-top: 10px;
	padding-bottom: 15px;
	padding-left: 15px;
	padding-right: 15px;
	border: 3px solid #20202f;
	border-radius: 10px;
	position: absolute;
	top: 50px;
  left: 50px;
	font-size: 24px;
	background-color: rgba(51, 52, 89, 0.85);
}

#yourname {
	font-size: 20px;
	margin-bottom: 10px;
}

#mail {
	font-size: 20px;
	margin-bottom: 10px;
}

#message {
	font-size: 20px;
	margin-bottom: 25px;
}

.messagebutton {
	width: 75px;
	height: 35px;
	font-size: 15px;
	border-radius: 5px;
	background-color: #bfbfff;
	color: black;
	margin-left: 172px;
	margin-bottom: 5px;
}
		<div class="kontakt">
			<div class="nametext">
				<label for="ime">your name</label> 
			</div>
			<div class="namebox">
				<input type="text" id="yourname" placeholder="your name">
			</div>
			<div class="mailtext">
				<label for="mail">e-mail</label>
			</div>
			<div class="mailbox">
				<input type="email" id="mail" placeholder="your email">
			</div>
			<div class="messagetext">
				<label for="Message">message</label>
			</div>
			<div class="messagebox">
				<input type="text" id="message" placeholder="Your message goes here">
			</div>
				
			<button type="button" class="messagebutton">SEND</button>
			
		</div>

最佳答案

很棒的东西!

要获得多行消息,请使用 textarea 标签,而不是输入。所以,

    <div class="messagebox">
        <textarea id="message" rows="3" placeholder="Your message goes here"></textarea>
    </div>

ROWS 属性会得到你的行数,或者你可以使用浏览器默认值。

https://www.w3schools.com/tags/tag_textarea.asp

至于可编辑性,默认情况下它们是可编辑的 - 您的示例似乎工作正常。

关于html - 多行文本标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47502443/

相关文章:

jQuery检查是否没有 sibling 有类(class)

javascript - jquery 使一个 div 跟随另一个位置

javascript - instafeed.js : The access_token provided is invalid

javascript - 如何将图像放在图像上

html - Wordpress Visual composer CSS 问题?

javascript - 获取 `img` 元素的 XY 坐标

html - 最小高度不适用于 Parent Div

javascript - 单击菜单时删除菜单的li(js,jquery)

javascript - document.body.style.backgroundImage 不起作用

javascript - Bootstrap Affix 插件导航栏顶部延迟