Java基础入门day33

作者：花生_TL007 | 2024-04-23 23:58:05

踩

Java基础入门day33

day33

html

表单

表单实现与用户的可交互操作

表单可以用来收集用户输入信息

form表单标签，可以在页面上添加一个表单元素，表单本身没有边界

属性action，目标地址，表单提交后要跳转的对应的url地址

属性method：

get：默认提交方式，会将表单中的所有元素追加到地址栏，包括密码，特点不安全，但是快速

post：相对安全的一种提交方式，不会将表单的所有内容追加到地址栏。安全、没有长度限制，相对get速度较慢

表单元素：

input

text：文本框

password：密码框

radio单选框，想要实现单选功能，name相同，checked=“checked”可以实现默认选中

checkbox：复选框，表示同一个属性，name也应该相同，checked=“checked”可以实现默认选中

submit：提交按钮，可以将表单进行提交

reset：重置按钮，可以让表单中的所有元素恢复到初始状态

button：按钮，普通按钮，不具备提交和重置功能，一般需要手动添加事件

select：下拉框，可以实现选择不同值的场景，用selected可以实现默认选中，multiple可以实现多选功能，size可以实现让用户一次性看多少个条目

option和select搭配，实现列出条目选项

textarea：文本域，可以实现对于很多文字的效果展示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="html02.html" method="post">
        username: <input type="text" name="username" value=""><p />   
        password: <input type="password" name="password" value=""><p />   
        gender：  <input type="radio" value="male" name="gender">boy <input type="radio" value="female" name="gender" checked="checked">girl<p /> 
        hobby:
        <input type="checkbox" value="singing" name="hobby" checked="checked">singing
        <input type="checkbox" value="dancing" name="hobby" checked="checked">dancing
        <input type="checkbox" value="rap" name="hobby">rap
        <input type="checkbox" value="basketball" name="hobby">basketball<p />
        birth: <input type="date" name="birth"><p />
        time: <input type="time" name="time"><p />
        birthday: <input type="text" name="year" value="" size="4" maxlength="4">年
        <select name="month">
            <option value="0">请选择</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6" selected="selected">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
        </select> 月
        <input type="text" name="day" value="" size="4" maxlength="4"><p />
        protocal: <textarea name="protocal" cols="30" rows="10">this is a protocal, please input here， this is a protocal, please input here， this is a protocal, please input here this is a protocal, please input here， this is a protocal, please input herethis is a protocal, please input here</textarea><p />
        <input type="submit" value="登录">
        <input type="reset" value="重置"><p />

    </form>
</body>
</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/476627