html之列表和表单元素

timg.jpg

列表

无序列表ul

• 无序列表：用来表示一个列表的语义，并且每一个项目和项目之间是不分先后的
• ul: unordered list 无序列表
• li: list item 列表项
• 无序列表是一组标签
• li 标签是容器级标签，可以嵌套任何标签

  <h3> 中国的城市</h3>
    <!-- 无序列表 -->
    <ul>
        <li>北京</li>
        <li>上海</li>
        <li>深圳</li>
        <li>广州</li>
        <li>郑州</li>
    </ul>


ul的作用，并不是给文字增加小圆点的，而是增加无序列表的“语义”的

无序列表.jpeg

有序列表

• 有序列表

 <ol>
        <li>我爱你中国</li>
        <li>月亮</li>
        <li>中国风</li>
        <li>歌曲</li>
        <li>问月</li>
    </ol>

无序列表.jpg

自定义列表

• 定义列表也是一组标签
• dl 表示definition list 定义列表
• dt表示definition title 定义标题
• dd表示definition description 定义表述词儿,就是对标题的描述 dt
  • 对dt的解释描述，可以是多个dd

<dl>
        <dt>北京</dt>
        <dd>国家首都，政治文化中心</dd>
        <dt>上海</dt>
        <dd>经济发展中心</dd>
        <dt>深圳</dt>
        <dd>经济特区</dd>
        <dt>郑州</dt>
        <dd>中原经济</dd>
    </dl>

• 多个dd对dt标题的描述

<h4>自定义列表</h4>
    <dl>
        <dt>关于掠食龙</dt>
        <dd>了解掠食龙</dd>
        <dd>加入掠食龙</dd>
        <dd>联系我们</dd>
    </dl>

比较常用的就是ul和dl列表

form表单域

• 常用的属性

form是一个表单的区域，在网页上是不可见的，在网页上显示的事 表单元素
action：对应的值是URL，提交表单到何处
method：post和get，设置表单一何种方式提交到服务器
1.get:一般是获取数据，保密性较差
2.post:一般用于提交数据，作为请求体的部分提交到服务器
name：表单的名称
target：对应的值_blank,_self,_parent,_top，在何处打开action URL
enctype：application/x-www-form-urlencoded,text/plain,multipart/form-data ,在发送表单数据之前指定的编码方式

表单控件

• type对应的类型，决定这个控件是什么
• 输入框text

name是控件的名称，在提交表单到服务器的时候会用到
placeholder 暂未属性

<input type="text" name="username" maxlength="30" placeholder="请输入姓名">

• password密码框

<input type="password" name="pwd" placeholder="请输入密码">

• email 邮箱

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

• file文件域

multiple 属性可以选择多个文件

<input type="file" name="file">

• radio单选框

name属性是控件的名称，同时也是保持 单选框的唯一性
checked默认选中的状态

<input type="radio" name="sex" value="man"> 男 
<input type="radio" name="sex" value="woman"> 女
<input type="radio" name="sex" value="bm" checked> 保密

• checkbox多选框

<input type="checkbox" name="checkbox" value="read"> 读书 
<input type="checkbox" name="checkbox" value="xeuxi"> 学习
<input type="checkbox" name="checkbox" value="ios"> 代码

• select下拉列表

selected默认中的
multiple属性多选
size属性 是在界面上显示几个

 <select name="select" id=""  >
                        <!-- selected是默认选择状态 -->
                        <option value="qing" selected>请选择</option>
                        <option value="beijing" >北京</option>
                        <option value="shanghai">上海</option>
                        <option value="henan">河南</option>
   </select>

也可以是分组 optgroup

 <!--  下拉列表 分组 多项选择 -->
    <select name="" id="">
        <optgroup label="华北">
            <option value="bejing">北京</option>
            <option value="bejing">河北</option>
            <option value="bejing">东北</option>
        </optgroup>
        <optgroup label="华东">
            <option value="shanghai">上海</option>
            <option value="bejing">南京</option>
            <option value="bejing">浙江</option>
        </optgroup>
    </select>

• image 图像域按钮

  <!-- 图像域 -->
  <input type="image" name="img_button" src="../images/H5/10.jpeg">

• hidden 隐藏域

<!-- 隐藏域  在提交到服务器的时候 这个消息就会传给服务器-->
<input type="hidden" name="hidden" value="这是注册信息">

• textarea 文本域

 <textarea name="textarea" id="" cols="30" rows="10" placeholder="请输入"></textarea>

label标签和input控件结合使用，在点击文字的时候，称为第一响应者
for属性 和 input的id绑定

  <label for="123">车大家:<input id="123" type="text" value="测试好几十"></label>

image.png

 <h2 align="center">注册信息</h2>
    <hr color="#336699">
    <form action="action.php" method="GET" name="register">
        <table align="center" width="600px" bgcolor ="f2f2f2">
            <tr>
                <td>姓名:</td>
                <td><input type="text" name="username" maxlength="30" placeholder="请输入姓名"></td>
            </tr>
            <tr>
                <td>邮箱:</td>
                <td><input type="email" name="email" value="@163.com"></td>
            </tr>
            <tr>
                <td>密码:</td>
                <td><input type="password" name="pwd" placeholder="请输入密码"></td>
            </tr>
            <tr>
                <td>上传照片:</td>
                <td><input type="file" name="file" multiple></td>
            </tr>
            <tr>
                <td>性别:</td>
                <!-- 在单选框中name属性相同 是互斥的 就是选择唯一性 checked默认选中的状态 -->
                <!-- value在单选框中 被选中的时候，就讲value的值 传到服务器上-->
                <td><input type="radio" name="sex" value="man"> 男 <input type="radio" name="sex" value="woman"> 女 <input type="radio" name="sex" value="bm" checked> 保密</td>
            </tr>
            <tr>
                <!-- 多选 -->
                <td>爱好:</td>
                <!-- 多选中的value值 在被选中的时候，也是提交到 服务器上的，说明你选中了什么 -->
                <!-- name属性值尽量相同 这样在提交到服务时，可以根据name的值 判断 -->
                <td><input type="checkbox" name="checkbox" value="read"> 读书 <input type="checkbox" name="checkbox" value="xeuxi"> 学习 <input type="checkbox" name="checkbox" value="ios"> 代码</td>
            </tr>
            <tr>
                <td>城市:</td>
                <td>
                    <!-- size属性 是在界面上显示几个 -->
                    <!-- multiple属性 在下拉菜单 是多项祖选择 -->
                    <select name="select" id=""  >
                        <!-- selected是默认选择状态 -->
                        <option value="qing" selected>请选择</option>
                        <option value="beijing" >北京</option>
                        <option value="shanghai">上海</option>
                        <option value="henan">河南</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="button" value="button按钮">  <input type="submit" > <input type="reset">
                     <!-- 图像域 -->
                    <input type="image" name="img_button" src="../images/H5/10.jpeg">
                    <!-- 隐藏域  在提交到服务器的时候 这个消息就会传给服务器-->
                    <input type="hidden" name="hidden" value="这是注册信息">
                </td>
            </tr>

        </table>
       
    </form>

在form表单域里面 使用了table 主要是设计到大量的数据处理 方便

WX20190708-112042.png