HTML5表单的请求学习与整体运用

最新推荐文章于 2023-11-20 08:12:16 发布

Ann1223

最新推荐文章于 2023-11-20 08:12:16 发布

阅读量267

点赞数

文章标签： html5 html

本文链接：https://blog.csdn.net/Ann1223/article/details/107622838

版权

Web学习Day7——HTML5（5）

HTTP：应用层的协议
响应的状态码http status200 404 500
请求方式method：get post
GET：显示的大小有限制（小）浏览器的地址栏超链接表单
Post：隐士的大小有限制（大）表单
一次请求
一次响应

Enctype:
Text/plain application/x-www-form-urlencoded（默认）
Multipart/from-data (大数据)——post

请求报文：
请求行：mothod url http/1.1
请求头：客户端和服务端约定的系统属性，自定义的属性，令牌
请求主体：

GET的请求报文 请求数据在请求行中
GET http：//www.baidu.com/baidu/index.html?wd=12&k1=vi HTTP/1.1\r\n
Host：http://ww.baidu.cn\r\n
User-agent:safri…\r\n
Connection:keep-alive\r\n
\r\n(get的请求请求行和请求体中多一个\r\n 请求体是空的)
Null

POST请求报文：
POST: http：//www.baidu.com/baidu/index.html HTTP/1.1\r\n
Host：http://ww.baidu.cn\r\n
User-agent:safri…\r\n
Connection:keep-alive\r\n
Wd=123&k1=v1&k2=v2

响应报文：
相应行：HTTP/1.1 200 ok、\r\n
响应头:
Content-Type:text/html;charset=utf-8\r\n
Content-Length:大小\r\n
…\r\n
\r\n
响应体:text(源代码）

Input是单标签
Placeholder：一般用于提示

制作表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单作业</title>
</head>
 
<body>
    <form>
        <table border="1"  width=40% cellpadding=10 cellspacing="0" >
            <caption style="color: firebrick; font-size: larger;">验证表单之文本输入框</caption>
            <tbody align="left">
            <tr>
                <th>用户名：</th>
                <td>
                    <input type="text">
                </td>
            </tr>
            <tr>
                <th>姓名：</th>
                <td>
                    <label>
                       <input type="radio" name="gender" value="male"/>男
                    </label> 
                    &nbsp;&nbsp;&nbsp;
                       <input id="female" type="radio" name="gender" value="female"/>
                    <label for="female">女</label>
                </td>
            </tr>
            <tr>
                <th>出生年月：</th>
                <td>
                    <input type="date">
                </td>
            </tr>
            <tr>
                <th>身份证号：</th>
                <td>
                    <input onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">
                </td>
            </tr>
            <tr>
                <th>邮箱：</th>
                <td>
                    <input type="text" placeholder="@">
                </td>
            </tr>
            <tr>
                <th>学历：</th>
                <td>
                    <select name="education background" >
                        <option value="" disabled selected hidden>--请选择--</option>
                        <option>小学</option>
                        <option>中学</option>
                        <option>高中</option>
                        <option>专科</option>
                        <option>本科</option>
                        <option>硕士</option>
                        <option>博士</option>
                        <option>博士后</option>
                    </select>
                </td>
            </tr>
            <tr>
                <th>国家区号：</th>
                <td>
                    <input type="text" name="number" value="86" disabled size="1">-地区区号
                    <input type="text" size="4">-电话号码
                    <input type="text" size="4">-分机号码
                    <input type="text" size="4">
                </td>
            </tr>
            <tr>
                <th>兴趣爱好：</th>
                <td>
                    <input id="ping pong" type="checkbox" name="hobbits" value="ping pong">
                    <label for="ping pong">乒乓球</label>
                    <input id="football" type="checkbox" name="hobbits" value="football">
                    <label for="football">足球</label>
                    <input id="surf the Internet" type="checkbox" name="hobbits" value="surf the Internet">
                    <label for="surf the Internet">上网</label>
                    <input id="travel" type="checkbox" name="hobbits" value="travel">
                    <label for="travel">旅游</label>
                    <input id="shopping" type="checkbox" name="hobbits" value="shopping">
                    <label for="shopping">购物</label>
                </td>
            </tr>
            <tr>
                <th>手机号码：</th>
                <td>
                    <input onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">
                </td>
            </tr>

            <tr>
                <th>常住地：</th>
                <td>
                    <select name="province" >
                        <option value="" disabled selected hidden>--请选择--</option>
                        <option>北京省</option>
                        <option>福建省</option>
                        <option selected>江苏省</option>
                        <option>上海市</option>
                        <option>浙江省</option>
                        <option>江西省</option>
                    </select>
                        <select name="city">
                            <option>昆山市</option>
                            <option>苏州市</option> 
                            <option>无锡市</option>
                        </select>
                </td>
            </tr>

            <tr>
                <th>过去14天途径地：</th>
                <td>
                    <select name="place" multiple>
                        <option value="" disabled selected hidden>--请选择--</option>
                        <option>北京省</option>
                        <option>湖北省</option>
                        <option>大连市</option>
                        <option>江苏省</option>
                        <option>新疆维吾尔自治区</option>
                    </select>
                    (按住ctrl键多选)
                </td>
            </tr>

            <tr>
                <th>个人描述：</th>
                <td>
                    <textarea placeholder="请输入你的描述"></textarea>
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="submit" value="提交">
                    <input type="reset" value="重置">
                </td>
            </tr>

        </tbody>
        </table>
    </form>

</body>

</html>

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