前端入门篇(八)表单

表单form

超文本传输协议

选择框

具体代码

提交方式GET/POST

表单form:

  • 收集数据:将用户输入的数据发送或提交到服务器
  • 输入:文本:普通(明文)、加密(密文);单选框;多选框;下拉框等
  • 提交:提交按钮
  • action属性用来指明表单提交之后的地址,不填写则为当前页面
  • method属性用来指明提交方式

超文本传输协议

超文本传输协议(http) 浏览器和服务器的通讯 请求-应答模式,浏览器主动发起请求——服务器接收——处理——结果返回给浏览器——浏览器根据结果展示出来

选择框:需要定义name和value,将用户的选项传递出去

单选框:input – radio
以name划分组别
在同一组里的选项只能选其中一个

多选框:input – checkbox

下拉框:select – option

具体代码

文本输入

<body>
    <form action="">
    
        用户名:<input type="text" name="user"><br>
        密码:<input type="password" name="pwd"><br>
        <input type="submit">
    form>
body>

效果:
在这里插入图片描述

可以看到,输入的密码在文本框内为加密格式
点击“提交”按钮之后,输入的数据会被清空
输入的数据在传输过程中依然使用明文传输,如何加密在js中学习
前端入门篇(八)表单_第1张图片

需要定义name,才能将数据上传
如果用户名没有定义name,问号之后就不会有user=123:
在这里插入图片描述

加入选择框

需要在定义name的基础上,多定义其value值,才能向服务器传递用户选择的对象,否则只是在页面显示选中选项
<body>
    <form action="">
    
        用户名:<input type="text" name="user"><br>
        密码:<input type="password" name="pwd"><br>
        
        性别:<input type="radio" name="sex" value="male"><input type="radio" name="sex" name="female"><br>

        兴趣:<input type="checkbox" name="ckb" value="read">看书
        <input type="checkbox" name="ckb" value="eat">吃饭
        <input type="checkbox" name="ckb" value="funny">看剧
        <br>
        城市<select name="city">
            <option value="shangh">上海option>
            <option value="beij">北京option>
            <option value="chengd">成都option>
            <option value="hangz">杭州option>
            <option value="chongq">重庆option>
        select><br>
        <input type="submit">
    form>
body>

效果:
前端入门篇(八)表单_第2张图片
在这里插入图片描述

提交方式GET/POST

用get方法提交时,网址会加上表单里填写或选择的内容
用post方法提交时,网址不会改变,表单数据隐藏在header里

前端入门篇(八)表单_第3张图片

你可能感兴趣的:(前端入门,html5)