3school 知识点随笔记录(HTML输入类型)

 

                                                             URL

 

 

    http          超文本传输协议     http:// 开头的普通网页。不加密。

 

    https         安全超文本传输协议    安全网页。加密所有信息交换。

 

    ftp           文件传输协议            用于将文件下载或上传至网

 

 

 

 

 

 

 

                                HTML  表单

 

 

 

          form         //  定义HTML表单

 

          text         //  定义常规文本输入

 

          radio        //  定义单选按钮输入(多选一)

 

          checked      //  定义单选按钮预选项

 

          submit       //  规定向何处提交表单的地址(URL)(提交页面)。

 

          action       //  定义在提交表单时执行的动作

 

          method       //  定义在提交表单时所用的HTTP方法(GET POST,默认GET

 

          name         //  规定识别表单的名称

 

          fieldset     //  定义组合表单中的相关数据,<legend>元素为<fieldset>元素定义标题

  

          target       //  规定action属性中地址的目标(默认:_self

 

 

 

 

       示例  

 

 

 

<!DOCTYPE html>

<html>

 

  <body>

 

    <form(定义表单)   action(规定提交表单的地址)="/demo/demo_form.asp">

 

      <fieldset>     //  组合表单中的数据

 

<legend>Personal information:</legend>     //  定义标题

 

First name:<br>

 

<input type="text" name(定义名称)="firstname" value(定义框内默认内容)="Mickey">

 

<br>

 

Last name:<br>

 

<input type="text" name="lastname" value="Mouse" >

 

<br><br>

 

<input type="submit" (定义提交按钮) value="Submit">

 

 

 

  <form>

 

<input type="radio" (定义单选按钮) value="hhh" checked(定义初始选择位置)>

<input type="radio" (定义单选按钮) value="xxx" >

 

  </form>

 

 

      </fieldset>

 

    </form>

 

  </body>

 

</html>

 

 

 

 

 

 

     select     //   定义下拉列表

 

     option     //   元素定义下拉列表中的一个选项(条目),option 元素位于 select 元素内部

 

 

 

   示例  

 

 

<!DOCTYPE html>

 

<html>

 

  <body>

 

    <form action="/demo/demo_form.asp">

 

      <select name="hhh">     //  定义下拉列表

 

<option value="volvo">volvo</option>    //  定义列表中的一个选项

 

<option value="saab" selected(定义下拉框预选项)>saab</option>

 

<option value="fiat">fiat</option>

 

<option value="audi">audi</option>

 

      </select>

 

<br><br>

 

<input type="submit">

 

    </form>

 

  </body>

 

</html>

 

 

 

 

 

 

        datalist  //   元素为 <input> 元素规定预定义选项列表。

                          用户会在他们输入数据时看到预定义选项的下拉列表。

 

        input    //   <input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。

 

 

 

 

        示例  

 

 

 

<!DOCTYPE html>

 

  <html>

 

    <body>

 

      <form action="/demo/demo_form.asp">

 

        <input list(定义位置)="browsers" name="browser">

 

          <datalist id="browsers">  //  坐标ID定位输入框

 

  <option value="Internet Explorer">

  <option value="Firefox">

  <option value="Chrome">

  <option value="Opera">

  <option value="Safari">

 

          </datalist>

 

        <input type="submit">    //  定义提交按钮

 

      </form>

 

    </body>

 

  </html>

 

 

 

 

 

                             输入类型

 

 

     text        //   定义供文本输入的单行输入字段

 

     password    //  定义密码字段

 

     checkbox    //  定义复选框,复选框允许用户在有限数量的选项中选择零个或多个选项。

 

     button      //  定义按钮

 

     number      //  定义包含数字值得输入字段,min="1" max="5" :  只能输入1-5之间

 

     date        //  定义包含日期的输入字段,日期选择器会出现输入字段中。

 

     color       //  定义包含颜色的输入字段。根据浏览器支持,颜色选择器会出现输入字段中。

 

     range       //  定义包含一定范围内的值的输入字段,输入字段能够显示为滑块控件。

 

     month       //  定义允许用户选择月份和年份,日期选择器会出现输入字段中。

 

     week        //  定义允许用户选择周和年,日期选择器会出现输入字段中。

   

     time        //  定义允许用户选择时间(无时区),时间选择器会出现输入字段中。

 

     email       //  定义包含电子邮件地址的输入字段,在提交时自动对电子邮件地址进行验证。

 

     search      //  用于搜索字段(搜索字段的表现类似常规文本字段)

 

     tel         //  用于应该包含电话号码的输入字段。

 

     url         //  用于应该包含 URL 地址的输入字段。

 

           注释 :  输入类型都需要用“type”定义

 

 

 

 

  示例:

 

 

<!DOCTYPE html>

 

  <html>

 

    <body>

 

      <form action="/demo/demo_form.asp">

 

name:<input type="text" name="firstname">   //  定义普通文本输入框

 

<br>

 

mima:<input type="password" name="password">  //  定义密码字段

 

<br>

 

tijiao:<input type="submit" name="submit">     //  定义提交表单数据至表单处理程序的按钮。

 

<br>

 

danxuan:<input type="radio" name="radio" value="female">Female //  定义单选按钮

 

<br>

 

fuxuan:<input type="checkbox" name="checkbox" value="Car">I have   //  定义复选按钮

 

<br>

 

dianji:<input type="button" οnclick="alert('Hello World!')" value="Click Me!">

cllick!</button>                //   定义点击事件

 

<br>

 

shuzi:<input type="number" name="quantity" min="1" max="5">  //  定义数字输入且在1-5之间

 

<br>

 

riqi:<input type="date" name="bday">  //  定义包含日期的输入字段

 

<br>

 

yanse:<input type="color" name="favcolor" value="#ff0000">  //  包含颜色调控输入字段

 

<br>

 

shuzi:<input type="range" name="points" min="0" max="10">  //  范围内滑块控件字段

 

<br>

 

nianyue:<input type="month" name="bdaymonth">  //  允许用户选择月份和年份。

 

<br>

 

nianzhou:<input type="week" name="year_week">  //  允许用户选择周和年。

 

<br>

 

time:<input type="time" name="usr_time">  //  允许用户选择时间(无时区)。

 

<br>

 

email:<input type="email" name="email" value="123456">  //  包含电子邮件地址的输入字段。

 

<br>

 

sousuo:<input type="search" name="googlesearch">  //  用于搜索引擎字段

 

<br>

 

tel:<input type="tel" name="usrtel">  //  用于包含电话号码的输入字段。

 

<br>

 

url:<input type="url" name="homepage">  //  用于包含 URL 地址的输入字段。

 

<br>

 

<input type="submit">

 

      </form>

 

    </body>

 

  </html>

转载于:https://www.cnblogs.com/1231-y/p/10736930.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值