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>
相关推荐
在努力的前端小白12 分钟前
Spring Boot 敏感词过滤组件实现:基于DFA算法的高效敏感词检测与替换
java·数据库·spring boot·文本处理·敏感词过滤·dfa算法·组件开发
麦兜*1 小时前
Swift + Xcode 开发环境搭建终极指南
开发语言·ios·swiftui·xcode·swift·苹果vision pro·swift5.6.3
萧鼎2 小时前
Python pyzmq 库详解:从入门到高性能分布式通信
开发语言·分布式·python
一叶飘零_sweeeet2 小时前
从繁琐到优雅:Java Lambda 表达式全解析与实战指南
java·lambda·java8
艾伦~耶格尔3 小时前
【集合框架LinkedList底层添加元素机制】
java·开发语言·学习·面试
yujkss3 小时前
Python脚本每天爬取微博热搜-终版
开发语言·python
yzx9910133 小时前
小程序开发APP
开发语言·人工智能·python·yolo
一只叫煤球的猫3 小时前
🕰 一个案例带你彻底搞懂延迟双删
java·后端·面试
最初的↘那颗心3 小时前
Flink Stream API 源码走读 - print()
java·大数据·hadoop·flink·实时计算
啊阿狸不会拉杆4 小时前
《算法导论》第 32 章 - 字符串匹配
开发语言·c++·算法