html中的表单标签

html 中的表单标签介绍

无羡且不懈

3564人浏览 · 2022-04-23 20:58:42

无羡且不懈 · 2022-04-23 20:58:42 发布

基本表单标签

<form action="" method=""> </form>
解释:
<form>元素主要是定义本身是一组表单。
属性解释: action将表单元素的填写内容发送给某个后台文件method通过什么方式发送给后台文件，两种方式 get post

以下内容在代码部分也有注释。
1.文本框
<input type="text" disabled value="请输入用户名">表示用户输入数据
解析:
type input框的类型当等于text时为文本框disabled文本框处于禁用状态value默认的显示文字，初始值placeholder默认的提示文字

2.密码框
<input type="password">
同样为input标签，type类型设置为password

3.单选框
<input type="radio" name="sex" checked >男<input type= "radio" name="sex" >女
解析:type类型为radio，需要注意的是同一组单选框的需要设置name属性并且设置为相同的值，checked表示默认选中;

4.复选框
<input type="checkbox" checked>体育<input type="checkbox">解析: type类型为checkbox, checked 默认选中

5.按钮元素
<input type="submit">提交按钮，同样为input框，type类型设置为submit,功能将填写好的数据，发送给form的action属性中的后台文件
<input type="reset ">重置按钮，同样为input框，type类型设置为reset，功能将填写好的数据清空
<input type= "button" value="确定"> 普通按钮，同样为input框，type类型设置为button,功能需要自己定义

1.生成下拉列表
<select name="fruit">
<option value="1">苹果</option>
<option value="2">橘子</option>
<option value="3">香蕉</option>
</select>
解释: <select> 下拉列表元素至少包含一个<option>子元素，才能形成有效的选项列表。<select> 元素包含两个子元素<option>项目元素和<optgroup>分组元素，还包含了一些额外属性。selected默认显示的列表项

2.多行文本框4
<textarea rows= "20" cols="30>请留下您的建议! </textarea>
属性解析: rows 设置行数cols设置列数

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name ="viewport" content = "width  =device - width,initial - scale =1.0" >
        <title>
            表单标签
        </title>
    </head>
    <body>
        <!-- action 服务器地址（接口地址API） -->
        <!-- method 通过什么方式发送到服务器上，get post -->
        <form action  = "http://" method = "get">
            <!-- placeholder 默认的提示内容 -->
            <!-- value 属性 文本框中的值 默认是空 -->
            <!-- name 属性 将来服务器所接受键值 -->
            <!-- user = wangyi -->
            <!-- label 和input 对应的标签 实现点击内部文字，input获取焦点——>获得所对应的位置 -->
           <p> <label for="sname">
                文本框
            </label>
            <input type="text" placeholder="请输入用户名" value = "" name = "user" id = "sname">
           </p>
           <p> 
               <label for="upassword">
                密码框
            </label>
            <input type="password" placeholder="请输入密码 "value = "" name= "" id= upassword>

</p>
<p>
    <!-- 同一组的单选框：name 必须相同 -->
    <!-- checked表示默认选中 -->

    单选框：
    <input type="radio" name = "sex" value="1" id ="man"> 
    <label for="man">男</label>
    <input type="radio" name = "sex"value = '0'id ="woman">
     <label for="woman"> 女

    </label>
   
    <input type="radio" name = "sex"value = '2' id = "unkonwn">
    <label for="unkonwn">未知</label> 
</p>
  复选框：
  <input type="checkbox" name = 'love' value = '1'>篮球
  <input type="checkbox" name ='love' value="2" checked>足球
  <p>
      <!-- 提交按钮：将填写好的数据发送到服务器上 -->
      提交按钮：<input type="submit" value = "注册">
      <!-- 重置按钮：、默认回到初始内容 -->
      重置按钮：<input type="reset">
      自定义按钮：<input type="button" value="确定">
  </p>
  <p>
<label for="xiala">下拉列表：</label>
    
    <select name="" id="xiala">
        <option value="1">山东</option>
        <option value="2">河南</option>
        <option value="3" selected>河北</option>
    </select>
  </p>

  <p>
      文本域（）多行文本框：
      <!-- cole 可以容纳列数 -->
      <!-- rows 可以容纳行数 -->
      <textarea name="cont" id="" cols="30" rows="10"></textarea>

  </p>
        </form>
    </body>

</html>