HTML 表单-蒲公英云

<form action="" method="">
    <!-- 单行文本框 -->
    <input type="text" name="" />
    <!-- 密码框 -->
    <input type="password" name="" />
    <!-- 单选按钮，一组单选按钮的name要相同 -->
    性别：
    <input type="radio" name="gender" value="male" />男
    <input type="radio" name="gender" value="女" />女<br />
    <!-- 复选框，一组复选框的name要相同 -->
    <!-- 以?hobby=basketball&hobby=swimming的形式传递，后台用数组接收 -->
    爱好：
    <input type="checkbox" name="hobby" value="basketball" />篮球 
    <input type="checkbox" name="hobby" value="running" />跑步 
    <input type="checkbox" name="hobby" value="swimming" />游泳 
    <!-- 水平滑动条，可用step指定步长、value指定默认值 -->
    <input type="range" name="" min="0" max="100">
    <!-- 隐藏域 -->
    <input type="hidden" name="" value="" />
    <!-- 上传文件，method必须是post，enctype必须是multipart/form-data -->
    <input type="file" name="" />
    <!-- 默认可以选择所有类型的文件，可以使用accept限定可选择的文件类型，可以使用通配符，比如accept="image/*" -->
    <!-- 默认只能选择一个文件，可使用multiple指定可选择多个文件 -->
    <input type="file" name="" accept="image/jpeg" multiple />
    <!-- label的for属性绑定输入框的id（不能用name代替），点击label，输入框也会聚焦 -->
    <label for="username">用户名：</label>
    <input type="text" name="username" id="username">
    <!-- 按钮 -->
    <input type="button" value="普通按钮" />
    <input type="reset" value="重置" />
    <input type="submit" value="提交" />
    <!-- 以图片作为提交按钮上的内容，点击会提交表单，可设置图片宽高 -->
    <input type="image" src="image/1.jpg" width="" height="" />
    <button type="button">普通按钮</button>
    <button type="reset">重置</button>
    <button type="submit">提交</button>
    <!-- 下拉列表，只能从所给项中选择一项，默认显示|选择第一项 -->
    请选择国籍：
    <select name="nationality">
          <option value="China">中国</option>
          <option value="America">美国</option>
         <option value="other">其他</option>
    </select>
    <!-- 提示信息也可以这样写 -->
    <select name="nationality">
        <option>请选择国籍</option>
          <option value="China">中国</option>
          <option value="America">美国</option>
         <option value="other">其他</option>
    </select>
    <!-- 文本框，可以从所给项中选择一项，也可以自己输入、编辑内容。list属性绑定datalist的id，不能用name代替id -->
    请选择您使用的浏览器：
    <input list="browsers" />
    <datalist id="browsers">
        <option value="Internet Explorer" />
        <option value="Firefox" />
        <option value="Chrome" />
        <option value="Opera" />
        <option value="Safari" />
    </datalist>
    <!-- 文本域 -->
    <textarea name="" rows="10" cols="50">此处写默认内容</textarea>
</form>

input的type属性值

text 单行文本框
password 密码框
radio 单选按钮
checkbox 复选框
file 选择文件
image 图片
button 普通按钮
reset 重置按钮
submit 提交按钮
image 以图片作为提交按钮，点击会提交表单
hidden 隐藏域，常用来提交隐秘信息
file 选择文件
color 颜色选择器
date 日期选择器（年月日）
month 日期选择器（年月）
time 时间选择器（时分）
datetime-local 时间日期选择器（年月日+时分）
email email格式，会自动检查内容是否符合email格式，不符合会提示
number 数字格式，会自动检查内容是否是数字，不是会提示
tel 电话号码
url 网址，会自动检查内容是否符合url格式，不符合会提示
range 水平滑动条
search 搜索框，和单行文本框差不多，只是框内右侧有一个X，点击会清空文本

某些type属性值，有的浏览器尚未实现，最好自己写正则表达式校验。

input常用属性

type 文本框类型
name 指定了name的字段才会被提交，不能用id代替name
placeholder 占位符
value 输入框中的值
autofocus 自动聚焦
disabled 禁用
readonly 只读
required 必填，提交时会自动检查，未填写会提示
size 输入框的宽度，以字符计
form 指定此表单组件属于哪个表单（id），常用于form之外的表单元素。如果值是多个表单，逗号分隔
formaction 指定将此表单组件提交给xx来处理，会覆盖所属form的action属性
title 鼠标移上去时显示的提示信息
pattern 指定正则表达式，浏览器会自动用这个正则表达式来校验值，不符合要求会提示

<!-- [0,10]，步长为2，即只能输入0,2,4,6,8,10这几个数字其中之一。会自动检查内容是否符合要求，不符合会提示 -->
<input type="number" name="" min="0" max="10" step="2" />
<!-- 浏览器会自动使用这个正则表达式来校验内容，不符合要求会提示 -->
<input type="text" name="" pattern="[A-Za-z]{3}" title="只能输入3个英文字母" />