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

【问题标题】：HTML - Make form values disappear, and control the height, and width of text inputsHTML - 使表单值消失，并控制文本输入的高度和宽度
【发布时间】：2013-09-27 05:51:10
【问题描述】：

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

我正在编写一个“提交表单”，我需要它看起来像以下示例：

消息：（让用户提交消息，或键入任何 cmets）在文本框中，我希望它说“在此处键入您的消息”，但是当您在框中单击时，“键入你的信息在这里'消失了。我也希望能够控制这个文本框的大小。姓名：在此处输入您的名字和姓氏（我希望它的功能与上述相同）电子邮件地址：在此处输入您的电子邮件地址：（再次，功能与上述相同）

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

<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>

【问题讨论】：

标签： html forms

【解决方案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" />

【讨论】：

【解决方案2】：

据我了解，这几乎与以下内容重复：Onclick event to remove default value in a text input field 对吗？

如果你对 HTML5 没问题，那么你可以使用 placeholder 否则你需要使用 Javascript 来删除文本 onblur

【讨论】：

【解决方案3】：

我建议您使用引导 css 以获得更好的样式。看看这个http://getbootstrap.com/css/。希望对你有帮助

【讨论】：

【解决方案4】：

您可以定义一个脚本并使用以下函数，因为它可以用于onfocus 和onblur，

function clearText(field) {
    if(field.defaultValue == field.value) {
        field.value = “”;
    }
    else
        if(field.value == “”) {
            field.value = field.defaultValue;
        }
}

【讨论】：