from的一些属性和作用

Posted 2023-04-16

参考技术A

表单作用
form表单在网页中主要负责采集数据并向服务器传输数据。

常用的input标签及作用

标签|作用|
-|
button 　|定义可点击按钮（多数情况下，用于通过 javascript 启动脚本）。
checkbox 　|定义复选框。
file 　|定义输入字段和 "浏览"按钮，供文件上传。
hidden 　|定义隐藏的输入字段。
image 　|定义图像形式的提交按钮。
password 　|定义密码字段。该字段中的字符被掩码。
radio 　|定义单选按钮。
reset 　|定义重置按钮。重置按钮会清除表单中的所有数据。
submit 　|定义提交按钮。提交按钮会把表单数据发送到服务器。
text 　|定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。

1.请求方式

get请求：请求的数据会附加在URL之后，以?分割URL和传输数据，多个参数用&连接。URL的编码格式采用的是ASCII编码，而不是unicode，即是说所有的非ASCII字符都要编码之后再传输。
post请求：post请求会把请求的数据放置在HTTP请求包的包体中。
get请求的数据会暴露在地址栏中，而post请求则不会。

2.传输数据的大小

GET:特定浏览器和服务器对URL长度有限制，例如IE对URL长度的限制是2083字节(2K+35)。对于其他浏览器，如Netscape、FireFox等，理论上没有长度限制，其限制取决于 操作系统 的支持。
因此对于GET提交时，传输数据就会受到URL长度的限制。

POST:由于不是通过URL传值，理论上数据不受限。但实际各个WEB服务器会规定对post提交数据大小进行限制，Apache、IIS6都有各自的配置。

3.安全性

POST的安全性要比GET的安全性高。通过GET提交数据，用户名和密码将明文出现在URL上，因为登录页面有可能被浏览器缓存， 查看浏览器的历史纪录，就可以拿到你的账号和密码。

name 属性规定 input 元素的名称。name 属性用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据。

radio控件是通过name属性进行分组的，当其name属性相同的时候.这些radio为一组.同一组中的radio只能同时选中一个.

placeholder 属性提供可描述输入字段预期值的提示信息。
该提示会在输入字段为空时显示，并会在字段获得焦点时消失。

作用：
type="hidden"使用该字段来存储用户不需要查看的任何内容，但是要在表单提交时发送到服务器。
1.hidden定义了不向用户显示的表单字段。用户无法更改字段的值，或与其进行交互。当用户提交表单时，会发送他们输入的所有数据，包括隐藏字段中隐藏的数据。
例如：

在这个例子中，字段invoiceNumber已经被一些以前的JavaScript函数填写了。用户不需要看到它，我们不希望用户能够修改它。所以我们只需要与处理表单一起传递给服务器。

单选按钮“选中”属性不起作用

【中文标题】单选按钮“选中”属性不起作用

【英文标题】：Radio Buttons "Checked" Attribute Not Working

【发布时间】：2011-04-06 02:52:39

【问题描述】：

默认情况下，单选按钮不显示为checked。我开始时没有默认选择，做了一些非常简单的 js 验证，但它不起作用。所以我选择只使用默认值，直到我弄清楚并发现发生了一些奇怪的事情。

标记是有效的，我已经在 FF、Safari 和 Chrome 中尝试过。没有任何效果。

我认为这是与 jQuery 库的冲突，因为当我删除调用脚本后问题就消失了。

<label>Do you want to accept American Express?</label> Yes
<input id="amex" style="width: 20px;" type='radio' name='Contact0_AmericanExpress' value='1' /> No
<input style="width: 20px;" type='radio' name='Contact0_AmericanExpress' class='check' value='0' checked="checked" />

【问题讨论】：

您的问题到底是什么？我将您的 HTML 复制到一个空文件中，并选中“否”按钮。这是 IE8、FF 和 Opera。

在下面查看答案（虽然是一种解决方法）

【参考方案1】：

如果您有多个具有选中属性的相同名称，它将采用页面上最后一个选中的单选。

<form>
    <label>Do you want to accept American Express?</label>
    Yes<input id="amex" style="width: 20px;" type="radio" name="Contact0_AmericanExpress"  />  
    maybe<input id="amex" style="width: 20px;" type="radio" name="Contact0_AmericanExpress"  checked="checked" />  
    No<input style="width: 20px;" type="radio" name="Contact0_AmericanExpress" class="check" checked="checked" />
</form>

【讨论】：

它实际上会检查<form> 中的最后一个收音机。您可以有多个同名的已检查输入，只要它们属于不同的表单即可。

这是我的问题。该页面有两个 div，一次只显示一个。两者都有一个同名的单选按钮组。在我的例子中，两者都有选中的属性，但浏览器似乎从隐藏的 div（HTML 中的后一个）中选择一个作为用于显示所选单选按钮的属性。

@BrunoLange 这是我的问题。我在页面上呈现相同 HTML 的多个实例 - 其中包括两个未包含在表单标记内的单选按钮，一个单选按钮具有 checked 属性。我必须将它们包装在每个实例的 <form> 标记中才能选中默认单选按钮。

我需要将单选按钮及其唯一命名的组包裹在自己的表单标签中。

这解决了我的问题，元素在迭代和动态创建时具有相同的名称！！！

【参考方案2】：

单选输入必须在表单内，“已检查”才能工作。

【讨论】：

将radio 类型的输入放入form（之前是div）解决了我的问题！我很好奇这是什么原因？

这里也一样。我真的不知道为什么需要一个表单标签才能使检查可靠地工作...... o.o

我不认为这是必要的，但使用表单元素将允许命名为“范围”我猜这样选中的属性将起作用。

@CharisTheo，事实上，这是必要的。自己试试吧。

@MichaelSeltenreich 我确实做到了，我已经通过更改单选按钮的名称而不将它们包含在表单元素中解决了这个问题

【参考方案3】：

可能是这样的：

Is there a bug with radio buttons in jQuery 1.9.1?

简而言之：不要使用 attr() 而是使用 prop() 来检查单选按钮。天哪，我讨厌 JS……

【讨论】：

这可能没有回答 OP 的问题，但它回答了我的问题

昨天刚发现同样的问题。

【参考方案4】：

解决这个烦人问题的终极 JavaScript 解决方法 -

只需将 jQuery 命令包装在 setTimeout 中。间隔可能非常小，我使用10 毫秒，它似乎工作得很好。延迟非常小，最终用户几乎无法察觉。

setTimeout(function()
  $("#radio-element").attr('checked','checked');
,10);

这也适用于

$("#radio-element").trigger('click'); $("#radio-element").attr('checked',true); $("#radio-element").attr('checked',ANYTHING_THAT_IS_NOT_FALSE);

Hacky...hacky...hacky...hacky...是的，我知道...因此这是一种解决方法...。

【讨论】：

您似乎在第一个示例中为所有#radio-elements 设置了“已检查”属性。

因为它是一个id选择器，所以应该只有1个匹配元素

【参考方案5】：

嘿，我也遇到了类似的问题，在一个 ajax 生成的页面中。我在 FF 中使用 Webdeveloper 插件生成了源代码，并检查了表单中的所有输入，发现隐藏的 div 内还有另一个复选框（显示:none) 具有相同的 ID，一旦我更改了第二个复选框的 id，它就开始工作了.. 你也可以试试.. 让我知道结果.. 干杯

【参考方案6】：

刚刚将您的代码复制到：http://jsfiddle.net/fY4F9/

默认选中否。您是否运行了任何会影响单选框的 javascript？

【讨论】：

我知道，这很疯狂吧？不，我没有任何脚本去地址单选按钮。只是对文本字段和滑块脚本进行了一些验证。我现在要通过它只是为了确保..

找到了罪魁祸首，但我不知道该脚本中究竟是什么导致了问题

谢谢 Ben，但这绝对是脚本。禁用时，我可以看到默认选中的按钮。

其实我觉得是和JQuery库冲突

【参考方案7】：

jQuery 文档提供了a detailed explanation for checked property vs attribute。

因此，这是另一种检索选定单选按钮值的方法

var accepted = $('input[name="Contact0_AmericanExpress"]:checked').val();

【参考方案8】：

您好，我认为如果您将 id 属性用于第二个输入并为其赋予唯一的 id 值，它将起作用

<label>Do you want to accept American Express?</label>
Yes<input id="amex" style="width: 20px;" type='radio' name='Contact0_AmericanExpress'   value='1'/>  
No<input style="width: 20px;" id="amex0" type='radio' name='Contact0_AmericanExpress' class='check' value='0' checked="checked"/>

【参考方案9】：

我可以通过将input 标记的名称设置为相同的两组输入来重现这一点，如下所示：

<body>
  <div>
      <div>
        <h3>Header1</h3>
      </div>
      <div>
          <input type="radio" name="gender" id="male_1" value="male"> Male<br>
          <input type="radio" name="gender" id="female_1" value="female" checked="checked"> Female<br>
          <input type="submit" value="Submit">
      </div>
  </div>


  <div>
      <div>
        <h3>Header2</h3>
      </div>
      <div>
          <input type="radio" name="gender" id="male_2" value="male"> Male<br>
          <input type="radio" name="gender" id="female_2" value="female" checked="checked"> Female<br>
          <input type="submit" value="Submit">
      </div>
  </div>
</body>

（要查看此运行情况，请单击here）

以下两种解决方案都可以解决问题：

为第二组中的输入使用不同的名称 对其中一个组使用form 标签而不是div 标签（无法真正弄清楚这会解决问题的真正原因。很想听听对此的一些意见！）

【参考方案10】：

**Radio button aria-checked: true or false one at a time**

$('input:radio[name=anynameofinput]').change(function() 
            if (this.value === 'value1') 
                $("#id1").attr("aria-checked","true");
                $("#id2").attr("aria-checked","false");
            
            else if (this.value === 'value2') ;
                $("#id2").attr("aria-checked","true");
                $("#id1").attr("aria-checked","false");
            
   );

【参考方案11】：

也试试这个方法

$('input:radio[name="name"][id="abcd'+no+'"]').attr("checked", "checked");

如果有<form />标签则("checked", true)否则("checked", "checked")

【参考方案12】：

您的代码是正确的，尝试调试您的 JQuery 脚本以找出问题所在！ 如果你使用的是 FF，你可以安装一个扩展来调试 JS（和 JQuery），它叫做 FireBug。

【参考方案13】：

您使用的是非标准的 xhtml 代码（值应该用双引号括起来，而不是单引号）

试试这个：

<form>
  <label>Do you want to accept American Express?</label>
  Yes<input id="amex" style="width: 20px;" type="radio" name="Contact0_AmericanExpress"  />  
  No<input style="width: 20px;" type="radio" name="Contact0_AmericanExpress" class="check" checked="checked" />
</form>

【讨论】：

这取决于 Jordan 的文档类型。不管怎样，它仍然可以在 xhtml doctype 中工作；但是它不会验证。

我改变它只是为了好玩，但我知道这不是问题。验证很好，但它不能解决这个问题。

@CFP 实际上，在符合标准的 XHTML（transitional、strict、HTML5 等）中允许使用双引号或单引号。见：dev.w3.org/html5/html-author/#double-quote-attr

【参考方案14】：

只需将选中的属性添加到您希望默认选中的每个收音机

试试这个：

<input style="width: 20px;" type="radio" name="Contact0_AmericanExpress" class="check" checked/>

【参考方案15】：

将checked="checked" 替换为checked=true。或者您甚至可以将其缩短为 checked。

这是因为 checked 属性的期望值类型是布尔值。不是字符串。