Bạn đang xem: Tương tác giữa 2 form
Có hợp lý không nếu sắp xếpmột formvào nhì cột?Một nghiên cứu về mắtđã chỉ ra rằng nếu đặt formtrong một cột sẽ xuất sắc hơn là trong không ít cột. Tại sao vậy? biện pháp mà bọn họ cuộn một trang web cũng tương tự cáchchúng ta điền một biểu mẫu: đi từ trên xuống dưới, triệu tập vào nội dung.Một formvới những cột tuy vậy song rất có thể dễ dàng làmngười dùng mất phương hướng với bị "lạc" trong đó. Để giữ người tiêu dùng theo đúng mẫu chảy và không trở nên gián đoạn, thì ta đặt những ô điền thông tintrên một cột từ bên trên xuống dưới. Mặc dù nhiên, vẫn đang còn ngoại lệ giống như hình ảnh dưới đây các ô điền thông tinđược bỏ trên cùngmột dòng.
Nếu formcó cấu tạo quá tinh vi (giống như cách tính tiền ngơi nghỉ một shop trực tuyến đường hay bước đk ở một khối hệ thống cho vay mượn tiền), ta có thể chia những ô điền tin tức về các nhóm khác biệt được ngăn cách bằng một khoảng trống hoặc chính tiêu đề của từng nhóm. Điều kia sẽ cho tất cả những người dùng cảm giác đang triển khai một quá trìnhthú vịthay vì xúc cảm choáng ngập. 
Chúng ta nên đặttên của những ô điền thông tinở đâu ?Tênsẽ cung cấp cho tất cả những người dùng thông tin đi kèm với các ô điền và chúng thường được đặt bên ngoài các ô. Thường thìcó nhì vị trí đến tên những ô điền: một là được đặttrênvà hai làđược đặt bêntrái những ô điền. Mặc dù nhiên, trước đây những nhà kiến tạo cũng lốt tên những ô điền vào vào phần chữ mờ (placeholder). Đã có khá nhiều tranh luận về việc đâu là các rất tốt để hiển thị tên những ô, tuy nhiên vẫn chưa xuất hiện một câu trả lời dứt khoát.Có một điều cụ thể là địa chỉ của chúngphụ ở trong vào từng tình huống.Hãy lưu ý kỹ từng gạn lọc của bạn.Đặt tên bêntrên những ô điềnĐây là vị trí đặt các ký hiệu phổ cập nhất, được xác nhận bằng nghiên cứu UX của Google. Nó mê thích nghi xuất sắc cho các điện thoại thông minh thông minh cỡ nhỏ. 
Đặt tên bên mép trái các ô điềnĐây hoàn toàn có thể là lựa chọn rất tốt nếu bạn cầnhiển thị các ô nhập dữ liệu lớn hơn. Điều nàymang lại các sự chú ý và không trở nên đè lên những ô điềnkhác. Rộng nữa, chủng loại điềnsẽ chiếm phần it không gian theo chiều dọc. Tuy nhiên, cách này chỉ hoạt động tốt trên máy tính bàn; so với điện thoại, kích cỡ là một vấn đề(màn hình vượt hẹp cho tất cả ô điền cùng phần tên được đặt mặt trái). Điều này sẽ gây nên trở ngại cho tất cả những người dùng (không thể bắt gặp hết dự liệu, câu chữ đã điền vào hoặc xảy ra lỗi tiến công máy trước lúc gửi biểu mẫu). Để phòng chặn những biểu mẫu bị nhờ cất hộ sai, các bạn sẽ phải tạora những nguyên mẫu bổ sung để để cho website trở nên tương xứng với năng lượng điện thoại. 
Đặt tênbên trong số ô điềnCách nàyđang trở nên thông dụng với các nhà xây dựng UX.Sau khi ấn vào ô điền, thương hiệu ô sẽkhông mất đi màsẽ di chuyên lêntrên cùngcủa ô điền, tạo khoảng trống cho những người dùng điền tài liệu vào.Lợi ích của phương pháp này là hiên nhiên: Nó tiết kiệm ngân sách không gian,người dùng rất có thể dễ dàng thâu tóm được nội dung bắt buộc điền vào cùng khiấn vào những ô điền, thương hiệu ôsẽ đi lên, vẫn sẽđược hiển thị. Mặc dù nhiên, đâykhông bắt buộc là phương án tốt nhất. Nó phụ thuộc vào vào nội dung củabiểu mẫu. Nếu như bạn thao tác với những biểu mẫucó ít ô, thì giải pháp này không hiểu quảvì bọn chúng khôngchứa nhiều thông tin mà người tiêu dùng cần. Phương thức này hoạt động tốt rộng vớicác biểu mẫuphức tạp với khá nhiều mục. 
Chúng ta rất có thể dùngPlaceholder Text cầm cho thương hiệu ?Có vô cùng nhiều phương pháp để cung cấp các gợi ý,một trong những số ấy là ta cho những hướng dẫn vào bên trong các ô. Tuy nhiên, các cuộc thử nghiệm của người dùng chỉ ra rằng Placeholders trong số ôsẽ tác động đến tài năng sử dụng hơn là giúp sức người dùng. Chúng sẽ làm cho quy trình điền biểu mẫutrở đề xuất phức tạp, đặc trưng nếu mẫu gồm hàng tá các ô điền. Có tác dụng ẩn điplaceholder text sẽ tác động đến trí nhớ ngắn hạn của bạn dùng. Điều này khiến cho tất cả những người dùng nặng nề nhớ được các thông tin đi kèm với từngô, gây trở ngại trong bài toán kiểm tra cùng sửa lại tin tức vàcũng gây nên khó khăn so với người khiếm thị cùng khiếm khuyết về nhấn thức.Nhưta thấy,khi ấn vào ô để điền thông tin thì placeholer đã bến mất. Ví như không có tên các ô, người tiêu dùng không thể kiểm tra các bước của họ trước lúc gửi biểu mẫu mã đi. Họ có thể dễ dàng quên đi những dữ liệu họ đã điền vàovà đo đắn liệu hồ hết ô trước đó gồm điền sai hay không - đó luôn luôn là một lỗ hổng béo về thông tin. Người tiêu dùng sẽ phải xóa tài liệu đã điền làm việc từng ô đê phát hiện placeholder text.Phương pháp này sẽ không còn thuận tiện cho tất cả những người dùng thực hiện phím Tab để đưa ô, cũng chính vì họ sẽ không còn thường đánh giá dạng tài liệu cần điền vào ô tiếp theo. Khi con trỏ đặt vào một ô điền và Placeholder text đổi mới mất, vấn đề này sẽ tạo ức chế cho tất cả những người dùng sử dụng bàn phím để đưa giữa những ô. 
Bên cạnh số đông bất lợi, cũng đều có trường thích hợp sửdụng tên những ô điềnnhư một placeholder . Ví dụ, so với đắng cam kết nhận tin tức, họ chỉđiền vào một trong những ô "Email." 
Làm nỗ lực nào để giảm áp lức đối với khả năng nhớ ngắn hạn của tín đồ dùng?Tạo những khoảng chừng trống 
Tự động đưa bé trỏ vào ô điền đầu tiên 
Không sử dụng chữ in hoa 
Nút bấm có quan trọng đặc biệt trong kiến thiết biểu chủng loại UX?Nút bấm sẽ điều hướng người dùng tạo ra các hành động. Đó là tại sao thiết kế nút bấmluôn là phầnquan trọng.Nút bấm nên lý giải hành động sẽ tiến hành tạo raMột vỏ hộp hội thoại giỏi không chỉhỏi bạn dùng người ta muốn thực hiện hành động gì mà qua đócònlàm cho mỗi lựa lựa chọn của tín đồ dùngđược ví dụ nhất bao gồm thể. Đó là tại sao chúng ra nên được sắp xếp tên khác nhau cho từng nút bấm không giống nhau. Điều này sẽkhiến người dùng cảm thấy tự tín hơn khi lựa chọn hành vi muốn thực hiện.Tên của nút bấm lý giải nó sẽ làm gì, điều này xuất sắc hơn là thực hiện những kỹ hiệu thông thường (giống như "OK"). BettingExpert tăng được số lượng đăng cam kết lên 31.54% bằng phương pháp thay thay đổi tênnút bấm tử đụng từ cơ bản thành những các từ chỉ hành động. Thực hiện động trường đoản cú bất cứ khi nào có thể thay cho những từ như "Yes" tuyệt "OK ". Luôn luôn nhớ rằng CTA của người sử dụng phản ánh ý địnhcủa fan dùng. Ví dụ, nếu như là thực hiện hành vi đăng ký, thì hiển nhiên nên đặt tênnút bấm là "đăng ký".
Tách rời hành động đặc trưng với các hành vi khácHành động đặc biệt trong biểu mẫu cần phải bôi đậm rộng với những color dễ dìm biết. Các hành động khác thì cần có các tông màu nhẹ hơn khác hoàn toàn với hành động quan trọng, vấn đề đó làm giảm thiểu lỗi và điều phối đúng cho những người dùng. Giỏi làm cho các nút hành vi cơ bạn dạng khác biệt so với những nút phụ.Hãy sử dụng các nút bấm một bí quyết hợp lý. Nếu bạn có hai nút bấm, một nút quan trọng và một nút khác, thì nút đặc biệt nên được làm cho rất nổi bật hơn. 
Nút bấm quan tiền trọngĐừng khiến cho loại nút nhấn này vận động cho đên khi tất cả các ô được người tiêu dùng hoàn thành,giúp cho những người dùng kiểm tra thông tin của họ trước khi gửi đi. 
Chúng ta có thể làm đơn giản và dễ dàng hóa quá trình điền biểu mẫu mã ?Tự hễ điềnChức năng auto điềnsẽ giúp người tiêu dùng điền đúng và đủ thông tin. Theo một nghiên cứu và phân tích của google, chức năngnày giúp mọi tín đồ điền biểu mẫu nhanh hơn 30%. Nếu người dùng đã đk vào trong thương mại dịch vụ của bạn, tài liệu sẽ tự động hóa được điền vào những ô khi người dùng thực hiện bước thanh toán. Tuy nhiên, nhớ rằng thêm vào chức năng chỉnh sửacho fan dùng. 
Đừng quên định dạng auto cho những ôChức năng này tạo cho việc điền vào biểu mẫu thuận lợi hơn. Người tiêu dùng sẽ không thắc mắc nhiều về câu hỏi bởi vi đầy đủ thứ điều cụ thể với họ. 
Hãy luôn sáng tạoCung cấp cho tất cả những người dùngsố ký kết tự được điền thông qua cách làmnhư vào ô số smartphone và tháng ngày ở ảnh dưới. 
Tránh sử dụng Dropdown với nhị hoặc tía lựa chọnthay vì sử dụng dropdown, hay sử dụng nút tích để mang được tin tức nhanh hơn và không có tác dụng ""chậm" người dùng. Rất nhiều thứ đa số trở nên cụ thể hơn nhưng không yêu cầu nhiều lần ấn. 
Form xác nhậnForm xác nhậnrất quan liêu trọng. Phát hiện rất nhiều lỗi điền và giải thích tại sao tin tức không được xác nhận. 
Và đông thời, giải thích cục bộ yêu cầu về tài liệu và format của nó. Nếu mật khẩu của bạn dùng bao hàm sáu cam kết tự, xuất xắc nêu ra. Đừng giới thiệu một gợi ý. Hãy làm cho cho quy trình điền trở cần dễ hiểu.Thêm vào những lựa chọn mang lại ô mật khẩu để tránh những lỗi về bảo mật.Đó có thể là chứcnăng hiển thị mật khẩu đăng nhập hoặc một năng lực khác cho tất cả những người dùng để họ có thể kiểm tra dữ liệu của chính mình trước lúc gửi. Nếu như dịch vụ của khách hàng cóyêu cầu đặc biệt quan trọng về mật khẩu, hãy thông báo cho những người dùng trước lúc họ thường vào. 
Khi điền vào ô mật khẩu, thỉnh thoảng người dùng sẽ buộc phải đổi phương diện với những vấn đề mà họ vô tình chạm chán phải- ví như họ sẽ để Caplock và quên điều đó. Chúng tôi khuyên bạn nên thông báo cho người dùng khi Caplock được bật. 
Cho phép người tiêu dùng sử dụng social mediaĐăng nhập bằng thông tin tài khoản mạng thôn hộilà khí cụ thực sự mạnh; người tiêu dùng sẽ tiết kiệm được không ít thời gian. Mặc dù nhiên, chớ quên cam đoan với người tiêu dùng về bảo mật tin tức và giải thích đúng chuẩn những tin tức nào của họ mà các bạn cần. Bạn có thể thêm vào vào biểu tượng ô khóađểcủng cố cảm nhận của bạn dùngvề bảo mật. Hãy để mình vào phía người dùng và lưu ý đến vấn đề bảo mật của họ. 
Vị trí của người dùng có tác động đến form?Câu vấn đáp là có. Trường hợp formđược thiết kế cho nhì hoặc nhiều người sử dụng ở nhiều khu vực khác nhau(như ngơi nghỉ US, châu âu và châu á), thì sinh hoạt mỗi nơi lại khác nhau. Vẫn không ngạc nhiên nếu tên của những ô điền sẽ dựa vào vào từng vùng.Đây là một số lưu ý: 1. Từng một quốc giá có một định hình số riêng. 2. Ở Mỹ họ có mã ZIP, tuy nhiên ở âu lục họ dùngmã bưu điện. 3. Ô lựa chọn "Bang" chỉ có ở Mỹ. 
Tổng kếtChúng ta rất có thể thấy, việc xây dựng một khung đăng nhập xuất sắc cần một sự "khôn khéo". Đừng khiến cho tất cả những người dùng cảm xúc thất vọngvà phí thời hạn trong việccố cố kỉnh tìm kiếmcách hoạt động vui chơi của nó. Làm cho formcủa chúng ta thật cụ thể ngay từ khi bắt đầu, với tên những ô điềnđược đặt bên phía ngoài các ô.Hãychắc chắn rằng quý khách hàng của chúng ta có thể sử dụng bọn chúng thật cấp tốc và dễ dàng dàng. Biểu mẫu được coi như là một phần quan trọng trong áp dụng của bạn. Mọi liên tưởng mà người dùng thực hiện tại để biến đổi dữ liệu với Backend rất nhiều phải sử dụng biểu mẫu mã (Form). Đôi lúc, có thể nó rất đối kháng giản, nhưng lại thực tế cho thấy thêm nó phức tạp hơn nhiều. Các bạn sẽ cần gởi biểu chủng loại thông tin người tiêu dùng đã nhập, đánh giá lỗi từ sever và sàng lọc những dữ liệu được nhập (Là quá trình sau lúc họ rời ra khỏi input đó) và đôi lúc bọn họ cũng nên xây dựng một custom-made UI Elements mang đến biểu mẫu của mình (datepickers, select multiple custom).
Tất cả phần lớn thứ bổ trợ cho biểu mẫu như trên đều đề nghị thêm những JS để trình chăm nom đọc và xúc tiến trong khi người dùng tương tác với biểu mẫu trên vận dụng của bạn. Điều này thường đang dẫn đến các vấn đề về hiệu xuất. Đôi khi có một yếu tố nào kia gây nên việc đó và bài toán tối ưu nó đang sữa chữa hầu hết thứ.
Thông thường, sự việc nằm sinh sống việc liên hệ của người dùng tạo ra tâm lý kích hoạt những thành phần (component) hiển thị lại liên tục. Đó là 1 phần mấu chốt để chúng ta xác định với cải thiện.
Cách để xử lý vấn đề này, họ sẽ ko phản ứng lại với tất cả tương tác của người tiêu dùng (không áp dụng on
Change). Thật ko may, vấn đề đó không thực sự thiết thực cho những trường hòa hợp sử dụng. Chúng ta muốn hiển thị phản nghịch hồi cho người dùng khi họ can hệ với biểu chủng loại của bọn chúng ta, chưa hẳn chỉ ngóng họ nhấn nút submit.
Thực hiện xây dựng biểu mẫu
Chúng ta vẫn cùng hợp tác vào so với hiệu xuất của 2 biểu mẫu bên dưới dựa theo thương hiệu của nó
Chi ngày tiết về đường truyền demo các bạn vào trên đây nhé: tại đây
So sánh giữa 2 biểu mẫu mã trên sẽ cài đặt ở
function App() return
Slow Form
Fast Form
Có độ dài từ 3 đến 10 ký tự
Chỉ hiển thị lỗi giả dụ input đã có touched hoặc được ấn submit
Khi size được gửi, tất cả dữ liệu sẽ được hiển thị vào console
Ở đầu tệp, chúng ta có một vài ba thông dùng để kiểm tra:
window.PENALTY = 150_000const FIELDS_COUNT = 10FIELDS_COUNT điều hành và kiểm soát số lượng trường được hiển thị.
PENALTY được áp dụng trong nguyên tố
let current
Penalty
Value = 2function Penalty
Comp() for (let index = 2; index < window.PENALTY; index++) current
Penalty
Value = current
Penalty
Value ** index return nullTrước tiên, chúng ta sẽ để ý qua
/** * When managing the state higher in the tree you also have prop drilling khổng lồ * khuyến mãi with. Compare these props lớn the Fast Xem thêm: Stt vui khi đăng gì lên facebook cho vui, những câu nói hay để đăng ảnh lên facebook
Input component */function Slow
Input( name, field
Values, touched
Fields, was
Submitted, handle
Change, handle
Blur,: name: string field
Values: Record
Fields: Record
Submitted: boolean handle
Change: (event: React.Change
Event
Blur: (event: React.Focus
Event
Values
Fields
Message = get
Field
Error(value) const display
Error
Message = (was
Submitted /** * The Slow
Form component takes the approach that"s most common: control all * fields và manage the state higher up in the React tree. This means that * EVERY field will be re-rendered on every keystroke. Normally this is no * big deal. But if you have some components that are even a little expensive * to lớn re-render, địa chỉ them all up together and you"re toast! */function Slow
Form() const
Field
Values> = React.use
Reducer( (s: typeof initial
Field
Values, a: typeof initial
Field
Values) => ( ...s, ...a, ), initial
Field
Values, ) const
Touched
Fields> = React.use
Reducer( (s: typeof initial
Touched
Fields, a: typeof initial
Touched
Fields) => ( ...s, ...a, ), initial
Touched
Fields, ) const
Was
Submitted> = React.use
State(false) function handle
Submit(event: React.Form
Event
Default() const form
Is
Valid = field
Names.every( (name) => !get
Field
Error(field
Values
Was
Submitted(true) if (form
Is
Valid) console.log(`Slow khung Submitted`, field
Values) function handle
Change(event: React.Change
Event
Field
Values(
Target.value) function handle
Blur(event: React.Focus
Event
Touched
Fields(
Thông thường, điều này không gây vô số vấn đề so với các size Nhưng nếu như bạn có một số thành phần input đầu vào tốn thời gian tốn nhiều thời hạn để xử trí và yêu mong hiển thị lại sau đó, bạn biết điều gì xảy ra rồi đấy.
Bây giờ, họ hãy lập một profile interaction cho form trên. (Phần này nếu bạn nào chưa rõ rất có thể tham khảo with profiling enabled). Hiện nay để giữ đến thử nghiệm của chúng ta nhất quán, hệ trọng sẽ tập trung vào lần thứ nhất tiên, nhập ký tự "a" và sau đó "blur" (kích hoạt sự khiếu nại blur khi người tiêu dùng chuyển vùng focus khỏi input hiện tại).
Hãy coi điều này, 97 milliseconds cho sự kiện keypress. Hãy nhớ rằng, họ chỉ gồm duy nhất khoảng chừng 16ms nhằm xử lý các phần này. Thời gian xử lý trở nên dài hơn sẽ khiến mọi thử trở buộc phải có cảm giác trì trệ. Và ở bên dưới cùng, nó cho họ biết rằng họ đã ngăn luồng thiết yếu trong 112 mili giây chỉ bằng phương pháp nhập một ký tự và blur nó đi.
Đừng quên rằng đấy là tốc độ lờ lững 6 lần, vày vậy nó sẽ không quá tệ đối với nhiều tín đồ dùng, cơ mà nó vẫn chính là dấu hiệu của một vụ việc về công suất nghiêm trọng.
Hãy test trình biên dịch React Dev
Tools cùng quan sát phần đa gì React đang có tác dụng khi họ tương tác với một trong những trường biểu mẫu như vậy.
Có vẻ như đều trường đều đang rất được kết xuất lại (re-render). Nhưng thực tiễn thì chúng không đề xuất thiết! Chỉ gồm input mà người tiêu dùng tương tác new thực sự cần điều này.
Vậy rõ rồi, có thể đây là vụ việc và để khẳng định điều đó. Họ cần để mắt tới tiếp ví dụ tiếp theo về
Fast
Form
/** * Not much we need to lớn pass here. The `name` is important because that"s how * we retrieve the field"s value from the form.elements when the form"s * submitted. The was
Submitted is useful lớn know whether we should display * all the error message even if this field hasn"t been touched. But everything * else is managed internally which means this field doesn"t experience * unnecessary re-renders lượt thích the Slow
Input component. */function Fast
Input( name, was
Submitted,: name: string was
Submitted: boolean) /** * The Fast
Form component takes the uncontrolled approach. Rather than keeping * track of all the values & passing the values to lớn each field, we let the * fields keep track of things themselves & we retrieve the values from the * form.elements when it"s submitted. */function Fast
Form() const
Was
Submitted> = React.use
State(false) function handle
Submit(event: React.Form
Event
Default() const form
Data = new Form
Data(event.current
Target) const field
Values = Object.from
Entries(form
Data.entries()) const form
Is
Valid = Object.values(field
Values).every( (value: string) => !get
Field
Error(value), ) set
Was
Submitted(true) if (form
Is
Valid) console.log(`Fast khung Submitted`, field
Values) return ( )Nhìn loáng qua lần đầu, chúng ta thấy gì?.
Và điều đặc biệt quan trọng nhất nên biết là trạng thái đã được cai quản trong chính các trường chứ chưa phải trong trường thân phụ (tức là Form) như ta sẽ phân tích ở dòng nhìn thứ nhất về
Mọi thứ đang được cải thiện và đúng mục tiêu bọn họ yêu mong ban đầu. Nhưng chúng ta cũng có thể nhận ra thêm rằng bọn họ có 0ms trong tổng thời hạn chặn vào luồng main-thread. Điều này xuất sắc hơn nhiều so với 112ms và hãy lưu giữ rằng, chúng ta đã giảm thiểu được tốc độ chậm cấp 6 lần ban sơ mà người dùng phải tận hưởng nó.
Hãy mở React Dev
Tools và đảm bảo an toàn rằng shop chúng tôi chỉ hiển thành thị phần rất cần được hiển thị với shop này:
Chỉ duy nhất những thành phần được re-render lại là những thành phần thực sự quan trọng như Input nhưng ta đã làm cho trong ví dụ. Thực tế,
Lưu ý
Đôi khi, bạn cũng sẽ cần phải biết các giá bán trị của những Input khác trong quy trình xác thực cực hiếm của bọn chúng (cho ví dụ về "Confirm password" sẽ nên biết giá trị của "password" để kiểm soát giá trị gồm giống nhau). Vào trường vừa lòng này, các bạn sẽ có một vài lựa lựa chọn khác. Chúng ta cũng có thể đưa trạng thái vào địa điểm Parent Component ít phổ biến nhất, điều này không lý tưởng vì điều đó tức là mọi thành phần sẽ hiển thị lại khi trạng thái bên trong đó chuyển đổi và sau đó bạn cũng có thể phải bước đầu lo lắng về câu hỏi ghi ghi nhớ (nên vui lúc React cung cấp tuỳ chọn này).
Một chọn lựa khác là gửi nó vào Context Local trong component của bạn. Vẫn chỉ tuyệt nhất Provider và Consumer của Context đó buộc phải re-render lại khi trạng thái chũm đổi.
Một chọn lọc thứ tía là áp dụng React Ref để cách xử lý trường vừa lòng này mà bạn có thể tìm hiểu.
Kết luận
Vậy, điểm cốt tử trong nội dung bài viết này họ cần chú ý trong quá trình cải cách và phát triển các khung trong ứng dụng:
Lưu ý về những trạng thái được đặt ở componentỨng dụng Controlled Component cùng Uncontrolled Component cho những trường hợp cần thiết khi các Input mất thời gian xử lý là các hay ít.Một số sàng lọc khác để cải thiện hiệu xuất như Context, React Ref để nâng cấp hiệu xuất cho FormTham khảo tại: epicreact.dev
