Home >Web Front-end >HTML Tutorial >?Si's deceptive form artifact_html/css_WEB-ITnose
Today, at the request of those gays and sluts, I specially trained them on the slut form artifact, which is designed to deceive people.
The purpose is: learn to submit two-dimensional array data.
1. Don’t be surprised
HTML:
<form action=”” method=”post”> <input type=”text” name=”row1”/> <input type=”submit” value=”提交”/></form>
Cheat index: 0
Reasons for complaining: It is not appropriate to deceive people
2. Occasionally encounter
HTML:
<form action=”” method=”post”> <input type=”text” name=”row[]” /> <input type=”text” name=”row[]”/> <input type=”submit” value=”提交”/></form>
Deception index: 1
Reason for complaining: Yi Shaowi[]
3. You won’t pay for your life if you cheat people
HTML
<form action=”” method=”post”> <input type=”text” name=”row[1]” /> <input type=”text” name=”row[2]”/> <input type=”text” name=”row[field]” /> <input type=”text” name=”row[value]”/> <input type=”submit” value=”提交”/></form>
Trap index: 2
Reason for complaining: Key value cannot be distinguished
4. I don’t believe I can trick you to death
HTML:
<input type=”text” value=”” class=”you”/><form action=”” method=”post”> <input type=”text” name=”row1”/> <input type=”hidden” name=”yade” /> <input type=”button” class=”go_btn” value=”提交”/></form>
JQuery:
$(“.go_btn”).click(function(){ $(“input[name=’yade’]”).val($(“.you”).val()); $(this).parent().submit();})
Traumatizing Index: 3
Reasons for complaining : Why do you want to put the input outside the form?
5. Trap it to grandma’s house
HTML:
<form action=”” method=”post”> <input type=”text” value=”row1”/> <input type=”text” value=”row2” /> <input type=”button” value=”提交” class=”go_btn”/></form>
Trait index: 4
Reason for complaining: What kind of thing is it? There is no name for calling programmers
Solution:
JQuery:
$(“.go_btn”).click(function(){ var parent = $(this).parent(); var map = []; parent .find("input[type=text]").each(function(){ map.push($(this).val()); }); $.ajax({ url:parent.attr("action"), data:{map:map} });}
6. The pit is healthier
HTML:
<form action=”” method=”post”> <input type=”text” name=”row1”/> <input type=”text” name=”row2”/> <input type=”button” value=”提交” class=”go_btn”/></form>
Traitor index: 3
Reason for complaining: Why do you only accept json data
Solution:
JQuery
$(“.go_btn”).click(function(){ //$(this).parent().serialize();
$.ajax({ data:{s:JSON.stringify($(this).parent().serializeArray())} })});
7. Don’t be fooled or unhappy
HTML:
<form action=”” method=”post”> <p data-value=”111”> <input type=”text” name=”row1”/> </p> <p data-value=”112”> <input type=”text” name=”row2”/> </p> <input type=”button” value=”提交” class="go_btn"/></form>
Cheat index: 5
Reasons for complaining: Both p and input, what do you want to do
Solution:
JQuery
$(“.go_btn”).click(function(){ var parent = $(this).parent(); var map = []; parent .find("p").each(function(){ map.push({ id:$(this).attr("data-value"), value:$(this).find("input").val() }); }); $.ajax({ url:parent.attr("action"), data:{map:map} });}
8. Cheating people without integrity
HTML:
<form action=”” method=”post”><input type=”text” name=”row[1][]” /><input type=”text” name=”row[2][]”/><input type=”text” name=”row[field][]” /><input type=”text” name=”row[value][]”/><input type=”submit” value=”提交”/></form>
Cheat index: 10
Reason for complaining: Brother, how many dimensions of data do you want to convert, can it be converted into json?
It is estimated that the article was too misleading and was criticized severely, so it was removed from the homepage by the staff.