html表单

jinooy

已于 2024-09-09 11:03:41 修改

阅读量429

点赞数 5

文章标签： html 前端 javascript

于 2024-09-08 23:05:28 首次发布

本文链接：https://blog.csdn.net/jinooy/article/details/142033156

版权

input 标签 type 属性不同，功能不同<input type=" ">

type属性值	说明
text	文本框，用于输入单行文本
password	密码框
radio	单选框
checkbox	多选框
file	上传文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表单的提交</title>
</head>
<body>
  <form action="result.html">
    <p>
      名称：<input name= "user" type="text">
    </p>
    <p>
      密码：<input name= "pwd" type="password" required>

    <p>
      性别：
      <input type="radio" name="gender" value="1">男
      <input type="radio" name="gender" value="2"checked>女
    </p>
    <p>
    爱好：
    <input type="checkbox" name="hobby" value="music">音乐
    <input type="checkbox" name="hobby" value="run">跑步
    <input type="checkbox" name="hobby" value="movie">电影
    </p>
    <p>
        班级
   <select >
    <option >一班</option>
    <option  selected>二班</option>
    <option >一三班</option>
   </select>
   <p>  
     <p>
       <input type="file" >
     </p>
    </p>
    签名
    <textarea name="sign" >输入你的签名</textarea>
   </p>


    </p>
      <input type="submit" value="注册">
      <input type="reset" value="重置">
    </p>


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

占位文本

作用：提示信息

下拉菜单

标签：select 嵌套 option ，select 是下拉菜单整体，option是下拉菜单的每一项

<select>

<option> 内容1<option>

<option> 内容2<option>

<option> 最后的内容</option>

</select>

文本域

作用：多行输入文本的表单控件

标签：textarea,双标签

<textarea>默认提示文字</textarea>

eg:

签名

<textarea name="sign" >输入你的签名</textarea>

label标签

作用：网页中，某个标签的说明文本

经验：用label标签绑定文字和表单控件的关系，增大表单的点击范围

写法一：

label 标签只包裹内容，不包裹表单控件
设置label标签的for属性值和表单控件的ID值相同

写法二：

使用label标签包裹文字和表单控件，不需要属性

button 按钮

type 属性值	说明
submit	提交按钮，点击可以提交数据到后台（默认功能）
reset	重置按钮，点击后将表格控件恢复到默认值
button	普通按钮，默认没有功能，一般配合JavaScript使用

注意：要想重置成功要加form标签

<body>
    <!-- form 表单区域 -->
     <!-- action 发送数据的地址 -->
    <form action="">
    用户名：<input type="text"> <br><br>
    密码： <input type="password"><br><br>
    <!-- 如果省略type属性，功能也是提交 -->
    <button type="submit">提交 </button>
    <button type="reset">重置</button>
    <button type="button">普通按钮</button>
</form>
</body>

无语义的布局标签

作用：布局网页（划分网页区域，排放内容）

div：独占一行

span:不换行

<div>div标签，独占一行</div>

字符实体

作用：在网页显示预留字符

显示结果	描述	实体名称
	空格
<	小于号	<
>	大于号	>

、

综合案例

无序列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  
<ul>

<li>
    <img src="./1.png" alt="">
    <br><br>
    <h2>大猫猫</h2>
</li>
<li>
    <img src="./1.png" alt="">
    <br><br>
    <h2>大猫猫</h2>
</li>
<li>
    <img src="./1.png" alt="">
    <br><br>
    <h2>大猫猫</h2>
</li>

</ul>

</body>
</html>

注册信息实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form >
    <h1>注册信息</h1>
 
    <h2>个人信息</h2>
        <label >姓名：</label>
        <input type="text" placeholder="请输入你的真实姓名" >
    <br><br>
        <label >密码：</label>
        <input type="password" placeholder="请输入你的密码" >
    <br><br>
    <label >确认密码</label>
    <input type="text" placeholder="请输入你的确认密码">
    <br><br>
    <label >性别：
        <input type="radio" checked>女
        <input type="radio" >男
    </label>
    <br><br>
    <label >居住城市</label>
        <select >
            <option >北京</option>
            <option >广州</option>
            <option >云南</option>
            <option >大连</option>
        </select>
        <br><br>
 
    <h2>教育经历</h2> 
 
        <label >最高学历</label>
        <select >
            <option >小学</option>
            <option >中学</option>
            <option >高中</option>
            <option >大学</option>
            <option >硕士</option>
            <option >博士</option>
        </select>
        <label >学校名称：</label>
        <input type="text">
        <br><br>
        <label >所学专业：</label>
        <input type="text">
        <br><br>
        <label >在校时间</label>
        <select >
            <option >2019</option>
            <option >2020</option>
            <option >2021</option>
        </select>
        --
        <select >
            <option >2020</option>
            <option >2021</option>
            <option >2022</option>
        </select>
        <br><br>
        
    <h2>工作经历</h2>     
    <label >公司名称：</label>
    <input type="text">
    <br><br>
    <label >工作描述：</label>
        <input type="text">
        <br><br>
    <input type="checkbox">已经阅读并同意以下协议
    <ul>
        <li><a href="./img.html">《用户服务协议》</a></li>
        <li><a href="./img.html">《隐私协议》</a></li>
    </ul>
    <br><br>
    <button type="button">免费注册</button>
    <button type="reset">重新填写</button>
 
</form>
 
 
  
</body>
</html>