一周学会HTML----Day03常用标签(下)

最新推荐文章于 2024-10-06 15:57:22 发布

原创最新推荐文章于 2024-10-06 15:57:22 发布 · 423 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了HTML表单的各种元素及其属性，包括文本框、密码框、单选和复选框等，并解释了如何使用这些元素收集用户信息。

form 标签表单（重要）

表单用途
用于收集用户信息，提交给服务器

基本使用

(action,method,enctype)
要提交的表单必须放到form里
input select textarea 这三种标签可以提交数据

action：提交地址，应该是服务器的一个页面
method：提交方法：get/post
        了解input delete link unlink
enctype: 文件上传的时候用 multipart/form-data(了解)
__get和post的区别__
    1) get通过url传参，地址栏可见，大小有限制
    2）post在header传参，地址栏不可见，大小没有限制

<form action='xxx.html method='get' >

属性：

input属性（type\name\value\readonly\disabled)

name 提交的时候必须要有name
readonly :只读，不能修改
value:默认值
disabled：禁止使用，也不能修改，背景变灰

单行文本框(maxlength\placehoder\size)

 type='text'
 maxlength:最大输入的字符长度
placeholder:占位符
size 输入框宽度（跟字数无关）

提交/重置按钮

提交type='submit' 把数据提交到服务器,本身有name，也可以提交

重置type='reset'  清空用户输入，恢复初始状态
value 设置value可以修改按钮上的文字

密码框(同单行文本框)
type='password'

单选框(checked)

多选一的时候各个单选框的name一样
必须要有value
checked 默认选中

复选框（checkbox）

 type='checkbox'
 多个复选框的时候，每一个复选框的name = 'xxx[]'
必须给value的赋值
checked默认选中，可以多个

文件上传

type='file'
 必须使用post方式上传

隐藏按钮(hidden)
用来上传数据，但不可见，后端根据数据做相应的业务处理
必须给name和value赋值（重要）
button(了解)
type='button' 和js配合使用才有用

下拉框 select(size,name,multiple)
size指定展示的项数，以列表框展示
multiple 多选
option(selected,value)
selected 默认选中,要设置value的值

多行文本输入框textarea(cols,rows)
双标签，但中间不要有任何内容，否则会在输入框中显示
cols 列数
rows 行数
label
双标签，可以提高用户体验,可以扩大选择区域
内容

<form action='http://www.baidu.com' method='get'>

    <input type='text' size='40' maxlength='4' readonly disabled name='text' value='this is a text' placeholder='text'/>
    
    <input type='radio' name='danxuan' value='dx' checked >
    
    <input type='password' minlength='2' maxlength='8' size='40' name='pwd' value='0000'/>
    
    <input type='submit'/>
    
    <input type='reset'/>
    
    <input type='checkbox' name='arr[]'value='0'/>
    
    <input type='file'/>
    
    <input type='button' value='按钮'/>
    
    <input type='hidden' name='hidden' value='hid'/>
    
    <!-- 相当于submit -->
    <button>按钮</button>
    
    <select name='xl' multiple size='10'>
        <option selected value='1'>1</option>
        <option value='2'>2</option>
        <option value='3'>3</option>
    </select>
    
    <textarea cols='10' rows='20'>
</form>

头元素标签

1)链接外部的css样式
<link rel="stylesheet" href="css/global.css">
2)堆积网站关键字，用来提高网站的排名
<meta name="keywords" content=“关键字”>
3)网站的描述信息
<meta name="description" content="描述信息">
4)页面自动跳转
<meta http-equiv="refresh" content="事件间隔";url="跳转地址">