What are the new form controls and form attributes in HTML5?

HTML5 is the next generation standard of the Internet and a language method for constructing and presenting Internet content. It is considered to be one of the core technologies of the Internet.

HTML5 is the specification of the core language HTML in the Web. The content that users see when browsing the web using any means is originally in HTML format. It is converted into a recognizable format through some technical processing in the browser. Information. HTML5 has made certain improvements on the basis of the previous HTML4.01. Although technical personnel may not put these new technologies into application during the development process, website development technical personnel must be aware of the new features of this technology. understand.

New input form control:

• email: Email text box, no different from ordinary ones

• - When the input is not an email address, the verification fails

• - The keyboard on the mobile terminal will change

• tel: phone number

• url: URL of the webpage

• search: search engine

• - After entering text under chrome, there will be more A closed

## - Example: Use js to display the current value
number: an input box that can only contain numbers
- There are two arrows at the end of the input box. The upper arrow is for plus and the lower arrow is for minus.
Color: Color Selector
- Click to display the color version
datetime: Display the complete date
- Similar to select selection style
datetime-local: Display the complete date Date, excluding time zone
time: display time, excluding time zone
date: display date {year, month, day}
week: display the week {year, month, day, week}
mouth: display the month {year, month}

• ## (Free video tutorial:
html video tutorial
• )

  <form>
    <input type="email" />
    <input type="tel" />
    <input type="url" />
    <input type="search" />
    <!--一个滑块加一根长条 min最小表示数 max最大表示数 step 划一格跳几个数字-->
    <input type="range" min="1" max="10"  step="2"/>  <!---->  <input type="number" />  <input type="color" />
    <input type="submit" />
  </form>

  New form features and functions

• placeholder: input box prompt information

- Example: Weibo password box prompt

autocomplete

• - The default is on, turn off the prompt selection off

• autofocus: Specify the form to obtain the input focus

• list and datalist: Construct a selection list for the input box

• - The list value is the id of the datalist tag

• ## required: This option is required and cannot be empty

• Pattern: Regular Verification

• - pattern="\d{1,5}"

• Formaction defines the submission address in submit

• <input type="text"
    placeholder="请输入4-16个字符" // 输入框内显示
    autocomplete="off" // 是否记录输入的值
    autofocus // 聚焦
    required // 输入框不能为空
    pattern="\d{1,5}" // 必须输入1到5个数字
   />
  //  required 和 pattern 具有安全隐患 如果在控制台修改input的pattern和required 那么就可以破除校验
  
  // 如果用户在某个页面输入相当多的数据，临时有事需要离开一段时间，此时数据应该保存至草稿箱，那么同一个form表单下，将会有两个不同地址的sumbit提交 ope浏览器已支持 其余浏览器可能不支持
  <form action="https://www.baidu.com">
    <input type="text">
    <input type="submit" value="提交" />
    <input type="submit" value="保存至草稿箱" formaction="http://www.miaov.com"/>
  </form>

  Related recommendations:

  html5 tutorial

The above is the detailed content of What are the new form controls and form attributes in HTML5?. For more information, please follow other related articles on the PHP Chinese website!