html-基本表单元素

最新推荐文章于 2024-08-30 16:48:59 发布

油、东西

最新推荐文章于 2024-08-30 16:48:59 发布

阅读量643

点赞数 1

文章标签： html 前端

本文链接：https://blog.csdn.net/ZZY192921533/article/details/123883701

版权

html-基本表单元素

** form标签是所有表单元素的容器，内容统一提交**
action=" " 这里写上传服务器的地址
nethod=" " 这里写通过什么方式上传到服务器（有get post两种）

文本框：
：基本的文本框
value 属性：input框中的值
name 属性：和后台进行匹配的值
placeholder属性：提示用户应该在文框输入的内容

和input标签是关联标签作用是点击文字时让对应的input对话框获得焦点
for属性：对应input id
密码文本框（输入内容时只显示实心圆）
单选框：
圆框
一组单选框name属性必须相同
checked属性：默认选中状态
例如：

以上就是一个简单的单选框，默认状态（checked属性）就是选的第一个
复选框：
方框
也可以加入checked属性，和单选框的例子雷同，就不举例子了
提示按钮：
在value中可以改变按钮里的内容
点击将填写好的数据发送到指定的服务器上
（type里的单词不能输错，输错了就只是一个普通的input文本框）
重置按钮：
在value中可以改变按钮里的内容
将form中的内容全都还原成默认
自定义按钮：
后期用js添加效果
下拉列表：

标签必须嵌套标签
select：选择
option：可选中的事物
在option标签中添加selected属性，就是下拉列表的吗默认选择状态

文本域：

cols：列数
rows：行数
value：在可输入的input文本框中不用编写value或写空（让涌入自己输入内容），类似单选、复选和下拉文本框这种，需要用户自己选择的文本框，则需要用到value

————————————————————————————————

填写一个注册页面填写：

1. 用户名
2.密码
3.性别
4.爱好
5.利用下拉列表选择地址省市区
6.提交按钮改成注册
代码如下：

<!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>Document</title>
</head>
<body>
  <form action="1.PHP" nethod="get">
     <p>
         <label for="user"> 用户名:</label>
         <input type="text" name="urse" value="" id="user" placeholder="请输入用户名">
     </p> 
     <p>
         <label for="pass">密码 ：</label>
        <input type="password" name="pass" value="" id="pass" placeholder="请输入密码">
     </p> 
     <p> 
         性别：
         <input type="radio" name="sex" value="man" checked>男
         <input type="radio" name="sex" value="wman">女
     </p>
     <p>
         爱好：
         <input type="checkbox" name="love" value="b" checked>篮球
         <input type="checkbox" name="love" value="f">足球
         <input type="checkbox" name="love" value="y">羽毛球
     </p>
       地址： 省：
         <select name="city" id="" value="city">
          <option value="XXX">XXX</option>
         </select>
         市：
         <select name="city" id="" value="city">
             <option value="XXX">XXX</option>
         </select>
         区：
         <select name="city" id="" value="city">
             <option value="XXX">XXX</option>
         </select>
         <p>
             <input type="submit" value="注册">
             <input type="reset" value="刷新">
         </p>
</body>
</html>