下拉框,文本域和文件域

2023-11-19

<!-- 下拉框,列表框   -->
<!-- selected默认选择   -->
<p>国家:
    <select name="列表名称" >
        <option value="China">中国</option>
        <option value="US">美国</option>
        <option value="eth"selected>瑞士</option>
        <option value="yindu">印度</option>
    </select>
</p>

文本域

<!-- 文本域
cols:可以显示有多少列
rows:可以显示有多少行
  -->
<p>反馈:
    <textarea name="textarea" id="" cols="50" rows="10">文本内容</textarea>


</p>

文件域

<!--文件域
<input type="file" name="files">

    -->
<p>
    <input type="file" name="files">
    <input type="button" value="上传" name="upload">
</p>

邮件验证

<!-- 邮件验证-->
    <p>邮箱:

        <input type="email" name="email">
        
    </p>

<!--URL-->
<!--URL-->
    <p>URL:

        <input type="url" name="url">

    </p>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆注册</title>
</head>
<body>
<h1>注册</h1>

<!-- 表单form
action:表单提交的位置,可以是网站,也可以是一个请求处理地址
method :post ,get 提交方式;
           get方式提交:我们可以在url中看到我们提交的信息,不安全,高效
           post方式:比较安全,传输大文件,
get是在uml里面显示表单信息 post则是隐藏
value="基哥好帅" 默认初始值
maxlength="8" 最长能写几个字符
size="8"   文本框的长度
<p>名字: <input type="text" name="username" value="基哥好帅" maxlength="8" size="8" readonly></p>
readonly只读
disabled禁用
hidden 隐藏
-->
<form action="1.我的第一个网页.html" method="get">
<!--  文本输入框  input type="text"-->
<p>名字: <input type="text" name="username" value="基哥好帅" maxlength="8" size="8" ></p>
<!--   密码框: input type="password" -->
    <p>密码: <input type="password" name="pwd" value="2001" hidden></p>

<!--  单选框标签 必须要写上value 和相同组名name
 input type="radio"
 value=单选框的值
 name=组
 -->
    <p>性别
    <input type="radio" value="boy" name="sex" disabled/>男
    <input type="radio" value="girl" name="sex"/>女
    </p>


<!-- 多选框   -->
    <p>爱好:
        <input type="checkbox" value="sleep" name="hobby" />睡觉
        <input type="checkbox" value="code" name="hobby" checked/>敲代码
        <input type="checkbox" value="chat" name="hobby" />聊天
        <input type="checkbox" value="game" name="hobby" />打游戏
    </p>



<!--   创建按钮
 input type="button"普通按钮
 input type="image"图片按钮 会提交
 input type="submit"提交按钮
 input type="reset"重置按钮
 -->
<p>按钮:
    <input type="button" name="btn1" value="点击变长">
<!--    <input type="image" src="../resources/image/图像标签.jpg">-->
</p>

<!-- 下拉框,列表框   -->
<!-- selected默认选择   -->
<p>国家:
    <select name="列表名称" >
        <option value="China">中国</option>
        <option value="US">美国</option>
        <option value="eth"selected>瑞士</option>
        <option value="yindu">印度</option>
    </select>
</p>



<!-- 文本域
cols:可以显示有多少列
rows:可以显示有多少行
  -->
<p>反馈:
    <textarea name="textarea" id="" cols="50" rows="10">文本内容</textarea>


</p>

<!--文件域
<input type="file" name="files">

    -->
<p>
    <input type="file" name="files">
    <input type="button" value="上传" name="upload">
</p>






<!-- 邮件验证-->
    <p>邮箱:

        <input type="email" name="email">
        
    </p>

<!--URL-->
    <p>URL:

        <input type="url" name="url">

    </p>
<!--数字
step往上加 往下减 按钮
-->
    <p>商品数量:

        <input type="number" name="number" max="100" min="0" step="1">

    </p>



<!--  滑块  -->
<p>音量
    <input type="range" name="voice" min="0" max="100" step="10"/>
    
</p>


<!-- 搜索框   -->
<p>搜索
    <input type="search" name="search">
    
    
    
</p>

<!--增强鼠标可用性
鼠标点击标签,光标立马进入框里
-->
<p>
    <label for="mark">你点我试试</label>
    <input type="text" id="mark">
</p>









  <p><input type="submit">
<!--   submit提交   -->
    <input type="reset"></p>
<!--  reset 重置  -->


<!--  type:checkbox(多选框)  radio(单选框) hidden(隐藏的)  -->
<!--  value 元素的初始值。type为radio时必须指定一个值  -->
<!--  size 指定表单元素的初始宽度。当type为text或password时,表单元素的大小一字符为单位。对于其他类型,宽度以像素为单位  -->
<!--  checked type为radio或checkbox时,指定按钮是否被选中  -->
<!--  maxlength type为test或password时,输入的最大字符数-->
</form>



</body>
</html>

表单如何实现验证?

<!--  自定义正则表达式验证

 -->
    <p>自定义邮箱
        <input type="text" name="diymail" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/或\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" >


    </p>

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

下拉框,文本域和文件域 的相关文章