<input> 表单元素

表单元素

一、表单元素简介

标签是一个单标签,是让用户输入信息的一种表单控件,其中包含一个 type 属性,根据输入内容的不同,选择不同的属性值、例如有文本字段、复选框、掩码后的文本控件、单选按钮、按钮等。

二、type 属性的属性值及其描述

属性值 描述
button 定义可点击按钮(多数情况下,用于通过 JavaScript 启动脚本)
checkbox 复选框
file 输入字段和 “ 浏览 ” 按钮,供文件上传
hidden 隐藏的输入字段
image 定义图像形式的提交按钮
password 定义密码字段,该字段中的字符被掩码
radio 定义单选按钮
reset 定义重置按钮,重置会清除表单中所有数据
submit 定义提交按钮,提交按钮会吧表单数据发送到服务器
text 定义单行输入字段,用户可在其中输入文本,默认宽度为20个字符

三、表单其他属性及其描述

属性 属性值 描述
name 用户自定义 定义 input 元素的名称
value 用户自定义 规定 input 元素的值
checked checked 规定此 input 元素首次加载时应当被选中
maxlength 正整数 规定输入字段中的字符的最大长度。

四、注意事项

  1. name 和 value 是每个表单元素都有的属性值,主要是给后台人员使用的。
  2. name 表单元素的名字,要求单选按钮和复选框都要有相同的 name 值。
  3. checked 用于单选按钮和复选框的,当页面打开的时候默认选择的此按钮。
  4. maxlength 是用户可以在表单元素输入的最大字符数,一般比较少用。

五、代码示例演示

<-- 省略基本骨架代码 -->
<form action="xxx.php" method="GET">
  文本框-用户名:<input type="text" name="username" value="请输入用户名"> <br>
  密码框-密码:<input type="password" name="pwd"> <br>
  单选按钮-性别:男<input type="radio" name="sex" value="" checked="checked"><input type="radio" name="sex" value=""> <br>
  复选按钮-爱好:打篮球<input type="checkbox" name="happy" value="bool" checked="checked"> 睡觉 <input type="checkbox" name="happy" value="sleep"> 打游戏 <input type="checkbox" name="happy" value="game"> <br>
  提交按钮:<input type="submit"> <input type="submit" value="提交上面数据"> <br>
  重置按钮:<input type="reset"> <input type="reset" value="重新填写"> <br>
  普通按钮button: <input type="button"> <input type="button" value="获取短信验证码"> <br>
  上传文件:<input type="file"> <br>
form>
<input> 表单元素_第1张图片
<input> 表单元素_第2张图片

点击提交按钮,会把用户填写的数据提交到表单域定义的 action 值里,这里是随便写的 xxx.php。后面会跟着用户填写的数据,提交给后台程序员使用,如下图所示。

<input> 表单元素_第3张图片

点击选择文件即可打开电脑的文件管理,如下如所示。

<input> 表单元素_第4张图片

六、

语法:

<form action="xxx.php" method="GET">
  <label for="nan">label><input type="radio" name="sex" id="nan">
  <label for="nv">label><input type="radio" name="sex" id="nv">
form>

你可能感兴趣的:(前端,html,web,checkbox)