HTML5表单元素格式

表单

只要是input标签都是要有name

平时的表单

这个就是我们常用的表单

表单form有method和action这两个必填的选项

action是向哪一个位置发送，表单提交的位置可以是网站也可以是请求处理的地址

method是提交方式，它只有两个选项post和get

<p>名字:<input type="text"> </p>

Input输入框，默认值是text表示文本框

<!--文本输入框：input type="text"-->

<p>密码：<input type="password"> </p>

password密码框 可以给名字和密码框取一个名字

<p>名字:<input type="text" name="username"> </p>
<p>密码：<input type="password"name="pwd"> </p>

运行效果：

注意这里的密码框是用点点来代替的， name是指的是文本框名字是username

和密码框的名字pwd

表单里面的内容都是用input开始，提交用submit 重置用reset

<input type="submit">
<input type="reset">

如果把它放在<p>标签里面就是块元素

<p>
<input type="submit">
<input type="reset">
</p>

运行效果：

一点提交页面就会跳转到写入好的地址当中

这是已经跳转打开的网页，可以在网址后面看见用户名和密码这就是get提交

这是post方式提交它没有显示其他的参数，但是post也可以用其他的方式查到用户名和密码等信息

表单元素格式

1、text

<p>名字：<input type="text" name="username" value="重庆" maxlength="8" size="30"> </p>

value它这里给了一个初始值（文本框）为重庆并且限制了文字长度是8个字，超过了8个字就不会显示8以后的字，密码框限制为30个字符

<!--文本输入框：input type="text"
默认初始值：     value="重庆"
最长能写几个字符  maxlength=""
文本框的长度     size=""
-->

2、单选框radio

当type为radio时必须给它一个初始值

注意：这是一个单选框,

<p>性别：
<input type="radio" value="boy"/>男
<input type="radio" value="girl"/>女
</p>

如果单选框选项都可以选择，证明并没有把他们放在同一个组里面

那么它和多选没有区别，因为它都可以选上

单选框：在同一个组里面只能选择一个

<p>性别：
<input type="radio" value="boy"  name="sex"/>男
<input type="radio" value="girl" name="sex"/>女
</p>

内容一样就是一个组

把他们都放在name里面则都是同一个组，他们名字都是一样为sex

注意：当选择为男的时候代表是boy而不是男，/>括号外面的男只是修饰作用

单选框的默认值为checked

<p>性别：
    <input type="radio" value="boy" name="sex" checked/>男
    <input type="radio" value="girl" name="sex" />女
</p>

3、多选框 checkbox

<!--多选框input type="checkbox"-->

<p>爱好：
    <input type="checkbox" value="sleep" name="hobby">睡觉
     <input type="checkbox" value="code" name="hobby">敲代码
     <input type="checkbox" value="chat" name="hobby">聊天
     <input type="checkbox" value="game" name="hobby">游戏
</p>

运行结果：

呈现在网址上面：

多选框的默认值为checked

<p>爱好：
    <input type="checkbox" value="sleep" name="hobby">睡觉
     <input type="checkbox" value="code" name="hobby" checked>敲代码
     <input type="checkbox" value="chat" name="hobby">聊天
     <input type="checkbox" value="game" name="hobby">游戏
</p>

4、按钮button

<!--按钮-->

<p>按钮：
    <input type="button" name="btn1" value="点击变长">
</p>

按钮也是用input来创建，再去取名为btn1，这样就建立好了按钮，按钮上可以有文字所以可以用value表示

图片也能当按钮

<input type="image"

<input type="image" src="../resources/image/1.jpg">

按钮分类：

input type="button"      普通按钮
input type="image"       图像按钮
input type="submit"      提交按钮
input type="reset"        重置

重置就是你填写的内容全部消失，然后可以重新填写

<imput type="reset" value="清空表单">

给重置赋值

5、下拉框 select

<p>下拉框：
    <select name="" id="">    </select>
   
</p>

name是下拉框的名称，id是可以去掉（看实际需求）

<option value="">  </option>

option是下拉框select的子选项，也就是拉开下拉框以后可以选择其他的选项，其他选项就是option

<p>下拉框：
    <select name="列表名称">
         <option value="选项的值">中国</option>
         <option value="选项的值">美国</option>
         <option value="选项的值">瑞士</option>
         <option value="选项的值">印度</option>
    </select>
</p>

运行效果：

这里> <的中间的文字是呈现给关注者看见的，比如中国，看见的是中国，然后一点击就是value，然后再赋值给引号里面的选项的值，所以> <的中间的文字是用来修饰的

需要默认选项加上selected

  <option value="选项的值" selected>瑞士</option>

结合起来：

<p>下拉框：
    <select name="列表名称">
         <option value="China">中国</option>
         <option value="US">美国</option>
          <option value="eth" selected>瑞士</option>
          <option value="yingdu">印度</option>
    </select>
</p>

运行结果：

如果选择中国

可以看见它的值是china说明中国只是修饰的作用，用来呈现点击的

• 这里下拉框的默认选项是selected
• 单选和多选框的默认值为checked

6、文本域 texttarea

可以输入多行文字

<p>反馈：
    <textarea> </textarea>
</p>

在给文本域取名字可以是中文但是一般不建议为中文

文本域有行rows有列cols

<p>反馈：
    <textarea> name="textarea" cols="16" rows="50"> 文本内容 </textarea>
</p>

运行结果：

箭头那里可以拖动文本域大小

当输入文字的时候文本内容会自动消失，一点击就没有了

7、文件域 file

<p>
    <input type="file">
</p>

运行效果：

<p>
    <input type="file" name="files">
    <input type="button" value="上传" name="upload">
</p>

运行效果：

所以的表单元素都要name

8、邮件验证email

<p>
    <input type="email" name="email"
</p>

name可以写其他的

如果输入错误的邮箱会自动报错 邮箱不写也能提交成功这样不安全

9、URL自动验证

<p>URL:
    <input type="url" name="url"
</p>

运行效果：

写错了也会报错

10、数字验证 number

<p>
    <input type="number" name="number"
</p>

它有最大值max和最小值main，步长（间隔）step

这里有两个向上或者向下的箭头这就是步长，用来调整数字大小(每次以多少增加或者减少)

点一次就增加10或者减去10

<p>
    <input type="number" name="num" max="100" min="0" step="10">
</p>

可以用于商品数量 加一

<p>
    <input type="number" name="num" max="100" min="0" step="1">
</p>

11、滑块 range

也是input标签

<p>滑块：
    <input type="range">
</p>

和数字验证一样也有最大值和最小值

<p>音量：
    <input type="range" name="voice" min="0" max="100" step="2">
</p>

12、搜索框 search

<p>搜索：
    <input type="search" name="search">
</p>