JavaWeb——HTML表单标签详解(input、label、select、textarea)

Winter_world

发布于 2020-09-25 10:20:53

1.8K0

发布于 2020-09-25 10:20:53

文章被收录于专栏：技术小屋-未分类技术小屋-未分类技术小屋-未分类

1、表单标签概述

表单，是用于采集用户输入数据的，用于和服务器进行交互。比如登录系统，使用的标签是form，可以定义一个范围，范围代表采集用户数据的范围，表单中的数据要想被提交，必须指定name属性。属性：

action：指定提交数据的URL

序号	get	post
1	请求参数会在地址栏中显示，封装在请求行中	请求参数不会在地址栏中显示，会封装在请求体中
2	请求参数长度有限制	请求参数长度无限制
3	不太安全，参数是暴露在url中	较为安全

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
</head>
<body>
<!-- form:用于定义表单，可以定义一个范围，代表了采集用户数据的范围
 -->
<form action="#" method="get">
    用户名: <input name="uesrname"> <br>
    密码：<input name="psd"> <br>
    <input type="submit" value="登录">
</form>

</body>
</html>

2、表单项标签

以下三类表单项标签较为重要：

input标签：可以通过type属性，改变元素展示样式 type属性： text--文本输入框，默认值，placeholder指定输入框的提示信息； password：密码输入框； radio：单选框，注意，要想让多个单选框实现单选效果，name属性值必须一致；一般会给每一个单选框提供 value属性，说明其被选中提交的值； checkbox：复选框，注意事项同radio，此外，其有check属性，可以指定默认值； file：文件选择框； hidden：隐藏域，用于提交信息；按钮： submit，提交按钮，可以提交表单；button，普通按钮；image，可以添加图片，提交表单；取色器：
lable标签：指定输入项的文字描述信息，注意：label的for属性一般会和input 的id属性值对应，对应后，点击label区域，会让input输入框获取焦点。
select：下拉列表子元素：option，指定列表项
textarea：文本域 cols：每一行有多少个字符； rows：默认多少行。

【举例】：使用input、select、textares标签设计输入登录信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签_表单项</title>
</head>
<body>
<!-- form:用于定义表单，可以定义一个范围，代表了采集用户数据的范围
 -->
<form action="#" method="get">
    <label for="uesrname"> 用户名:</label> <input type="text" name="uesrname" placeholder="请输入用户名"> <br>
    密码：<input type="password" name="psd"> <br>
    性别：<input type="radio" name="gender" value="男"> 男
         <input type="radio" name="gender" value="女"> 女 <br>
    爱好：<input type="checkbox" name="hobby" value="eat" checked="checked"> 吃饭
        <input type="checkbox" name="hobby" value="sleep"> 睡觉
        <input type="checkbox" name="hobby" value="drink"> 喝水 <br>
    图片：<input type="file"> <br>
    隐藏域：<input type="hidden" name="id" value="aaa"><br>
    取色器：<input type="color" name="color"><br>
    生日：<input type="date" name="birthday"><br>
    生日：<input type="datetime-local" name="birthday1"><br>
    邮箱：<input type="email" name="email"><br>
    年龄：<input type="number" name="age"> <br>
    省份：<select name="provice">
            <option value=""> 请选则 </option>
            <option value="1"> 北京 </option>
            <option value="2" selected> 上海 </option>
        </select><br>
    自我描述：<textarea cols="20" rows="5" name="description"> </textarea>
    <input type="submit" value="登录">
    <input type="button" value="一般按钮"><br>
    <input type="image" src="./img/2.png" ><br>
</form>

</body>
</html>

3、注册页面案例实现

实现如下的注册页面，主要是form中嵌套table来实现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
</head>
<body>
<!-- form:用于定义表单，可以定义一个范围，代表了采集用户数据的范围
 -->
<form action="#" method="post">
    <table border="1" align="center" width="500">
        <tr>
            <td><label for="username"> 用户名</label></td>
            <td><input type="text" name="uesrname" id="username"></td>
        </tr>
        <tr>
            <td><label for="psd"> 密码</label></td>
            <td><input type="password" name="psd" id="psd"></td>
        </tr>
        <tr>
            <td><label for="email"> email</label></td>
            <td><input type="email" name="email" id="email"></td>
        </tr>
        <tr>
            <td><label for="name"> 姓名</label></td>
            <td><input type="text" name="name" id="name"></td>
        </tr>
        <tr>
            <td><label for="tel"> 手机号</label></td>
            <td><input type="text" name="tel" id="tel"></td>
        </tr>
        <tr>
            <td><label for="gender"> 性别</label></td>
            <td><input type="radio" name="gender" value="male"> 男
                <input type="radio" name="gender" value="female"> 女
            </td>
        </tr>
        <tr>
            <td><label for="date"> 出生日期</label></td>
            <td><input type="date" name="date" id="date"></td>
        </tr>
        <tr>
            <td><label for="code"> 验证码</label></td>
            <td><input type="text" name="code" id="code">
                <img src="../image/2.png">
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center"> <input type="submit" value="注册"></td>
        </tr>
    </table>
</form>

</body>
</html>

【实现效果】：