Web基本标签

沐芊屿

已于 2022-06-24 13:18:08 修改

阅读量315

点赞数 2

文章标签：大数据前端

于 2022-06-24 13:16:19 首次发布

本文链接：https://blog.csdn.net/m0_69435261/article/details/125443245

版权

1.input标签

语法格式：

<input type="元素类型" name="元素名称" value="元素值" id="客户唯一标识符'>

type属性的取值表格：

type="text"	文本框
type="password"	密码框
type="radio"	单选按钮
type="chexbox"	多选按钮
type="submit"	提交按钮
type="reset"	复位按钮，重置按钮
type="button"	普通按钮
type="image"	图像按钮
type="file"	上传文件
type="email"	邮箱
type="date"	日期
type="range"	进度条
type="datetime-local"	日期+时间

input的属性表格：

checked	默认选择
readonly	字段只读不能修改
disabled	表示 input 禁用不可点击
autofocus	默认光标的位置
required	input 不能为空白提交

2 .select标签

select 标签表示下拉选择框

会和 option 标签连用 option 表示的下拉选择框中的选项

属性:

value ---- 选项的值

name ---- 下拉框的名称

selected ----- 默认被选中的选项

multiple ----- 以列表的形式显示

3.textarea标签

语法结构：

cols ---- 多少列表示的是文本域的宽度

rows --- 多少行表示的文本域的高度

4.标签综合练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form表单练习</title>
</head>
<body>
    <div align="center">
<h1>用户注册</h1>
    </div >
    <form align="center">
        用户名:<input type="text" name="username" method="post"><br>
        密&nbsp;&nbsp;&nbsp;&nbsp;码:<input type="text" name="possword" autofocus required ><br>
        请选择您的性别:<input type="radio" value="男" name="gender" checked>男
        <input type="radio" value="女" name="gender" checked>女<br>
       <p> 请选择你的爱好:<input type="checkbox" value="足球" name="dance" >足球
        <input type="checkbox" value="篮球" name="dance" >篮球
        <input type="checkbox" value="lol" name="dance" >lol
        <input type="checkbox" value="韩剧" name="dance" >韩剧
        <input type="checkbox" value="王者荣耀" name="dance" >王者荣耀<br>
        邮箱:<input type="email"><br>
        用户头像:<input type="file" placeholder="请输入邮箱"><br>
        你的家庭住址:<select >
            <option value="北京">北京</option>
            <option selected="selected">重庆</option>
            <option>上海</option>
            <option>西安</option>
        </select><br>
        您的收货地址是:<select multiple="multipie">
        <option>永川</option>
        <option selected="selected">江北</option>
        <option>万州</option>
        </select><br>
        请留下您的收获地址:<textarea cols="20" rows="5">您的建议或意见</textarea><br>
        请您选择您喜欢的颜色:<input type="color">
        注册的时间:<input type="date"><br>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
        </p><br>
    </form>
</body>
</html>