HTML - 使表单值消失，并控制文本输入的高度和宽度

Question

我正在创建一个网站，但我在编码方面遇到了困境。

我正在写一个“提交表单”，我需要它看起来像下面的例子:

消息:(让用户提交消息，或输入任何评论)在文本框中，我希望它说“在此处输入您的消息”，但是当您在框中单击时，“类型你在这里的留言'消失了。我还希望能够控制此文本框的大小。姓名:在这里输入你的名字和姓氏(我希望它的功能和上面一样)电子邮件地址:在此处输入您的电子邮件地址:(同样，功能与上述相同)

这是我到目前为止的代码，我不确定它是否正确，因为我正在尝试做的事情:

<form method="post" action="mailto:youremail@youremail.com" >

<b>Message:</b><br><input type="textbox" value="text_name" onfocus="if (this.value=='Text_name') this.value='';" style="width: 300px;" style="height: 300px;"/><br/>

<b>Name:</b><br><input type="text" name="First and Last" size="30" maxlength="30" /><br />

<b>Email:</b><br><input type="text" name="Email" size="24" maxlength="24" /><br />

<input type="submit" value="Send Email" /> 

</form>

Answer 1

有很多插件可用。但是您可以使用 HTML5 属性“占位符”

<input type="text" placeholder="Enter your name...">

HERE 是演示。当您开始输入时，文本/提示将消失。

<b>Message:</b><br><input type="textbox" placeholder="Type your message here"   style="width: 300px;" style="height: 300px;"/><br/>

<b>Name:</b><br><input type="text" name="First and Last" size="30" maxlength="30" placeholder="Type your first and last name here" /><br />

<b>Email:</b><br><input type="text" name="Email" size="24" maxlength="24" placeholder="Type your email address here"/><br />

<input type="submit" value="Send Email" />