初识form表单

初识form表单

1.form表单语法

<form action="发送表单数据的地址" method="发送表单数据的http方法">
    表单标签....
</form>
<!-- 
    其中method默认值为get方法
-->

2.表单内标签

2.1 input类型

2.1.1 当type值为text,表示的为文本输入框

<input type="text" placeholder="请输入账号">
<!-- 
    placeholder指的是啥都写时,默认提示文字为请输入账户
    当文本框里面键入文字时,提示文字就会消失。
-->

用途:登录注册一些账号的输入框

2.1.2 当type值为password,表示的为密码输入框

<input type="password" placeholder="请输入密码">
<!-- 
    placeholder指的是默认提示文字,其中提示文字为请输入账户
    当密码框里面键入文字时,提示文字就会消失。
    密码框里面书写的密码都会以***的这种方式显示
-->

2.1.3 当type值为radio,表示的为单选框

<input type="radio" name="sex">男
<input type="radio" name="sex">女
<!-- 
    对于单选按钮而言,因为每次都只能选一个
    判断是同一个单选情况下的会的话,使他们的name为相同值即可
-->

2.1.4 当type值为checkbox,表示的为复选框

<input type="checkbox" name="hobby">dance
<input type="checkbox" name="hobby">basketball
<!-- 
    对于复选框而言,每次可以选择零到多个按钮
    name值相同是保持接收数据的容易明白这些是属于同一组复选框里面的
-->

2.1.5 当type值为file,表示的为上传文件库

<input type="file">
<!-- 
    上传资源,类似于csdn里面上传资料的界面
-->

2.1.6 当type值为button,表示的为普通按钮

<input type="button" value="普通按钮">
<!-- 
    普通按钮,方便自己去设置想要的样式
-->

2.1.7 当type值为submit,表示的为提交按钮

<input type="submit" value="普通按钮">
<!-- 
     把网页中所有的信息都会发给action所在的地址,若form表单的method方法为get就会地址栏显示所有数据,不然就会隐藏起来,需要F12去查看数据
-->

2.1.8 当type值为reset,表示的是重置按钮

<input type="reset" value="重置按钮">
<!-- 
     清空当前网页所填写的所有东西
     使得充值表单内所有元素为默认值
-->

2.1.9 当type值为image,表示的是提交按钮

<input type="image" value="提交按钮">
<!-- 
   
-->

2.1.10 当type值为hidden,表示的是隐藏按钮

<input type="hiddle" value="count">
<!-- 
     不是给用户看的,而是给我们程序员看的
-->

2.2 其他类型

2.2.1 下拉框select

<select name="" id="">
    <option value="">湖南</option>
    <option value="">湖北</option>
</select>
<!-- 
   若现使某一个下拉选项,默认第一个展示出来,可以在option标签里面写selected
   这种一般是用于三级联动用的比较多
-->

2.2.2 多行文本框textarea(了解即可)

<textarea name="" id="" cols="30" rows="10"></textarea>
<!-- 
  只要可用于备注信息的输入、博客里面摘要的简述
  rows---高度,cols为宽度
  联想表格中的rowspan(合并行)和colspan(合并列)记忆即可
-->

3.表单中元素重要属性

3.1 name属性

<!-- 用途1:编组
     主要用于单选框,保证单选框每次只能该组的里面一个
-->
<input type="radio" name="sex" id="">男
<input type="radio" name="sex" id="">女

<!-- 用途2:给提交的数据取一个名字(变量名)
     主要用于单选框,保证单选框每次只能该组的里面一个
-->
<input type="radio" name="sex" id="">男
<input type="radio" name="sex" id="">女

3.2 value属性

<!-- 用途1:input标签里面显示文字(password以密文显示)
-->
<input type="text" value="账号" id="">
<!-- 
  这个输入框每次打开里面就会有账号这三个字,这字是可以删除的,不要理解为提示文字
  因为提示文字不可以通过回退文字从而进行删除
-->

<!-- 用途2:对于不可以键入的控件如radio取值,当选中某一个时,会以该值进行数据的发送
-->
<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female">女
<!-- 
  当选择男按钮时并点击提交时,会把value中的male作为数据以及name作为数据名来打包号一起发送出去
-->