关于表单控件使用的一些疑问？
来源：2-3 基本控件（1）
呜蜩的呀
2022-08-08 14:12:41
问题描述：
如果value的值和输入的值不一样时，后台会收到的时value还是后面输入的内容？
textarea这个标签有value属性值吗？
button按钮默认的提交功能是必须再form表单中才能生效的是吗？
input：type=reset、submit和button：type=reset、submit有什么区别呢？
input：type=button、submit、reset较之button的优势是可以和js协作使用的是吗？
相关代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div> <p> 文本框 </p> <input type="text" name="sex" id="" value="male">male <input type="text" name="sex" id="" value="famle"> <input type="text" name="sex" id="" value="famle">famle <input type="text" name="sex" id="" value="famle"> </div> <hr> <div> <p> 单选按钮 </p> <input type="radio" name="sexcheck" id="" value="male">male <input type="radio" name="sexcheck" id="" value="famle">famle </div> <hr> <div> <p> 复选按钮 </p> <input type="checkbox" name="fruit" id="" value="apple">apple <input type="checkbox" name="fruit" id="" value="banner">banner <input type="checkbox" name="fruit" id="" value="per">per <input type="checkbox" name="fruit" id="" value="watermalen">watermalen <input type="checkbox" name="fruit" id="" value="orange">orange </div> <hr> <div> <p> label标签绑定文字和按钮,一个label对应一对按钮和文字 </p> <label> <input type="radio" name="water" id="" value="water">water <input type="radio" name="water" id="" value="water">watermalen <input type="radio" name="water" id="" value="water">water </label> <label> <input type="radio" name="water" id="" value="water">water </label> </div> <hr> <div> <p>密码框</p> <input type="password" placeholder="please input password" value="123456" name="password"> <!-- 需要思考一下，如果value的值和输入的值不一样时，后台会收到的时value还是后面输入的内容？ --> </div> <hr> <div> <p>下拉菜单</p> <select name="province" id=""> <option value="hangzhou">hangzhou</option> <option value="shanghai">shanghai</option> <option value="beijing">beijing</option> </select> </div> <hr> <div> <p>多行文本框，开始标签和结束标签要在同一行，否则文字无法居中显示,是行内元素，rows和cols表示的是可见文本框区域范围</p> <textarea>123</textarea> <textarea> 123 </textarea> <textarea cols="12" rows="12"></textarea> <textarea value="234"></textarea> <!-- textarea这个标签有value属性值吗？ --> </div> <hr> <div> <p>按钮</p> <button>1234</button> <input type="button" value="123"> <button type="button">ggg</button> ------<br> <button type="reset">reset1</button> <input type="reset" value="reset2"> ------<br> <button type="submit">submit1</button> <input type="submit" value="submit"> <!-- button按钮默认的提交功能是必须再form表单中才能生效的是吗？ input：type=reset、submit和button：type=reset、submit有什么区别呢？ input：type=button、submit、reset较之button的优势是可以和js协作使用的是吗？ --> </div> <hr> <div> <p>html5新增控件,配合form表单进行使用，required表示必填项</p> <input type="email" name="personal Email" id=""> <input type="color" name="colorchoice" id=""> <input type="range" name="" id=""> <!-- 进度条 --> <input type="number" name="numberchoice" id="" > <!-- 可添加设置最大值最小值 --> <input type="date" name="todate" id=""> <!-- 选择精确到日 --> <input type="time" name="" id=""> <input type="file" name="" id=""> <!-- 文件上传按钮，需要配合js使用 --> <input type="month" name="tomonth" id=""> <!-- 选择精确到月份 --> <input type="search" name="" id=""> <!-- 需要结合后台端口进行使用 --> <p>文本框可选择内容或提示项</p> <input type="text" name="text-example" id="" list="22"> <datalist id="22"> <option value="gggg"> <option value="gbk-23"> <option value="gbk-23fff"> <option value="gbk-23ffflisy"> <option value="gbk-23ffflisyhh"> </datalist> </div> </body> </html>
写回答
1回答
-
好帮手慕慕子
2022-08-08
同学你好，问题解答如下：
1、输入后的内容。
2、textarea设置value属性不会报错，但是该属性不生效。
3、是的。
4、两者的作用一样，唯一的就是在提交数据时存在差异，如下：
（1）input: type=subimt的提交按钮，所有浏览器提交的数据是value属性值。
（2）button: type=submit的提交按钮，IE浏览器将提交 <button> 与 <button/> 之间的文本，而其他浏览器将提交 value 属性的内容。
5、不是的，input和button都可以和js协作使用，input的优势，参考第四条解析，也就是浏览器之间不存在差异，不过现在ie浏览器已经不再维护，慢慢的就会退出历史舞台，所以不需要考虑ie浏览器的问题，那么这俩的区别也完全可以忽略，根据自己的习惯，选择器中一种使用即可。
祝学习愉快~
2
相似问题