form表单提交

最新推荐文章于 2022-04-15 23:27:44 发布

强直也要学编程

最新推荐文章于 2022-04-15 23:27:44 发布

阅读量320

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_52374211/article/details/115385423

版权

本文详细介绍了HTML表单的构建，包括姓名、电话、邮箱输入，披萨大小选择及配料复选，以及配送时间设定。表单数据通过Application/x-www-form-urlencoded编码方式提交，并解析了form元素的相关属性如autocomplete、elements属性以及reset方法。此外，还讨论了如何通过JavaScript访问和操作表单元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<form method=”post” action=url enctype=”application/x-www-form-urlencoded”>
    <label>姓名：<input name=”custname” required></label>
    <label>电话：<input type=”tel” name=”custtel” required></label>
    <label>邮箱：<input type=”email” name=”custemail” required></label>
    <fieldset>
        <legend>披萨大小</legend>
        <label><input type=”radio” name=”size” value=”small” required>小</label>
        <label><input type=”radio” name=”size” value=”medium” required>中</label>
        <label><input type=”radio” name=”size” value=”large” required>大</label>
    </fieldset>
    <fieldset>
        <legend>披萨配料</legend>
        <label><input type=”checkbox” name=”topping” value=”bacon”>熏肉</label>
        <label><input type=”checkbox” name=”topping” value=”cheese”>奶酪</label>
        <label><input type=”checkbox” name=”topping” value=”onion”>洋葱</label>
        <label><input type=”checkbox” name=”topping” value=”mushroom”>蘑菇</label>
    </fieldset>
    <label>配送时间：<input type=”time” name=”delivery” min=”11:00” max=”21:00” step=”900”></label>
    <button>提交订单</button>
</form>

服务器处理：

url 服务器接口地址
Application/x-www-form-urlencoded 服务器接收的数据先编码
Custname，custtel，custemail，size，topping，delivery 接口接收的参数

form的name="pizza"属性---var pizzaForm = document.forms.pizza;

form的autocomplete=”on”/”off”属性---输入框点击-显示输入记录

elements属性---该表单子孙表单控件动态集合(除图片按钮)，归属于该表单的表单控件(除图片按钮)

Length属性=elements.length，包含的个数

<form name=”test”>
    <input name=”a”/>
    <input name=”b”/>
</form>

testForm.elements[index]-testForm.elements[0]

testForm.elements[“a”]

testForm[index]-testForm[0]

testForm[name]-testForm[“a”]

testForm.reset();

---分享是程序员的美德