HTML-表单的基本使用及其属性值

目录

 

1-input

2-属性的部分使用

3-input的细化的新型化的使用

---

1-input

文本框-text

  对于文本框来说其实就是简单的运用到type的属性,效果就是你能去得到一个简单的表单，然后那个placeholder就是那个灰体提示字，同时在此也能进行设置最大最下的长度值.

表单:<input type="text"placeholder="非汉字" name="form" maxlength="12" size="10px" >

密码框- password

      密码框和文本框本质上是没有区别的，主要就是更改type类型 变成password

 密码框: <input type="password" name="form" maxlength="12" size="10px">  <br>

复选框 -checkbox

单选框- radio

他们俩放在一起说其实对于选择框而言，一个是记性多个选择一个是进行单个选择，里边具有相同和不同点，举个例子.下面的区别是，type的类型不一样，相同点则是对于name的值，他们虽然是两种不同的类型吧，但是同一类型中的name的值要求是一样的，这样才能进行相同选择框

复选框: <input type="checkbox" name="check" value="exam">
       <input type="checkbox" name="check" value="exam">
       <input type="checkbox" name="check" value="exam"> 
单选框 <input type="radio" name="radio" value="a1"> 100-200
       <input type="radio" name="radio" value="a2"> 300-400
       <input type="radio" name="radio" value="a3"> 400-500
       <input type="radio" name="radio" value="a4"> 600-700

文本域<textarea>

 文本域其实就是文本框的加强版本，因为他主要的目的是在于后续的留言功能啥的，然后输入的内容比较大，但是为了美观，这个也是可以来控制尺寸的哈,*在 form之中

<form action="##">
        <textarea name="mytext" id="num" cols="30" rows="10" autofocus required="非空白"></textarea>
       </form>

标准按钮- button

提交/重置 submit /resert

 刚才发现了一个东西，就是说你不是提交或发送一个东西，在你的文本框之中，但是关键的是如果你单纯的去弄一个submit or reset 其实是没有效果的，但是如果你是在一个form之中，那个就可以实现来消除或者提交的功能

<form action="">
        邮箱：<input type="text" id="email">
        <!-- <input type="reset" name="clear" id="reset1"> -->
        <input type="submit" id="submit1">
      </form>

图像域-image

 其实也是一个提交的方式吧，只不过它的形式是你点击图像，然后会转换到另一个链接还是什么的，他的形式如下:

但是我同时也是具有疑问点的，既然是点击一个图像来进行进入，那么这个图像的格式又是怎样的定义的呢--果然不出意料哈，就是一张大图，但是是可以点击的大图，你要想给他变成小图，自然奥对他进行格式的修改，height 或者weight的比例来设置

 <input type="image" name="image" src="-----地址">

列表区域<select>

 这个其实让我想起那个bootstrap里边的列表了，但是先说这个吧，反正要注意的一点就是那个size的作用就是开始显示的页面，虽然你可以继续选，但是size=1 的时候只是显示一个，为2 的时候则是显示两个，以此类推.

 <form action="">
        <select name="列表框" size="1">
            <option value="1">张三</option>
            <option value="2">李四</option>
            <option value="3">王五</option>
            <option value="4">赵六</option>
        </select>
 </form>

下边是是编辑的页面，没有经过css的加工，显得很平平其其，但是大体的意思已经出来了.

 

2-属性的部分使用

form

formmethod和formaction

palceholder:其实上变已经演示了，就是灰色字体的颜色，可以起到提示作用

autofocus:自动对焦功能，你可以放在框的各种位置，但是只能放一个哈

list ：感觉比那个select的样式要好看那个一点点,他的格式如下:

<form action="demo-form.php" method="get">
        <input list="browsers" name="browser">
        <datalist id="browsers">
          <option value="Internet Explorer">
          <option value="Firefox">
          <option value="Chrome">
          <option value="Opera">
          <option value="Safari">
        </datalist>
        <input type="submit">
        </form>

automplete : 如下,效果吧，其实就是一个简单的页面，你点击之后会进行自动的提交的功能,其实这点还是挺好的,以及有type=“email” 则要求你的格式要输入正确.

<form action="demo-form.php" autocomplete="on">
  First name:<input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>

pattern：这个是输入的内容来进行要求,比如说你要输入的非汉字，在此可以设置，则形式如下:

当你格式输入不满足你要求的内容时，则输入框会自动的提醒你。

<input type="text" pattern="[0-9][A-Z]{3}" name= part placeholder="输入内容,1字母,三个大写字符">

required :要求你必须去输入某些东西，否则你是不能用提交键的.

min 和 max :限制了input元素中输入数值和日期的范围

3-input的细化的新型化的使用

数值输入域- number

滑动条：对于数据的输入的时候要注意的的事情是， 你可以去设置他们之间的起始数值和最大和最下的数值，同时对于那个滑动条也有类似的效果的，然后如果你想让他们初始的时候就有数值记得要加一个value="N"这个事是起始都具有数值

<input type="num" step="2" min="0" max="20" value="12">
       <input type="range" name="r1" min="1" value="2">

日期选择器:说实话我真的喜欢这个日期他显得十分大气上档次.可以将日期分为如下 date -年月日，month--月年，week-周，年。time- 选取的时间-datatime-选取的年月日...

<form > <input type="datetime-local" name="user_myname"> </form>

email类型:就是你要输入email格式，如果不是，则要求你输入.

<input type="email" name="email" value="#####"> <br>
      <form action="">
        邮箱：<input type="text" id="email">
        <!-- <input type="reset" name="clear" id="reset1"> -->
        <input type="submit" id="submit1">
      </form>

有关input类型的这就结束了，后续将带来更多的精彩内容，如果有错误也欢迎指出,谢谢.