一、input

常见的input类型：

text 单行文本框
password 密码
radio
name属性一般和radio一起使用，表示一组的单选框name值相同
checkbox
后面再+checkbox表示默认选项、再+disabled表示禁止选线
file
后+multipluy 表示多选，表示可同时上传多份文件
submit
提交到form的action属性内容表示的地址中区
reset
初始化form表单

<body>
    <form action="http:www.baidu.com">
      输入框：<input type="text" placeholder="请输入"><br> placeholder表示提示文字
      密码框：<input type="password"><br>
      单选框：<input type="radio" name="gender">男
      <input type="radio" name="gender">女<br> 注意：name值相等的确定为一组单选组
      复选框：<input type="checkbox" checkbox> 后面跟checkbox表示默认选项
      <input type="checkbox">
      <input type="checkbox" disabled><br>  disabled表示禁止选项
      上传文件：<input type="file">
      <input type="file" multipluy><br>  multipluy表示多选，可同时上传多份文件
      提交按钮：<input type="submit"><br> submit按钮将form表单提交到form属性中的action的地址中
      重置按钮：<input type="reset"><br> reset重置属性，将form表单初始化
    </form>
</body>

显示结果：
在这里插入图片描述

二、textarea（多行文本框）

cols 表示列
rows 表示行

<form>
  <textarea cols="30" rows="10"></textarea> ：表示这是一个30列10行的文本框
</form>

显示结果：
在这里插入图片描述

三、select option（下拉菜单）

格式
< select>
< option>< /option>
< /select>
selected option中使用selected，表示默认选项
disabled option中使用disabled表示下拉选项框再选时禁止该选项
size selected中的size表示下拉框的可显示选项
multiple selected下的multiple表示多选

  <form>
    <select>
      <option selected disabled>请选择</option> selected表示默认选项，disabled表示下拉选项框再选时禁止该选项
      <option>北京</option>
      <option>上海</option>
      <option>杭州</option>
    </select>
    <select size="3"> size表示可显示的选项个数
      <option>北京</option>
      <option>上海</option>
      <option>杭州</option>
    </select>
    <select multiple> multiple 表示可以多选
      <option>北京</option>
      <option>上海</option>
      <option>杭州</option>
    </select>
  </form>

结果显示：
在这里插入图片描述

四、lable （辅助）

input中的 id和 for属性值必须保持一致，lable的作用是使得选项范围变大，点击“男” 字也可以选上选项

  <form>
    <input type="radio" name="gender" id="man"><label for="man">男</label>
    <input type="radio" name="gender" id="women"><label for="women">女</label>
  </form>

将选框直接放入label标签内，则lable标签内的所有作用域均可选中选项

  <label>
    <input type="radio">男
    <div>我是一个div</div>
  </label>

来源：CSDN

作者：weixin_43331769

链接：https://blog.csdn.net/weixin_43331769/article/details/104065853

标签

input

form表单提交

form

html表单