Html表单

最新推荐文章于 2024-09-03 20:17:53 发布

zhangh040629

最新推荐文章于 2024-09-03 20:17:53 发布

阅读量237

点赞数 1

文章标签： java 前端 spring

本文链接：https://blog.csdn.net/zhangh040629/article/details/141856642

版权

表单

什么是表单？

表单就是用来收集信息的,比如我们QQ的登录框，以及网站的登录框。

知乎

表单可以将用户填写的信息提交的服务器。

表单标签

<form method="表示提交表单的方法(get或者post)" action="提交表单到服务器中的地址(向何处发送表达数据)">
    <input />
        input文本框:
            type属性 定义输入框的类型
                    文本框 type="text", 密码框 type="password"
                    提交框 type="submit" 效果和<button>提交按钮</button>一样
                    按钮框 type="button" 单纯的按钮
                    重置框 type="reset" 清空的效果
            placeholder属性 描述输入字段预期值的简短的提示信息。
            name属性 必须设置，否则在提交表单时，用户在其中输入的数据不会被发送到浏览器
            value属性 改变按钮显示的字
</form>

一个表单中可以包含多个表单项。

<body>
    <!-- 
        action是提交到指定的服务器的地址
            如果表单元素不加name，则数据提交不过去
        method默认是get请求，会在地址栏中看到提交的数据，改为post咋看不到
     -->
    <form action="https://www.jd.com/" method="post">
        <!-- 可以用div标签或者br标签进行换行 -->
        用户信息：<input type="text" placeholder="请输入用户名" name="username"/>
        <br />
        密码：<input type="password" placeholder="请输入密码" name="password"/>
        <br />
        <!--input标签与button提交是一样的 ，提交到action指定的地址 -->
        <!-- <input type="submit" value="登录"/> -->
        <button type="submit">登录</button>
        <!-- 重置 -->
        <!-- <input type="reset" value="重置"/>  -->
        <button type="reset">重置</button>

        <!-- 普通的按钮 <input type="button" value="aaa"/>相对于 <button>aaa</button-->
        <!-- <input type="button" value="aaa"/> -->

    </form>
</body>

拓展知识

GET和POST请求什么区别？

get和post本质没有什么区别，都是TCP/IP协议请求的一种形式，只不过因为浏览器以及各大厂商的规定，限制了每一种请求有自己特定的用途。常说的get和post请求的区别实际上是参数放到请求头和请求体里面用法的区别。

GET在浏览器回退不会再次请求，POST会再次提交请求

GET请求会被浏览器主动缓存，POST不会，要手动设置

GET请求参数会被完整保留在浏览器历史记录里，POST中的参数不会

GET请求在URL中传送的参数是有长度限制的，而POST没有限制

GET参数通过URL传递，POST放在Request body中

GET参数暴露在地址栏不安全，POST放在报文内部更安全

GET一般用于查询信息，POST一般用于提交某种信息进行某些修改操作

GET产生一个TCP数据包；POST产生两个TCP数据包

lable
lable标签用来为表单项定义描述文字。

lable标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。

语法：

注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

<form>
	你对什么运动感兴趣：<br />
	<label for="jog">慢跑</label>
	<input type="checkbox" name="jog" id="jog" /><br />
	<label for="climb">登山</label>
	<input type="checkbox" name="climb" id="climb" /><br />
	<label for="basketball">篮球</label>
	<input type="checkbox" name="basketball" id="basketball" />
</form>
常见的表单元素
<body>
    <!-- 
        input标签
            type属性： 
                text--文本输入框
                password--密码输入框
                radio--单选按钮
                checkbox--多选按钮
                submit--提交按钮
                reset--重置按钮
            required 必填属性
        textarea 文本域，实际效果和文本框类似，只是可以输入多行数据。
            cols属性 文本区域内可见的宽度
            rows属性 文本区域内可见的行数 
            required属性 表示必填
            maxlength属性 限制最大字符
        select 用于创建一个下拉列表
            option 表示下拉列表中的列表项
     -->
    <form action="https://www.jd.com/">
        <!-- 文本输入框-type="text" -->
        <label for="name">用户名:</label>
        <input type="text" id="name" name="name" required>
        <br>

        <!-- 密码输入框-type="password" -->
        <label for="password">密码:</label>
        <input type="password" id="password" name="password" required>
        <br>
    
        <!-- 单选按钮-type="radio" -->
        <label>性别:</label>
        <input type="radio" id="boy" name="sex" value="boy" checked>
        <label for="boy">男</label>
        <input type="radio" id="girl" name="sex" value="girl">
        <label for="girl">女</label>
        <br>
    
        <!-- 复选框-type="checkbox" -->
        <input type="checkbox" id="basketball" name="basketball" value="basketball" checked>
        <label for="basketball">篮球</label>
        <input type="checkbox" id="read" name="read" value="read">
        <label for="read">阅读</label>
        <input type="checkbox" id="sing" name="sing" value="sing">
        <label for="sing">唱歌</label>
        <br>
    
        <!-- 文本域 -->
        <label for="opinion">用户意见:</label>
        <textarea id="opinion" name="opinion" rows="2" cols="30" maxlength="20"></textarea>
        <br>

        <!-- 下拉列表 -->
        <label for="country">国家:</label>
        <select id="country" name="country">
            <option value="cn">CN</option>
            <option value="usa">USA</option>
            <option value="uk">UK</option>
        </select>
        <br>
    
        <!-- 提交按钮 -->
        <input type="submit" value="提交">
        <!-- 重置按钮 -->
        <input type="reset" value="重置">
    </form>
</body>