html - 为什么我的 HTML 代码显示在我的表单文本区域中?

标签 html forms web

我正在尝试使用以下代码在 HTML 中创建一个两列表单。

<div id="form-wrapper">
  <form class="contact_form" action="" method="post" name="contact_form">
    <ul>
      <div id="form_left">
        <li>
          <span class="required_field"> * Denotes a required field</span>
        </li>
        <li>
          <label for="name">Name:</label>
          <input type="text" name="name" placeholder="John Doe">
        </li>
        <li>
          <label for="telephone">Contact Number:</label>
          <input type="tel" name="telephone" placeholder="(01225) 123456">
        </li>
        <li>
          <label for="email">Email:</label>
          <input type="email" name="email address" placeholder="<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="34514c555944585174514c55594458511a575b59" rel="noreferrer noopener nofollow">[email protected]</a>">
        </li>
      </div>  
      <div id="form_right">
        <li>
          <label for="message">Message:</label>
          <textarea name="message" cols="40" rows="6" >
        </li>
      </div>
    </ul>
  </form>
</div>

(http://jsfiddle.net/qrttZ/)

但由于某种原因,它在文本区域窗口内显示了我的 HTML 代码的下半部分。

我看不到任何开放标签,所以我不确定这是为什么。

最佳答案

事实上,HTML 不需要 XHTML 自闭合短标签,例如<input />意味着新手很容易犯这个错误,如 textarea执行非常相似的目的。只是出于一个很好的理由,它需要关闭。

<textarea name="message" cols="40" rows="6" ></textarea>

...

完成了,这个

<ul>
   <div id="form_left">
      <li>

很糟糕。 <li>显示关注 <ul>不应该有<div>那里。

还有

<label for="name">Name:</label>
<input type="text" name="name" placeholder="John Doe">

没有 id在输入中,for没用。

<label for="name">Name:</label>
<input type="text" name="name" id="name" placeholder="John Doe">

但是,如果您要使用标签和输入之间没有标记,并且不设置样式

<label>Name: <input type="text" name="name" placeholder="John Doe"></label>

输出较少

关于html - 为什么我的 HTML 代码显示在我的表单文本区域中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14167726/

相关文章:

html - 强制 div 和内容的最大宽度为 100%

javascript - 将原型(prototype) Ajax 调用转换为 jQuery(添加表单参数和加载函数)

web - 网站目录搜索引擎优化

javascript - 将上传的图片插入到 summernote 编辑器

javascript - onClick 表行,其中包含 onClick 按钮和 Bootstrap Modal

html - <a> 标签内的图片和文字

html - Logo 未显示在网页标题中

警告框中的 JavaScript 交互式表单?

forms - 从表单提交跟踪中捕获 URL - Google Analytics

web - 每个单独的产品都应该有自己的网页吗?