form in html

HTML forms are mainly used to collect user input information.

An HTML form represents an area in a document that contains interactive controls that send information collected by the user to a Web service

Label

describe

action:

The submitted backend interface

method:

submit method

get: It will be displayed on the URL, which is not safe, and the length of the URL is displayed

post : It will not be displayed on the URL. Compared with get, it is safer, supports more types, and transfers a larger size

input

type

Type defaults to txt text format

password: password box

checkbox: check box, checked is selected by default

radio: radio button

file: upload

number: number box only

submit: submit button

reset: reset

datetime : time

datetime-local : time

email : Email

month : month

tel: telephone

placeholder

hint

name

Submit to the corresponding interface of the backend

textarea

The text field can set the width and height by yourself

select

Set option in the drop-down list, selected="selected" is selected by default

button

Ordinary button, you can also add type

Example:

<body>
    <h1>注册</h1>
    <form action="wangy.php" method="post">
      <div>
        <span>账号:</span>
        <input
          maxlength="11"
          name="user"
          placeholder="最多只能输入11位"
          type="text"
        />
      </div>
      <div>
        <span>密码:</span>
        <input name="password" placeholder="请输入密码" type="password" />
      </div>
      <div>
        <span>确认密码:</span>
        <input
          name="confirm-password"
          placeholder="请再次输入密码"
          type="password"
        />
      </div>
      <div><input name="agreement" type="radio" /><span>同意协议</span></div>
      <div>
        <span>出生日期：</span>
        <input name="Date of birth" type="data" />
      </div>
      <div>
        <div>
          <span>输入年龄：</span>
          <input name="age" type="number" />
        </div>
        <div><span>上传：</span> <input name="upload" type="file" /></div>
        <div>
          <span>自我介绍：</span>
          <textarea
            name="Introduce yourself"
            style="width: 200px; height: 100px"
          ></textarea>
        </div>
        <div>
          <span>选择爱好：</span> <input name="hobby" type="checkbox" />足球
          <input type="checkbox" checked="checked" />篮球球
          <input type="checkbox" />羽毛球
        </div>
        <div>
          <span>选择国家：</span>
          <select name="country">
            <option value="">中国</option>
            <option value="" selected="selected">印度</option>
            <option value="">俄罗斯</option>
            <option value="">美国</option>
          </select>
        </div>
        <button type="submit">注册</button> <button type="reset">取消</button>
      </div>
    </form>
  </body>

Effect:

Guess you like