Home  >  Article  >  Web Front-end  >  What properties does the HTML/CSS text input box have?

What properties does the HTML/CSS text input box have?

青灯夜游
青灯夜游Original
2022-09-23 14:41:224178browse

The attributes of the text input box are: 1. accept, which specifies the type of file submitted through file upload; 2. alt, which defines the alternative text for image input; 3. disabled, which defines the disabled state; 4. formaction , stipulates the URL of the file that processes the input control when the form is submitted; 5. formtarget, stipulates where to display the name or keyword of the received response after submitting the form; 6. cols, stipulates the visible width in the text area; 7. readonly , equal to read-only status.

What properties does the HTML/CSS text input box have?

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

In HTML/CSS, there are two types of text input boxes:

  • input: single-line text input box

  • textarea : Multi-line text input box

Let’s talk about the properties supported by these two input boxes.

Attributes of the input input box

<input> tag specifies the input field in which the user can enter data.

Attributes Value Description
accept audio/* video/* image/*MIME_type Specifies the type of file submitted through file upload. (only for type="file")
align left right top middle bottom HTML5 is obsolete and deprecated. Specifies the alignment of the image input. (Only for type="image")
alt text Define the alternative text for image input . (only for type="image")
autocomplete on The off autocomplete attribute specifies whether the <input> element input field should have autocomplete enabled.
autofocus autofocus The attribute specifies that the <input> element should automatically gain focus when the page loads.
checked checked The checked attribute specifies which <input> elements should be pre-selected when the page loads. (Only for type="checkbox" or type="radio")
disabled disabled disabled attribute specifies the
form form_id The form attribute specifies the form or forms to which the <input> element belongs. The
formaction URL property specifies the URL of the file that handles the input control when the form is submitted. (Only for type="submit" and type="image")
formenctype application/x-www-form-urlencoded multipart/form-data The text/plain attribute specifies how form data is encoded when submitted to the server (only suitable for type="submit" and type="image").
formmethod get post Define the HTTP method that sends form data to the action URL. (Only suitable for type="submit" and type="image")
formnovalidate formnovalidate formnovalidate attribute overrides the
element novalidate attribute.
formtarget _blank _self _parent _topframename specifies where to display the name or keyword of the response received after submitting the form. (Only suitable for type="submit" and type="image")
height pixels Requirements The height of the element. (Only for type="image")
list datalist_id attribute refers to the element, where Contains predefined options for the <input> element.
max number The date attribute specifies the maximum value of the <input> element. The
maxlength number attribute specifies the maximum number of characters allowed in the <input> element.
min number The date attribute specifies the minimum value of the <input> element. The
multiple multiple attribute specifies that the user is allowed to enter multiple values ​​into the <input> element.
name text The name attribute specifies the name of the <input> element.
pattern regexp The pattern attribute specifies the regular expression used to validate the value of the <input> element.
placeholder text The placeholder attribute specifies a short tooltip that describes the expected value of the input <input> field .
readonly readonly The readonly attribute specifies that the input field is read-only. The
required required attribute specifies that the input field must be filled in before the form is submitted.
size number The size attribute specifies the visible width of the <input> element in characters.
src URL The src attribute specifies the URL of the image that appears as a submit button. (only for type="image")
step number step attribute specifies the legal number intervals for the <input> element .
type button
checkbox
color
date
datetime
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week
type attribute specifies the < to be displayed ;input> The type of element.
value text Specifies the value of the <input> element value.
width pixels The width attribute specifies the width of the <input> element. (Only for type="image")
##The type attribute specifies the type of <input> element to be displayed. The default type is: text.

Examples of new type attribute values ​​in HTML5

  • color

What properties does the HTML/CSS text input box have?

The color selector pops up when clicked, you can choose any color

  • number

What properties does the HTML/CSS text input box have?

Enter a number within the range. You can manually enter a number out of the range, but you cannot submit it.

  • tel

    Enter a phone number, only Safari supports

  • email

    Comes with a detection function. When submitting, it will detect whether the @ symbol is included and whether there are characters before and after the @ symbol

  • range


What properties does the HTML/CSS text input box have?

  • url

    The entered URL must start with http:// and must have characters after it, otherwise it cannot be submitted

  • search

    Define the text field used to enter the search string


  • Date Control - date

What properties does the HTML/CSS text input box have?

<input>
  • Time control- time

What properties does the HTML/CSS text input box have?

2-What properties does the HTML/CSS text input box have?

<input>
<input>
  • Date time control-datetime-local

##

<input>
What properties does the HTML/CSS text input box have?
    Month control-month

<input>
What properties does the HTML/CSS text input box have?
    Week control- week

<input>
What properties does the HTML/CSS text input box have?
    Date and time control--datetime
##
<input>

Note: The date and time control also supports min and max attributes. Indicates the minimum and maximum time that can be setWhat properties does the HTML/CSS text input box have?

<input>

What properties does the HTML/CSS text input box have?

Attributes of the textarea input box

PropertiesValueDescriptionautofocusautofocus Specifies that when the page loads, the text area automatically gains focus. colsdisableddisabledSpecifies that the text area is disabled. formmaxlengthnameplaceholderreadonlyreadonlySpecifies that the text area is read-only. requiredrequiredSpecifies that the text area is required/required. rowswraphard

textarea文本区域中可容纳无限数量的文本,其中的文本的默认字体是等宽字体(通常是 Courier)。

可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小,不过更好的办法是使用 CSS 的 height 和 width 属性。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
</head>
<body>

<textarea rows="10" cols="30">
我是一个文本框。
</textarea>

</body>
</html>

What properties does the HTML/CSS text input box have?

(学习视频分享:web前端

number Specifies the visible width within the text area.
form_id Define one or more forms to which the text area belongs.
number Specifies the maximum number of characters allowed in the text area.
text Specifies the name of the text area.
text Specifies a short hint describing the expected input value for the text area.
number Specifies the number of visible rows in the text area.
soft Specifies how the text in the text area should wrap when the form is submitted.

The above is the detailed content of What properties does the HTML/CSS text input box have?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn