一个html表单页面

最新推荐文章于 2024-04-24 14:37:39 发布

我是养乐多

最新推荐文章于 2024-04-24 14:37:39 发布

阅读量4.4k

点赞数 6

分类专栏：前端学习知识点 JavaWeb 文章标签： html

本文链接：https://blog.csdn.net/Hsiao99/article/details/105584104

版权

JavaWeb 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

前端学习知识点

3 篇文章 0 订阅

订阅专栏

1.html表单的提交：

<form action="" method= "">  </form>

action属性设置提交的服务器地址
method属性设置提交方式GET（默认）或POST

2.表单提交数据没有发送给服务器的三种情况：
1.表单项没有name属性
2.单选，复选都需要添加value属性，以便发送给服务器
3.表单项不在提交的form标签中

3.GET请求的特点：
1.浏览器地址栏中的地址是：action属性[+?+请求参数]
2. 请求参数的格式：name=value&name=value
3.不安全
4.若表单值包含ASCII或超过100个字符，必须使用 method=“post”

4.POST请求的特点：
1…浏览器地址栏中只有action属性，即服务器地址
2.相对于GET请求更安全（因为地址栏没有请求参数）
3.理论上没有数据长度的限制

一个简单的html表单页面
首先完成html表单雏形：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body>
<!--表单是html界面收集用户信息，并最后发送给服务器-->
<!--创建一个收集个人信息注册的表单页面，包含用户名，密码，确认密码-->

<form><!--form标签就是表单-->
    用户名称: <input type="test" value="默认值"><br/>  <!--test是文本输入框-->
    用户密码: <input type="password"> <br/>  <!--password是密码输入框，自动掩盖-->
    确认密码: <input type="password"> <br/>
    性别:<input type="radio" name="sex"> 男 <input type="radio" name="sex"> 女 <br/> <!--radio是单选框,通过同name分组实现单选-->
    语言偏好:<input type="checkbox" > java  <input type="checkbox" > python <input type="checkbox" > c++  <br/><!--checkbox代表多选框-->
    国籍 <select>
        <option selected="selected">中国</option> <option>美国</option> <option>瑞士</option>  <!--select是下拉列表框，option是选项，默认selected-->
    </select> <br/>
    自我评价:<textarea rows="10" cols="20">请输入自我评价</textarea> <br/>  <!--textarea多行文本输入框,开始结束标签中是默认值-->

    <input type="reset"> <!--重置窗口-->     <input type="submit" > <!--提交按钮-->    <input type="button" value="普通按钮"> <!--普通按钮-->
    <input type="file" value="选择文件"> <!--选择文件按钮-->  <input type="hidden"> <!--隐藏域，需要发送给服务器且屏蔽用户-->
</form>

</body>
</html>

可以进一步优化是的表单格式化（方法是把表单form放在表格table中）：
在form标签内加上action属性，指定表单提交地址

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body>
  <!--表单是html界面收集用户信息，并最后发送给服务器-->
  <!--创建一个收集个人信息注册的表单页面，包含用户名，密码，确认密码-->

<form action="http://localhost:8888" method="get"><!--form标签就是表单-->
    <h2 align="center">用户注册</h2>  <!--表单标题-->
    <table align="center"><!--将表单放在表格里美化格式-->
        <tr>
        <td>用户名称:</td>
        <td> <input type="test" name="username" value="默认值"> </td>
        </tr>

        <tr>
            <td>用户密码:</td>
            <td>  <input type="password" name="password"> </td>
        </tr>

        <tr>
            <td>确认密码:</td>
            <td>  <input type="password"> </td>
        </tr>

        <tr>
            <td>性别:</td>
            <td> <input type="radio" name="sex" value="man"> 男 <input type="radio" name="sex" value="girl"> 女  </td>
        </tr>

        <tr>
            <td>语言偏好:</td>
            <td> <input type="checkbox" > java <input type="checkbox" > python <input type="checkbox" > c++  </td>
        </tr>

        <tr>
            <td> 国籍</td>

            <td> <select>
                <option selected="selected">中国</option> <option>美国</option> <option>瑞士</option>  <!--select是下拉列表框，option是选项，默认selected-->
            </select>   </td>
        </tr>

        <tr>
            <td> 自我评价:</td>
            <td> <textarea rows="10" cols="20">请输入自我评价</textarea> </td>
        </tr>

        <tr>
            <td> <input type="reset"> <!--重置窗口-->    </td>
            <td> <input type="submit"> <!--提交按钮-->   </td>
            <td> <input type="file" value="选择文件"> <!--选择文件按钮--> </td>
        </tr>


    </table>

</form>

</body>
</html>

在这里插入图片描述

我是养乐多

关注

6
点赞
踩
45

收藏

觉得还不错? 一键收藏
0
评论
一个html表单页面

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>标题</title></head><body>  <!...
复制链接

扫一扫