HTML笔记----5

芝奥小婷

已于 2024-08-25 21:23:18 修改

阅读量780

点赞数 13

文章标签：笔记

于 2024-07-20 12:30:06 首次发布

本文链接：https://blog.csdn.net/weixin_70903041/article/details/140567757

版权

表单标签

1.HTML表单用于收集用户填写的信息；

2.HTML表单会将收集到的信息发送到Web服务器；

3.HTML表单通常包含输入字段、单选框、复选框、下拉列表等元素。

常用标签

<form>元素用来创建表单，

action属性定义表单里的数据提交到的目标URL（路径）；

method属性定义了提交数据的HTTP方法，如：get/post

<fieldset>: 表单的整个边框;

<legend>: 边框上如果想要使用表单标题，可以使用;

<label>：用于设置文字标签,扩大点击域。

<input>: 作为输入框，可以根据type属性的不同值，来定义不同的输入类型，比如

text：文本框，该值为默认值，可以不写

password：密码框，特点是使用*或者.来替换真实的密码

radio: 单选框，name的值需要相同，才能算作一组，具有单选效果。

checkbox: 复选框，name的值必须相同，才能算作一组，具有多选效果。

file: 文件上传。

hidden: 隐藏域，该类型可以用于隐藏一些不需要展示或者修改的信息。

submit: 提交类型，提交整个表单里输入的所有数据，提交到服务器。

 <form action="abc123.do" method="post" >
    <fieldset>
        <legend>表单演示</legend>
        <label for="username">姓名：</label>
        <input type="text" id="username" name="myname" > <br>
        <label for="mypasswd">密码：</label>
        <input type="password" id="mypasswd" name="mypasswd">
        <hr>
        <label for="">性别</label>
        <input type="radio" name="gender" id="male" value="m" checked> <label for="male">男</label>
        <input type="radio" name="gender" id="female" value="f"> <label for="female">女</label>

         <hr>
         <label for="">爱好</label>
         <input type="checkbox" id="book" name="hobby" value="book"><label for="book">读书</label>
         <input type="checkbox" id="word" name="hobby" value="word"><label for="word">写字</label>
         <input type="checkbox" id="movie" name="hobby" value="movie"><label for="movie">电影</label>
         <input type="checkbox" id="music" name="hobby" value="music"><label for="music">音乐</label>
            
    </fieldset>

<selcet>: 下拉菜单元素

name属性：用于定义提交到服务器的name的具体值

<option>子元素：用于定义下拉菜单的选项

<option>元素里的属性：

value属性：用于定义提交到服务器的选项的具体值。

selected属性：默认选中

<textarea>: 用于创建文本域，可以设置行数与列数。

    <label for="">地址</label>
    <select name="address" id="">
    <option value="cc">长春</option>
    <option value="hz">杭州</option>
    <option value="bj" selected>北京</option>
    <option value="tj">天津</option>
    </select>

    <hr>
    <label for="">文件上传</label>
    <input type="file" name="myfile" >

     <hr>
     <label for="id1">自我介绍</label>
     <textarea name="myself" id="id1" rows="5" cols="50">

     </textarea>

     <hr>
     <label for="">隐藏信息</label>
     <input type="hidden" value="1001">
     <hr>
     <input type="submit" value="提交">

HTML区块

元素分类

大多数HTML元素被定义为块级元素或内联元素（行内元素）。

●块级元素在浏览器上显示的时候，通常会以新行开始；

例如：<h1>、<p>、<ul>、<ol>、<table>、<form>等

●内联元素在显示时通常不会以新行开始。

例如：<b>、<td>、<a>、<img>等，只要不是自己占一行的，都是内联元素。