人亦已歌 发表于 2023-1-30 20:45:06

HTML核心(二)HTML中常用的form表单元素标签


<!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>HTML中常用的form表单元素标签</title>
</head>
<body>
    <b>for表单域</b>
    <form action="https://www.teamczyx.com" method="post" enctype="application/x-www-form-urlencoded">
      文本框<input type="text" placeholder="请输入内容" required="required" name="username" class="username"><br>
      密码框<input type="password" value="密码框的默认内容" name="password"><br>
      单选框<input type="radio" checked name="radio"><br>
      选择框<input type="checkbox" checked checked name="checkbox"><br>
      上传文件<input type="file" name="file"><br>
      限制输入的是邮箱格式<input type="email" value="teamczyx@teamczyx.com" name="email"><br>
      限制输入的是数字<input type="number" value="88888" name="number"><br>
      日期控件<input type="date" value="2023-01-04" name="date"><br>
      月份控件<input type="month" value="2023-01" name="month"><br>
      选择第几周<input type="week" value="2023-W01" name="week"><br>
      时间控件<input type="time" value="22:50" name="time"><br>
      颜色选择<input type="color" value="#000000" name="color"><br>
      滑块<input type="range" value="10"name="range"><br>
      <input type="reset" value="重置按钮">
      <input type="submit" value="提交按钮">

    </form>
</body>
<style>
    .username{
      outline:none;
      border:none;
      border:1px solid #10ce49;
    }
</style>
</html>




当form表单域的enctype属性为enctype="application/x-www-form-urlencoded"时,提交格式如下:


请注意:表单中的每一个标签必须有name属性,否则不会提交该标签中的数据。
如果将form表单域的enctype属性改为enctype="multipart/form-data",提交格式如下:




解释一下form表单域的相关标签:

<form></form> 表单域
常用属性如下:
action="表单提交地址"
method="提交方法get post之类"
enctype="application/x-www-form-urlencoded" 提交的数据格式为name=zhangsan&age=50
enctype="multipart/form-data" 提交的数据中包含图片或文件时定义为该格式

input标签,常用属性如下:
                1.type="text"文本框
                2.type="password"密码框
                3.type="radio"单选框
                4.type="checkbox"复选框
                5.type="submit"提交按钮
                6.type="reset"重置按钮
                7.type="file"上传文件
                8.type="button"普通按钮
                新增input 的type属性
                        email 限制输入的是邮箱格式
                        number数字
                        date   日期控件
                        month月份控件
                        week    选择第几周
                        time   时间控件
                        color   颜色选择
                        range   滑块
               
                新增input 的标签属性
                placeholder="请输入内容"---input的标签属性,设置提示内容
                required="required"设置必填项,所属标签必须填写,否则不能提交
                autofocus="autofocus"自动获取焦点(自动将光标放入输入框)
               
                input的CSS样式
                outline:none;去除input点击后的蓝色边框
                border:none;去除input的默认边框
                border:1px solid #0077AA;给input加一个自定义的边框

下拉框:
                <select>
                        <option></option>
                </select>

文本域:      <textarea></textarea>




saundiy 发表于 2023-2-15 04:10:18

我作为初学者,更是应该先把基础打牢固

wittylala 发表于 2023-2-21 06:52:54

好好学习,天天向上

yjwjsion 发表于 2023-2-26 11:43:50

我也是学计算机的,不过是新手。看了上面的贴子,很是热血沸腾。值得学习!

hongbawudi 发表于 2023-3-2 23:06:35

加油!努力!行动!!!!!去做一个优秀的程序员!

309574018 发表于 2023-3-9 06:05:32

好东西啊

为爱走天涯 发表于 2023-3-15 09:55:46

天下一绝啊!!!!!!!!!!!好!!!!!!!!!!!!!

127264444 发表于 2023-3-19 11:39:57

是啊,重知识轻技术的后果

aixo 发表于 2023-3-25 02:31:41

很受用,谢谢

九阳豆浆机 发表于 2023-3-28 23:09:37

谢谢,受教了!呵呵。早点看到就好了呀!!
页: [1] 2 3 4
查看完整版本: HTML核心(二)HTML中常用的form表单元素标签